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.
- Buka projek yang sebelumnya sudah dibuat.
- Buka build.gradle (module:app) lalu tambahkan dependencies berikut ini:
- Kemudian klik Sync Now dan tunggu hingga proses building selesai.
- Jika sudah buka ActivitySatu.java lalu salin kode berikut ini setelah kode private SlidingTabLayout mTabs;
- Masih di ActivitySatu.java tambahkan kode berikut ini tepat di bawah kode setSupportActionBar(toolbar);
- Buat class baru dan berinama dengan NavAdapter. Lalu salin kode berikut ini.
- Buka activity_satu.xml lalu salin kode berikut.
- Buka direktori res > values > strings.xml lalu tambahkan kode berikut ini.
- Buat layout baru dengan cara klik kanan pada direktori layout > New > Layout resource file, berinama header. Lalu salin kode berikut ini
- Buat layout baru lagi dengan cara klik kanan pada direktori layout > New > Layout resource file, berinama nav_items. Lalu salin kode berikut ini.
- Buat drawable baru caranya klik kanan pada direktori drawable > New > Drawable resource file, berinama nav_bg. Lalu salin kode berikut ini.
- Buat lagi drawable baru dengan nama yang sama tapi pada Directory name ubah menjadi drawable-v21. Lalu salin kode berikut ini.
- Jalankan aplikasi dan lihat hasilnya.
compile 'de.hdodenhof:circleimageview:1.2.1'
compile 'com.android.support:recyclerview-v7:22.0.+'
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; 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(); 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;
}
}
<?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> <string name="email">jemberdeveloper@gmail.com</string> <?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> <?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>
<?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> <?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> 
