Android Material Design Navigation Drawer with HeaderView

Android-Navigation-Drawer-AndroidNovice

The Navigation Drawer is a panel which displays main navigation of an application. By default it is hidden on the left side of app. It responds to simple swipe gesture or when user clicks toggle button on the left side of Actionbar or Toolbar.

Gmail, Google Playstore, PlayMusic and many other famous applications has Navigation Drawer. But you should always consider in mind where not to use Navigation Drawer.

Navigation Drawer is been there for really long time but with the launch of Android Lollipop google came up with Material Design. It affected Navigation Drawer in many areas from performance to design.

How Material Design Navigation Drawer is Different?

  • We can overlap StatusBar on Android Lollipop and above
  • Beautiful, animated Hamburger icon in actionbar(toolbar)
  • We can use either actionbar or toolbar
  • HeaderView to describe fruitful informations
  • We can handle navigation with either RecyclerView, ListView or NavigationView

There are many ways to create Navigation Drawer but here in this article I will show you how to create Material Design Navigation Drawer using ListView and Fragments. The final app will look like below,

How to implement Android Material Design Navigation Drawer?

First create a new project and name it as Navigation Drawer (package name com.androidnovice.navigationdrawer).

Note : Select Empty Activity only.

1> In your build.gradle(Module: app) add following dependencies( By default it will be there ),

 

2> Now create a new file as ArrayContainer.java and write down below code,

This file holds the Static Arrays of Navigation item’s name and Icons, It will be accessible everywhere in our app using the class name, It will help us to maintain consistency throughout our application.

 

3> Inside values -> colors.xml paste below lines of code,

 

4> Open styles.xml under res -> values and add below lines of code. The styles defined in this styles.xml are common to all the android versions.

How to change Hamburger Icon Color?

Ans : Just create a new style in same file as below,

and add it to main style as,

 

5> Now under res folder, create a new folder named values-v21. Inside values-v21, create another styles.xml and add below code. These styles are specific to Android Lollipop and above versions only.

Above line of code make our Navigation Drawer overlap StatusBar.

 

6> In your Manifest.xml file replace your theme with our recently created one,

You can find this line inside Application tag of your Manifest.xml.

 

7> Now Inside your activity_main.xml paste below code,

The drawer view (the LinearLayout containing ListView) must specify its horizontal gravity with the android:layout_gravity attribute. To support right-to-left (RTL) languages, specify the value with “start” instead of “left” (so the drawer appears on the right when the layout is RTL).

You can change drawer width by changing value of android:layout_width=”280dp”.

 

8> Create a new layout file fragment_main.xml under layout folder and write below code,

This file is our fragment view which will be replaced when ever user clicks on navigation item. In our scenario we will just change the image and text inside fragment on navigation item click.

 

9> Create a new layout file list_single_item.xml under layout folder,

This file is for our Custom ListView with Images & Text.

 

10> Create a new file inside layout folder named as profile_header_view.xml,

This is the header of our ListView which will hold email and, username & Icon. You can change it dynamically but for keeping things simple in mind I’m using static values.

 

11> Create a new java file MainFragment.java inside our default package,

This class holds the logic of changing icon and text whenever user clicks on navigation item. Bundle is used to pass data between Activity or Fragment, In our case we are passing the position value which will be used to get corresponding icon and text from our Static Arrays.

 

12> Create a new java file NavListViewAdapter.java and write down below code,

This class is our Custom Adapter for ListView, Follow this tutorial if you don’t know about it.

 

13>Goto res -> values -> strings.xml and paste below code,

 

14> Finally, inside your MainActivity.java write down below code,

DrawerToggle is responsible for drawer events. FragmentManager & FragmentTransaction is useful to replace or attach Fragment to activity or container. LoadFragment is a custom method which will pass the data to fragment and it is called whenever user clicks Navigation List Item.

I have commented all the necesssory part, if you have done everything mentioned above project will work fine.

If any error occurs mention in comment section or if you want source code just request in comment section I will post the github and dropbox links.

 

5 comments

Leave a Reply

Your email address will not be published. Required fields are marked *