Main navigation

Android Navigation Drawer for Sliding Menu / Sidebar

adsense

Create a New Project

  1. Go to File → New → New Project
  2. Enter Application Name , I have used MyNavigationDrawer
  3. Enter Company Domain, this is used to uniquely identify your App’s package worldwide.
  4. Browse the Project Location, by default Projects get stored at home/AndroidStudioProjects, you can browse to any other location if you want.Then click on Next.
  5. Select Minimum SDK. I recommend choosing API 15 : Android 4.0.3(IceCreamSandwich), using this API level you can target approximately 94% of the running android devices at the time of this writing.Then click on Next.
  6. Choose an Activity, as per your requirement.I will use an Empty Activity, since I would be writing most of the code myself.Then Click on Next.
  7. Choose an Activity Name. Make sure Generate Layout File check box is selected, Otherwise we have to generate it ourselves.Then click on Finish.I have left Activity Name as MainActivity.
  8. Gradle will configure your project and resolve the dependencies, Once it is complete proceed for next steps.
  9. Since we will be using navigation View, include the following the dependencies of your app level build.gradle located at MyNavigationDrawer → app → build.gradle
  10. build.gradle

    compile 'com.android.support:design:23.0.1'</pre>
    
    

Create Layout For Navigation Drawer

  1. Paste the following code in activity_main.xml located at
    MyNavigationDrawer → app → src → main → res → layout → activity_main.xml
  2. activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout xmlns:android="https://schemas.android.com/apk/res/android"
        xmlns:app="https://schemas.android.com/apk/res-auto"
        xmlns:tools="https://schemas.android.com/tools" android:id="@+id/drawer_layout"
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:fitsSystemWindows="true" tools:openDrawer="start">
        
        <LinearLayout
            xmlns:android="https://schemas.android.com/apk/res/android"
            xmlns:app="https://schemas.android.com/apk/res-auto"
            xmlns:tools="https://schemas.android.com/tools"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            tools:context=".MainActivity">
            <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
                android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">
                <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                    android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />
            </android.support.design.widget.AppBarLayout>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                
            </RelativeLayout>
        </LinearLayout>
        <android.support.design.widget.NavigationView android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />
    </android.support.v4.widget.DrawerLayout> 
    
    
  3. Few Points to consider Here
    • The drawer must be the top element and the main content(Linear Layout) must be the first child in the DrawerLayout.
    • The main content view must match the parent view’s width and height,since it represents the full screen contents when the drawer is closed.
  4. We have used a Drawer Layout widget as parent element with a Linear Layout(representing Main Screen ) and a Navigation View (representing the Main Navigation menu).
  5. The Linear Layout consist of AppBar which in turn has a toolbar element ,the user will click on the toolbar icon to make the navigation Drawer visible.
  6. In the Navigation View , we have to define a headerlayout and a menu item.
  7. For the headerLayout create a new layout resorce and name it nav_header_main.xml
    Add the following code to it.
  8. nav_header_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" android:layout_height="@dimen/nav_header_height"
        android:background="@drawable/side_nav_bar"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:theme="@style/ThemeOverlay.AppCompat.Dark" android:orientation="vertical"
        android:gravity="bottom">
        <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:src="@drawable/andy"
            android:id="@+id/imageView" />
        <TextView android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:text="Andy Point"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[email protected]"
            android:id="@+id/textView" />
    </LinearLayout>
    
    

    the code shown above represents the Header of the navigation bar as shown in the figure below


    Android Navigation Drawer Tutrorial

    Android Navigation Drawer



    It consists of a background which I have made as gradient explained in the link below
    Adding Gradient as Background
    We also have a Image View and 2 text views as marked in the figure.

  9. Let’s see the code for the navigation menu items.Create a new resource file – activity_main_drawer.xml of type menu
    and add the following code to it, as we can see from the figure above we have added two menu items Preferences and About.
  10. activity_main_drawer.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="https://schemas.android.com/apk/res/android">
        <group android:checkableBehavior="single">
            <item android:id="@+id/nav_preferences" android:icon="@android:drawable/ic_menu_preferences"
                android:title="Preferences" />
            <item android:id="@+id/nav_about" android:icon="@android:drawable/ic_menu_info_details"
                android:title="About" />
        </group>
    </menu>
    
    
  11. Since we chose an empty activity , we have to manually create another menu file named main.xml which we are using onCreateMenuOptions() method in the MainActivity();
    Create a new file and insert the following code.
  12. menu.xml

    <menu xmlns:android="https://schemas.android.com/apk/res/android"
        xmlns:app="https://schemas.android.com/apk/res-auto"
        xmlns:tools="https://schemas.android.com/tools" tools:context=".MainActivity">
        <item android:id="@+id/action_settings" android:title="@string/action_settings"
            android:orderInCategory="100" app:showAsAction="never" />
    </menu>
    

    This sliding menu using navigation drawer will be visible when the user presses the dot icon on the right side of the screen.

Add Drawables

  1. We have used some drawable resources for the project , 1st is a gradient pattern file as explained above.
    Create a New Resource file of type drawables and name it side_nav_bar.xml
    Put the following code in it .
  2. side_nav_bar.xml

    <shape xmlns:android="https://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <gradient
            android:startColor="#FBC800"
            android:centerColor="#FE8333"
            android:endColor="#FF4D4B"
            android:type="linear"
            android:angle="135"/>
    </shape>"
    
  3. We have used two other png files, one for drawer icon and one for the profile picture, you can copy the images from the code by clicking on the Download Now Button add it to the drawables folder.

Update Styles and Strings.xml files

  1. Update the styles.xml as follows
  2. styles.xml

     <resources>
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
        <style name="AppTheme.NoActionBar">
            <item name="windowActionBar">false</item>
            <item name="windowNoTitle">true</item>
        </style>
        <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
        <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
    </resources>
    
  3. Update the strings.xml which we have used in this android navigation drawer example. The file will be located at MyNavigationDrawer -> app -> src -> main -> res -> values -> strings.xml as follows
  4. strings.xml

    <resources>
        <string name="app_name">MyNavigationDrawer</string>
        <string name="navigation_drawer_open">Open navigation drawer</string>
        <string name="navigation_drawer_close">Close navigation drawer</string>
        <string name="action_settings">Settings</string>
    </resources>
    
  5. Update the dimens.xml located at MyNavigationDrawer -> app -> src -> main -> res -> values -> dimens.xml as follows
  6. dimens.xml

    <resources>
        <!-- Default screen margins, per the Android Design guidelines. -->
        <dimen name="nav_header_vertical_spacing">16dp</dimen>
        <dimen name="nav_header_height">160dp</dimen>
        <!-- Default screen margins, per the Android Design guidelines. -->
        <dimen name="activity_horizontal_margin">16dp</dimen>
        <dimen name="activity_vertical_margin">16dp</dimen>
    </resources>
    
  7. Update the AndroidManifest.xml with the following code.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.androidtutorialpoint.mynavigationdrawer" >
<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme" >
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/AppTheme.NoActionBar" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
</manifest>

Please Note that the package name used is in reverse domain name format in order to uniquelly identify your app globally. We have used our own domain name for this android sliding menu tutorial, do Remember to replace your own package name, the main thing to note here is that we have to use android:theme = “@style/AppTheme.NoActionBar” , since we are explicitly including an Action Bar in the layout , Otherwise it would get the following error:
This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.

Add Functionality to the MainActivity

  1. Open MainActivity.java located at MyNavigationDrawer → app → src → main → java → com.androidtutorialpoint.mynavigationdrawer → MainActivity.java

    Although It must have been open by default on creation of project.

  2. Add the following code in the onCreate method of MainActivity.java
  3. MainActivity.java

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();
    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem item) {
          	int id = item.getItemId();
           	if (id == R.id.nav_preferences) {
        			// Handle the preference  action
    		} else if (id == R.id.nav_about) {
    	    		// Handle the About action
    		}
    
            DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
            drawer.closeDrawer(GravityCompat.START);
            return true;
        }
    });
    
    
  4. In above code we are referencing the layout elements we declared
    We have created an ActionBarDrawerToggle object which ties together the functionality of DrawerLayout and the framework ActionBar to implement the recommended design for navigation drawers.
    toggle.syncState() is used to to synchronize the indicator with the state of the linked DrawerLayout
    navigationView.setNavigationItemSelectedListener is used to handle the
    events when user clicks on one of the navigation items.

  5. Next we override the onBackPressed() method so that If the navigation drawer is open , it is closed. Otherwise default implemention of the onBackPressed() works.
    Add the following code after onCreate() method inside the MainActivity.
  6. @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
    
  7. Since we started out with an empty activity mention onCreateOptionsMenu() and onOptionSelectedMenu() on our own.So paste the below code after onBackPressed() method inside the MainActivity.
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

Run this app on your phone and see if the Navigation Drawer is working properly.Please comment in case you have any doubts or suggestions.



What’s Next

You can experiment with different options or make your custom menu as per your requirement. You can try to integrate Google Login in your app, and once the user is logged in you can show his profile in the navigation drawer. For more details how to Add Google Login to your Android App Refer the following link.

Adding Google Login To Android App

Similarly you can add Facebook Login to your Android App and show user profile in the navigation drawer. Please refer to the following link to learn how to Add Facebook Login to Your Android Application.

Adding Facebook Login To Android App

Soon We will be covering how to create android application with Facebook and Google Sign-In, on successful Sign-In the user profile will be shown in the navigation drawer.

Till then stay tuned for more tutorials.. and Don’t forget to subscribe our blog for latest android tutorials. Also do Like our Facebook Page or Add us on Twitter.




Reader Interactions

Comments

  1. could not find “Build gradle”. app name-> app-> ??
    facing error in main activity (name i used: AccSideDrawer.java) and style.xml :
    can you help? thanks in advance 🙂

    • Hi Asmita,

      Looks like there is some issue here, can you please send your app project to [email protected] and comment here once you have send the files. We would be happy to help.

      Thanks
      Android Tutorial Point Team

  2. heyy very great tutorial! thanks 😀
    btw i think there’s a typo..in the “getMenuInflater().inflate(R.menu.main, menu);”… it supposed to be
    getMenuInflater().inflate(R.menu.menu.menu);

  3. Hi, this is a very good tutorial!!
    However, for the Navigation Header, the name and email cannot be displayed in my project. Could you help me?
    Thanks!

    • Hi Robert,

      We are glad that you liked the tutorial, Please make sure you have the following textView in your nav_header_main.xml

      Here you can replace the text accordingly. Thanks for reaching out to us. Please subscribe to our blog to get latest updates.

      Thanks
      Android Tutorial Point Team

  4. Hi bro nice work (y) but you should have talked about dependencies. At my machine your code was showing error. After I added dependencies it worked. Check if you want.

    Thanks.

    dependencies {
    compile fileTree(dir: ‘libs’, include: [‘*.jar’])
    testCompile ‘junit:junit:4.12’
    compile ‘com.android.support:appcompat-v7:24.0.0’
    compile ‘com.android.support:design:24.0.0’
    } https://uploads.disquscdn.com/images/7f74e39302352f8e3c370031917e718cddc59800318a7f4c17a9da9a92298874.jpg

  5. Hi, this tutorial was so helpful! nice work.
    I had the same error Mohammad Asaduzzaman mentioned as I had started the project before I found this page and didn’t have the minimum SDK set to IceCreamSandwich. So that’s something for other users to keep in mind.
    I would like to display this slider menu on multiple activities and reuse the code given above.
    I’m quite new to Android development so I’m not sure how to approach this, would it be suitable to have each activity extending the MainActivity?

  6. Your step by step information would done hard task into easy task. This process was annoying for me while I was reading on other blogs. But your article helped me a lot.

  7. When I was implementing this article, In starting phase I got some difficulty but at the end It became helpful for me.

  8. Well done on a great article. This worked 100%. I need some help with this. How do you open a new activity/page from the sliding menu.

  9. This is the best tutorial on Sliding Menu I have come across but I am getting an error & I can’t figure out what is it.

    AssertionError: No DOM at XML. Parent=XmlTag:android.support.v7.widget.Toolbar; attribute=PsiElement(XML_ATTRIBUTE); second attempt=null

    plz find a way to solve this.
    Thanks & keep up the good work

  10. Hi thanks for the awesome tutorial, I’m new to android developpement and I wanted to know how can I add offline pages to the navigation items? I will really appreciate your help

Leave a Reply

Advertisment ad adsense adlogger