Navigation Drawer In Android

How to implement Navigation Drawer in Android

With the use of navigation drawer we can switch between all the functionalities of an application easily. Here I am going to describe to you the steps for implementing navigation drawer in Android application.  Following are the main steps for creating a navigation drawer

1. Create Drawer Layout
2. Initialise the Drawer List
3. Handle Navigation Click Events
4. Listen for Drawer Open And Close Events.
5. Open And Close with the App Icon. 

Create a Drawer Layout 

Drawer Layout acts as a top-level container for window content that allows for interactive drawer views to be pulled out from the edge of the window. Drawer positioning and layout is controlled using android:layout_gravity attribute on child views whose value=side of the view you want the drawer to emerge from left or right. To use drawer layout position your  primary content views as the first child with a width and height of match_parent. Add the drawers as child views after the main content view and set the layout_gravity appropriately. Drawers commonly used match_parent for height with a fixed width. DrawerLayout.DrawerListner can be used to monitor the state and motion of drawer views. Any drawers that positioned the left/start should always contains content for navigation around the application, where as any drawer positioned to right/end should always contains actions to take on the current content.

 

Initialise the Drawer list 

The list should be populated by an adapter. Use setOnItemClickListner to receive click events in the navigation drawer's list.

 

Handle Navigation Click Events 

When the user select an item in the drawer's list, the system call onItemClick() on the onItemClickListner given to setOnItemClickListner() 

 

Listen for Navigation Drawer Open And Close Events 

To listen for drawer open and close events, call setDrawerListner() on your drawer layout and pass it an implementation of DrawerLayout.DrawerLister. This interface provide callbacks for onDraweropen() and onDrawerClosed() . If your activity includes the actionbar, you can instead extend the ActionBarDrawerToggle class. The ActionBarDrawerToggle implements DrawerLayout.DrawerListner so you can still override those callbacks , but it also facilitate the proper interaction behaviour between the action bar icon and the navigation drawer. 

 

Open And Close with The App Icon 

To make  ActionBarDrawerToggle works create an instance of this with a constructor which requires the following arguments

• Activity hosting the drawer
• Drawer Layout
• A drawable resource to use as the drawer indicator
• Standard navigation icon which can be downloaded.
• String resource to describe the "open drawer" action
• String resource to describe the "Close drawer" action

Now I am going to describe how we can create a drawer layout using Android studio.

 

For that first you create your layout fie, 

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="@+id/drawerlayout"
android:layout_height="match_parent">
    <FrameLayout
android:id="@+id/mainContent"
android:layout_width="match_parent"
android:layout_height="match_parent">
    </FrameLayout>
    <ListView
android:background="#FF8800"
android:divider="@null"
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_gravity ="left"
android:layout_height="match_parent">
    </ListView>
 </android.support.v4.widget.DrawerLayout>

Please don't forget to add the layout gravity for the listview,

Now I created an array in the string.xml file. 

<array name="listItems">
    <item>Menu One</item>
    <item>Menu Two</item>
    <item>Menu Three</item>
    <item>Menu Four</item>
</array>
 Initialise all the ui elements in the mainActivity.java file in the onCreate()
listView = (ListView) findViewById(R.id.listview);
drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
final String []array = getResources().getStringArray(R.array.listItems);
listView.setAdapter(new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,array));
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
listView.setItemChecked(i, true);
        setTitle(array[i]);
        Toast.makeText(MainActivity.this, array[i],Toast.LENGTH_SHORT).show();
    }
});

Now initialize the ActionBarDrawerToggle like the following,

actionBarListner = new ActionBarDrawerToggle(this,drawerLayout,R.string.open,R.string.close);
drawerLayout.setDrawerListener(actionBarListner);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Now create the following methods thats also must have for the drawer layout,

 

This method is for any configuration changes like the orientation or the device size changes,

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
actionBarListner.onConfigurationChanged(newConfig);
}

This  will be called after the activty id created,

@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
actionBarListner.syncState();
}

This will set the title for the action bar,

public void setTitle(String title){
    getSupportActionBar().setTitle(title);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
if(actionBarListner.onOptionsItemSelected(item))
return true;
return super.onOptionsItemSelected(item);
}

 Please see the screen shots also,

 

 

 

Happy coding..

Cheers.

 

Read more articles on Android: 

• Bound Service Using Messenger In Android: Part Three
• Set Up Google Cloud Messaging Service For Android - Part One