Saturday, May 21, 2022

Code to Create Navigation Drawer in Android App

Create Navigation Drawer in Android App

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

Create Navigation Drawer in Android

What is Navigation Drawer:

- Advertisement -

As a developer, you may know Navigation. Yes, navigation is nothing but the various menus that navigates people from one page to other. Also, in the case of the website you have seen navigation that is the menus available most probably on the top of the page or maybe on the left side or right side of the page.

In the application, there is navigation as well, for your understanding you can call the navigation drawer a “sliding menu bar” which is most of the time remains invisible. As per the developer.android.com “the navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen”.

Do you think it is the only option for the navigation drawer, that it can display only on the left edge of the screen? No, it is not the constraint we can also create a navigation drawer at the right edge I have discussed below. However, as per the standard design, it is not recommended to have a navigation drawer on the right side.

Types of Navigation Drawer:

Android is having two navigation drawers as shown below:

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

There is one more type that 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 a single type to get any of the other types one has to make changes. First study the steps for creating a 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 navigation drawer. To better figure out follow the below steps.

Step#1: First of all, create a new app with a blank or empty activity.

Step#2: Create a layout that says “app_bar” in the layout directory under the 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 the navigation drawer then create a different layout say nav_header_layout hope you will find the same layout name or it may be slightly different.

Step#4: For the menu in the drawer create menu_item.xml (you might see the same name in default navigation drawer activity) in the menu directory under the res folder.

Step#5: Finally in activity_main layout adds both the drawer as well as the layout that is always visible that is app_bar.xml layout.

Step#6: Here you bound the navigation drawer to activity_main, to get the code you can simply copy from the default navigation drawer activity available in the android studio just make sure that you are using the proper id and resources name like drawable 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 the drawer open from the right edge you need to make some changes in your drawer. Gravity left = start and gravity right end some system may have started, end gravity and some may have left, right gravity here I am showing an example with start-end gravity as my system is having a start and end gravity.

This will be your activity_main layout, bold text is responsible for making the 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 a navigation drawer at the right edge as shown below.

Navigation Drawer at the right edge

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

I hope you understand how to create Navigation Drawer in Android App and how to make it open from the right edge (right align). If you have any questions, comment below I will try my best to solve your problems.

Aasim Sheikh
Aasim Sheikhhttps://syncsas.com/
CTO at SyncSaS Technologies

Stay in Touch

To follow the best weight loss journeys, success stories and inspirational interviews with the industry's top coaches and specialists. Start changing your life today!

Related Articles