Type something and hit enter

ads here
author photo
By On
advertise here
Tutorial Navigation Drawer Material Design  Android Studio

Pada posting kali ini kita akan membahas tentang tutorial navigation drawer material design menggunakan Android Studio. Sebelumnya kita jelaskan dulu apa itu navigation drawer. Navigation adalah panel navigasi utama pada aplikasi android yang tersembunyi di sisi kiri layar dan akan terbuka ketika pengguna menarik layar dari kiri ke kanan, untuk lebih jelasnya bisa baca di sini.

Sebenarnya ada cara cepat untuk membuat navigation drawer pada aplikasi android yang kita buat yaitu menggunakan library, namun pada tutorial ini kita tidak akan menggunakan library. Mungkin di posting selanjutnya kita akan berikan tutorial membuat navigation drawer menggunakan library. Oke kita langsung simak tutorial berikut.


  1. Buka projek yang sebelumnya sudah dibuat.
  2. Buka build.gradle (module:app) lalu tambahkan dependencies berikut ini:

  3. compile 'de.hdodenhof:circleimageview:1.2.1'
    compile 'com.android.support:recyclerview-v7:22.0.+'
     
  4. Kemudian klik Sync Now dan tunggu hingga proses building selesai.
  5. Jika sudah buka ActivitySatu.java lalu salin kode berikut ini setelah kode private SlidingTabLayout mTabs;

  6. String TITLES[] = {"Overview","Portofolio","Team"};
    int ICONS[] = {R.mipmap.ic_info_grey600_36dp,R.mipmap.ic_perm_contact_cal_grey600_36dp,R.mipmap.ic_account_child_grey600_36dp};
    int PROFILE = R.mipmap.ic_launcher;
    RecyclerView mRecyclerView;
    RecyclerView.Adapter mAdapter;
    RecyclerView.LayoutManager mLayoutManager;
    DrawerLayout Drawer;
    ActionBarDrawerToggle mDrawerToggle; 
  7. Masih di ActivitySatu.java tambahkan kode berikut ini tepat di bawah kode setSupportActionBar(toolbar);

  8.  mRecyclerView = (RecyclerView) findViewById(R.id.RecyclerView);
    mRecyclerView.setHasFixedSize(true);
    mAdapter = new NavAdapter(TITLES,ICONS,getString(R.string.app_name),getString(R.string.email),PROFILE);
    mRecyclerView.setAdapter(mAdapter);
    mLayoutManager = new LinearLayoutManager(this);
    mRecyclerView.setLayoutManager(mLayoutManager);
    Drawer = (DrawerLayout) findViewById(R.id.DrawerLayout);
    mDrawerToggle = new ActionBarDrawerToggle(this,Drawer,toolbar,R.string.openDrawer,R.string.closeDrawer){
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
    
        }
    
        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
    
        }
    };
    Drawer.setDrawerListener(mDrawerToggle);
    mDrawerToggle.syncState(); 
  9. Buat class baru dan berinama dengan NavAdapter. Lalu salin kode berikut ini.

  10.  import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    /**
     * Created by Taufan F on 12/02/2016.
     */
    public class NavAdapter extends RecyclerView.Adapter<NavAdapter.ViewHolder> {
        private static final int TYPE_HEADER = 0;
        private static final int TYPE_ITEM = 1;
        private String mNavTitles[];
        private int mIcons[];
        private String name;
        private int profile;
        private String email;
    
        public static class ViewHolder extends RecyclerView.ViewHolder {
            int Holderid;
    
            TextView textView;
            ImageView imageView;
            ImageView profile;
            TextView Name;
            TextView email;
    
    
            public ViewHolder(View itemView,int ViewType) {
                super(itemView);
    
                if(ViewType == TYPE_ITEM) {
                    textView = (TextView) itemView.findViewById(R.id.rowText);
                    imageView = (ImageView) itemView.findViewById(R.id.rowIcon);
                    Holderid = 1;
                }
                else{
                    Name = (TextView) itemView.findViewById(R.id.name);
                    email = (TextView) itemView.findViewById(R.id.email);
                    profile = (ImageView) itemView.findViewById(R.id.circleView);
                    Holderid = 0;
                }
            }
        }
    
        NavAdapter(String Titles[],int Icons[],String Name,String Email, int Profile){
            mNavTitles = Titles;
            mIcons = Icons;
            name = Name;
            email = Email;
            profile = Profile;
        }
    
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType == TYPE_ITEM) {
                View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.nav_items,parent,false);
                ViewHolder vhItem = new ViewHolder(v,viewType);
                return vhItem;
            } else if (viewType == TYPE_HEADER) {
                View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.header,parent,false);
                ViewHolder vhHeader = new ViewHolder(v,viewType);
                return vhHeader;
            }
            return null;
        }
    
        @Override
        public void onBindViewHolder(NavAdapter.ViewHolder holder, int position) {
            if(holder.Holderid ==1) {
                holder.textView.setText(mNavTitles[position - 1]);
                holder.imageView.setImageResource(mIcons[position -1]);
            }
            else{
    
                holder.profile.setImageResource(profile);
                holder.Name.setText(name);
                holder.email.setText(email);
            }
    
        }
    
        @Override
        public int getItemCount() {
            return mNavTitles.length+1;
        }
    
        @Override
        public int getItemViewType(int position) {
            if (isPositionHeader(position))
                return TYPE_HEADER;
    
            return TYPE_ITEM;
        }
    
        private boolean isPositionHeader(int position) {
            return position == 0;
        }
    }
     
  11. Buka activity_satu.xml lalu salin kode berikut.

  12.  <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/DrawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="7dp">
    
        <LinearLayout xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".ActivitySatu">
    
            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar" />
    
            <com.developer.jember.jdapps.Tabs.SlidingTabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
    
            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />
        </LinearLayout>
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/RecyclerView"
            android:layout_width="320dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
    
            android:background="#ffffff"
            android:scrollbars="vertical">
    
        </android.support.v7.widget.RecyclerView>
    </android.support.v4.widget.DrawerLayout> 
  13. Buka direktori res > values > strings.xml lalu tambahkan kode berikut ini.

  14.  <string name="email">jemberdeveloper@gmail.com</string> 
  15. Buat layout baru dengan cara klik kanan pada direktori layout > New > Layout resource file, berinama header. Lalu salin kode berikut ini

  16.  <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="178dp"
        android:background="@color/colorPrimary"
        android:orientation="vertical"
        android:weightSum="1">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="vertical"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">
    
            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:textColor="#ffffff"
                android:text="@string/app_name"
                android:textSize="14sp"
                android:textStyle="bold"
                />
    
            <TextView
                android:id="@+id/email"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="5dp"
                android:text="@string/email"
                android:textSize="14sp"
                android:textStyle="normal"
    
                />
        </LinearLayout>
    
        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/ic_launcher"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="38dp"
            android:id="@+id/circleView"
            />
    </RelativeLayout> 
  17. Buat layout baru lagi dengan cara klik kanan pada direktori layout > New > Layout resource file, berinama nav_items. Lalu salin kode berikut ini.

  18.  <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@drawable/nav_bg"
        android:clickable="true"
        android:orientation="horizontal">
    
        <ImageView
            android:id="@+id/rowIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:src="@mipmap/ic_info_white_18dp"
            android:contentDescription="ikon" />
    
        <TextView
            android:id="@+id/rowText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="72dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    
    </RelativeLayout>
     
  19. Buat drawable baru caranya klik kanan pada direktori drawable > New > Drawable resource file, berinama nav_bg. Lalu salin kode berikut ini.

  20.  <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true">
            <shape>
                <solid android:color="@color/colorHighlight"></solid>
            </shape>
        </item>
        <item>
            <shape>
                <solid android:color="@android:color/white"/>
            </shape>
        </item>
    </selector> 
  21. Buat lagi drawable baru dengan nama yang sama tapi pada Directory name ubah menjadi drawable-v21. Lalu salin kode berikut ini.

  22.  <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:attr/colorControlHighlight">
        <item android:id="@android:id/mask" android:drawable="@android:color/white"/>
        <item android:state_pressed="true">
            <shape>
                <solid android:color="@color/colorHighlight"/>
            </shape>
        </item>
        <item>
            <shape>
                <solid android:color="@android:color/white"/>
            </shape>
        </item>
    </ripple> 
  23. Jalankan aplikasi dan lihat hasilnya.
    Tutorial Navigation Drawer Material Design  Android Studio

Video Tutorial

Click to comment