In android concept of navigation drawer is one of the smartest option for switching between Activities or fragment. As we all know it is very easy to create a navigation drawer in android by creating a NavigationDrawerActivity by default. But the default navigation drawer will be having only an image widget and a title widget which will become very complicated if we try to customize it . So the easiest solution here is to create a custom navigation drawer in which you can use your own layouts. In this tutorial we will learn how to implement a custom navigation drawer in android.
In this tutorial we will create an example project which will help us to learn how to implement custom navigation drawer in android.
Steps
- Create new project in android studio
- Add drawer widget to the activity’s layout file
- Add new layout for the drawer item
- Create the adapter for the ListView inside the drawer item
- Implement the code for setting drawer in the Activity’s java file
Create New project in android studio
Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.
Add drawer widget to the activity’s layout file
If you have created a new project an activity and its layout file must be automatically created. You need to modify the layout file with the following code which is containing drawer widget . as well as the listview and other layout which should be displayed in the navigation drawer.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.example.customnavigationdrawer.MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay"> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> </android.support.design.widget.CoordinatorLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:layout_marginRight="56dp"> <RelativeLayout android:id="@+id/rl_profile" android:layout_width="match_parent" android:layout_height="144dp" android:layout_alignParentTop="true" android:background="@color/colorPrimary"> <!--Here you can give your custom layouts if required--> </RelativeLayout> <ListView android:id="@+id/lv_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/rl_profile" android:background="#ffff" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" /> </RelativeLayout> </android.support.v4.widget.DrawerLayout>
content_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.example.customnavigationdrawer.MainActivity" tools:showIn="@layout/activity_main"> <TextView android:id="@+id/tv_selected_navigation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:textColor="@color/colorPrimary"/> </RelativeLayout>
Here in this example on selecting a drawer_item i am just changing the text of a TextView which is defined in content_main.xml file. In your case you can write the code to open respective Fragment or Activity
Create new layout for the drawer item
In the above step we are having a listview which will display the list of items inside the navigation drawer. Since it is listview it should have an item layout and adapter. In this example we will be having a listview with an image icon and title. Following is the code for list item layout. To know more about listview you can refer Android listview tutorial
layout_drawer_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="16dp" android:paddingBottom="16dp" android:paddingLeft="16dp" android:gravity="center_vertical"> <ImageView android:id="@+id/im_icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_marginRight="32dp" android:tint="#54000000"/> <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="14sp" android:textColor="#80000000"/> </LinearLayout>
Create the adapter for the listiview
Now we are ready with list view and its item layout. So as we described above we need an adapter as well which we need to set to listview. The adapter should be provided with the titles and icon images which will be set to the inflated list item layout.
DrawerListAdapter.java
import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; import com.squareup.picasso.Picasso; import java.util.ArrayList; /** * Created by ramees on 8/16/2016. */ public class DrawerListAdapter extends BaseAdapter { Activity activity; int [] imageId; private static LayoutInflater inflater=null; ArrayList<String> titles; public DrawerListAdapter(Activity activity, ArrayList<String> titles, int[] icons) { // TODO Auto-generated constructor stub this.titles = titles; this.activity = activity; imageId = icons; inflater = ( LayoutInflater )activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } @Override public int getCount() { // TODO Auto-generated method stub return titles.size(); } @Override public Object getItem(int position) { // TODO Auto-generated method stub return position; } @Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } public class Holder { TextView tv_title; ImageView im_icon; } @Override public View getView(final int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub Holder holder=new Holder(); View view; view = inflater.inflate(R.layout.layout_drawer_item, null); holder.tv_title = (TextView) view.findViewById(R.id.tv_title); holder.im_icon = (ImageView) view.findViewById(R.id.im_icon); holder.tv_title.setText(titles.get(position)); Picasso.with(activity.getApplicationContext()).load(imageId[position]).into(holder.im_icon); return view; } }
Implement the code for setting drawer in activity’s java file
Now all we have to do is to collect the image icons and titles for drawer list items and add to adapter and finally set the adapter to the listview. Suppose you are having any other layout inside the drawer other than listview you can refer the layout widget here and set the required data to the layouts.Following is the code for the activity’s layout file
MainActivity.java
package com.example.customnavigationdrawer; import android.content.Intent; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.view.Menu; import android.view.MenuItem; import android.widget.AdapterView; import android.widget.ListView; import android.widget.RatingBar; import android.widget.TextView; import com.squareup.picasso.Picasso; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { Toolbar toolbar; public static int[] drawer_icons = {R.drawable.ic_call_white_24dp, R.drawable.ic_favorite_border_white_24dp, R.drawable.ic_search_white_24dp}; TextView tv_selected_navigation; ArrayList<String> navigation_items; private DrawerListAdapter drawerListAdapter; private ListView lv_drawer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); SetDrawer(); } private void init() { toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); tv_selected_navigation = (TextView) findViewById(R.id.tv_selected_navigation); navigation_items = new ArrayList<>(); //adding menu items for naviations navigation_items.add("Call"); navigation_items.add("Favorite"); navigation_items.add("Search"); lv_drawer = (ListView) findViewById(R.id.lv_drawer); } private void SetDrawer() { DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.setDrawerListener(toggle); toggle.syncState(); drawerListAdapter = new DrawerListAdapter(MainActivity.this, navigation_items, drawer_icons); lv_drawer.setAdapter(drawerListAdapter); lv_drawer.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { if(navigation_items.get(position).equalsIgnoreCase("Call")){ tv_selected_navigation.setText("Selected Call"); }else if(navigation_items.get(position).equalsIgnoreCase("Favorite")){ tv_selected_navigation.setText("Selected Favorite"); }else if(navigation_items.get(position).equalsIgnoreCase("Search")){ tv_selected_navigation.setText("Selected Search"); } } }); } }
Finally add the following lines to your string.xml file
string.xml
<string name="navigation_drawer_open">Open navigation drawer</string> <string name="navigation_drawer_close">Close navigation drawer</string>
import com.squareup.picasso.Picasso; what is this and why are you using this. you haven’t provided any single information about picaso class
We are using it in DrawerListAdapter.java which for loading the icon images in navigation drawer. I will update the tutorial with more information. if you are getting any error you just need to compile picasso library in build.gradle file