Android Navigation Drawer Example Tutorial

In this tutorial we’ll implement a Navigation Drawer in our android application. Android navigation drawer is a sliding menu and it’s an important UI component. You will see navigation drawer in most of the android applications, it’s like navigation menu bars in the websites.

Android Navigation Drawer

Android Navigation Drawer is a sliding left menu that is used to display the important links in the application. Navigation drawer makes it easy to navigate to and fro between those links. It’s not visible by default and it needs to opened either by sliding from left or clicking its icon in the ActionBar.

In broader terms, Navigation Drawer is an overlay panel, which is a replacement of an activity screen which was specifically dedicated to show all the options and links in the application.

In this android navigation drawer tutorial we’ll implement the navigation drawer using the Drawer Layout API present in Android Support Library. We’ll show 3 fragment views that can be opened from the drawer items.

Android Navigation Drawer Project Structure

android-navigation-drawer-project-297x450

Android Navigation Drawer Example

To implement the Navigation Drawer we first need to add android.support.v4.widget.DrawerLayout as the root of the activity layout as shown below.

activity_main.xml

The menu options in the navigation drawer are stored in the form of a ListView. Each option opens in the FrameLayout.

We’ve used a ToolBar in place of an ActionBar here. ToolBar has been introduced since Android 5.0 as a generalisation of ActionBar. It gives us more control and flexibility to modify and its easier to interleave with other views in the hierarchy.

The layout ToolBar is defined in the xml layout given below.

toolbar.xml

We need to use the Theme Theme.AppCompat.NoActionBar in the styles.xml when using Toolbars.

The layout for the ListView rows in the Navigation Drawer is given below.

list_view_item_row.xml

The navigation drawer items are put in a string array in the strings.xml file as shown below.

strings.xml

The DataModel.java class is used to define the objects for the drawer list items.

DataModel.java

The drawer items are stored in the form of a ListView. Hence we need to use an Adapter Class to provide that data to the activity class.

DrawerItemCustomAdapter.java

The MainActivity.java source code is given below.

MainActivity.java

In the above code getSupportActionBar().setDisplayHomeAsUpEnabled(false); is used to hide the default back button.

In this code we’ve used a DrawerItemClickListener Class that loads the respective fragment of the list item clicked using a FragmentManager. Also the the title of the ToolBar is changed to the list item clicked using setTitle(mNavigationDrawerItemTitles[position]);.

The fragment classes and their respective layouts are given below.

ConnectFragment.java

The layout of the above fragment is defined below.

fragment_connect.xml

The other two items are defined in exactly the same way as above hence we’re skipping it here.

Navigation Drawer Android Example Output

Below is the output produced by our navigation drawer android example application.

android navigation drawer example

This brings an end to android navigation drawer example tutorial. You can download the final Android Navigation Drawer Project from the below link.

By admin

Leave a Reply