Learn how to add Navigation Drawer to your Android App

What is a Navigation Drawer?

The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen. It is hidden most of the time, but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the action bar.

You can learn more at Google developers guide.

Why use a Navigation Drawer?

Say you have an e-commerce app. You can use the Navigation Drawer to display Categories and Sub Categories. Similarly for any app you can provide a set of shortcuts to the user.

How to add Navigation Drawer?

In order to add this you need to modify the layout xml file. To the layout xml file you need to add a Drawer Layout.  You will need to add v4 support library, if you don’t have it.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayoutId"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frameLayoutId"/>

    <ListView
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:id="@+id/drawerLayoutListId"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#ffffff"
        android:layout_gravity="start"
        />

</android.support.v4.widget.DrawerLayout>

Follow the video in which I will guide you step by step to add this feature.

Source Code is available here

Author: androidsmartly

I am a Tech Enthusiast who likes to work on new Ideas. Sharing knowledge on Android, Marketing, Startups and More.

1 thought on “Learn how to add Navigation Drawer to your Android App”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s