How to create Navigation Drawer in Android

How to create Navigation Drawer in Android

Being an app developer one should know how to create navigation drawer, of course you will have the code for navigation drawer from many source code site. Seizing instant code and implementing as it is in your app is not a big deal, what if you want something other than the seize code? you need to make changes to the enfolded code. Without proper insight you can not make any changes easily. It is your concern to understand basic structure, concept first after that you can easily make whatever changes you want. Here I am going to cover essential chunks requisite to understand navigation drawer and how to create it.

What is Navigation Drawer :

As a developer you may know Navigation. Yes, navigation is nothing but the various menus that navigates people form one page to other. Also in case of website you have seen navigation that is the menus available most probably on the top of the page or may be on the left side or right side of the page.
In application there is navigation as well, for your understanding you can call navigation drawer as “sliding menu bar” which is most of the times remains invisible. As per the developer.android.com “the navigation drawer is a panel that displays the apps main navigation options on the left edge of the screen”. Do you think it is the only option for navigation drawer, that it can display only on the left edge of the screen? No, it is not the constraint we can also create navigation drawer at the right edge I have discussed it below. However as per the standard design it is not recommend to have navigation drawer on the right side.

Types of Navigation Drawer :

Basically android is having  two of navigation drawer as shown below:

Navigation drawer above the action bar
Navigation drawer above the action bar
Navigation drawer below the action bar
Navigation drawer below the action bar

There is one more type which is not shown here, that type is slightly diverse and the contrast is the background shade that turns to dim or remains high when the drawer is visible on the device screen. In my case you can see when the drawer is visible the background incline dim shade.

How to create Navigation Drawer :

In updated Android Studio you have off-the-rack Navigation Drawer Activity however default navigation drawer is of single type to get any of the other type one have to make changes. First study the steps for creating navigation drawer I am sure this will help you very well. For making any changes or creating your navigation drawer best idea is to create default navigation drawer activity then grasp it and then create your own navigation drawer. To better figure out follow the below steps.

Step#1 : First of all create a new app with blank or empty activity.
Step#2 : Create a layout say “app_bar” in layout directory under res folder(I am giving the name as available in the default navigation drawer activity) app_bar layout is the layout that is visible on the screen. Shown in the figure below.
Step#3 : If you want a header in navigation drawer then create different layout say nav_header_layout hope you will find the same layout name or it may be slightly different.
Step#4 : For menu in the drawer create menu_item.xml (you might see the same name in default navigation drawer activity) in menu directory under res folder.
Step#5 : Finally in activity_main layout add both the drawer as well as the layout that is always visible that is app_bar.xml layout.
Step#6 : Here you bound navigation drawer to activity_main, to get the code you can simply copy from default navigation drawer activity available in android studio just make sure that you are using proper id and resources name like drawables name, strings etc.
My motive is to just make you clear which activity uses what etc. as it is very important to clear all this. Here you have your navigation drawer.

How to create Navigation Drawer opening from right edge :

To make drawer to open from right edge you need to make some changes in your drawer. Gravity left = start and gravity right end some system may have start,end gravity and some may have left,right gravity here i am showing an example with start end gravity as my system is having start and end gravity.

 

This will be your activity_main layout, bold text is responsible to make right edge drawer.

<android.support.v4.widget.DrawerLayout
android:id=”@+id/drawer_layout”
android:layout_marginTop=”80dp”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:openDrawer=”end”
>

<FrameLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”/>

<android.support.design.widget.NavigationView
android:id=”@+id/nav_view”
android:layout_width=”160dp”
android:layout_height=”match_parent”
android:layout_gravity=”end”
app:headerLayout=”@layout/nav_header_main”
app:menu=”@menu/activity_main_drawer”
tools:layout=”@layout/nav_header_main”/>
</android.support.v4.widget.DrawerLayout>

 

Here is your MainActivity.java

//add this code in oncreate() in default navigation drawer MainActivity.java
toolbar.setNavigationOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
if (drawer.isDrawerOpen(Gravity.RIGHT)) {
drawer.closeDrawer(Gravity.RIGHT);
} else {
drawer.openDrawer(Gravity.RIGHT);
}
}
});

after making the above changes you will see navigation drawer at the right edge as shown below.

Navigation Drawer at the right edge
Navigation Drawer at the right edge

Note : The above code is according to default Navigation Drawer activity that is directly created in android studio.

I hope you understand how to create navigation drawer and how to make it open from right edge ( right align ). If you have any question, comment below i will try my best to solve your problems.

Leave a Reply

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