Android custom navigation drawer

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>