Android Design Support Library working with Navigation Drawer

Android 5.0 Lollipop was one of the most significant Android releases ever, due to introduction of material design, a new design language that refreshed the entire Android experience. For backward compatibility Android Design Support Library was introduced. It provides compatibility to number of material design components all the way back to Android 2.1. In Design support Library the components like navigation drawer, floating action button, snackbar, tabs, floating labels and animation frameworks were introduced. In this article we are going to learn about Navigation Drawer & NavigationView. With NavigationView provided in Android Design Support Library, things are much more easier !



Before going further, I suggest you to take a look at design guide lines docs mentioning specs, do’s and don’ts.

Adding Material Design

First of all we’ll start making our app material. If you are not aware of android material design, take a look at previous article Easy Getting Started with Material Design, this will give you a quick, easy and good start.

1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.

2. Open build.gradle and add android design support library com.android.support:design:23.0.1 

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

3. Open colors.xml located under res ⇒ values and add the below color values.

<resources>

    <color name="colorPrimary">#4ec07e</color>
    <color name="colorPrimaryDark">#3b925f</color>
    <color name="colorAccent">#4a90e2</color>

    <color name="textColorPrimary">#FFFFFF</color>
    <color name="windowBackground">#FFFFFF</color>
    <color name="navigationBarColor">#000000</color>
	
    <color name="white">#ffffff</color>
    <color name="light_grey">#e1e1e1</color>

</resources>

4. Open styles.xml located under res ⇒ values and add below styles. The styles defined in this styles.xml are common to all the android versions.

<resources>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- customize the color palette -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme" parent="AppTheme.Base">

    </style>
</resources>

5. Now under res, create a folder named values-v21. Inside values-v21, create another styles.xml with the below styles. These styles are specific to Android 5.0

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- customize the color palette -->
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:colorAccent">@color/colorAccent</item>

        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>

</resources>

Now run the app and look at status bar color, if it changed, it means material theme is applied successfully.

android_material_design_status_bar

Adding Navigation Drawer

The navigation drawer can be an important focal point for identity and navigation within your app. NavigationView makes this easier by providing the framework you need for the navigation drawer as well as the ability to inflate your navigation items through a menu resource.

1. Open strings.xml located under res ⇒ values and add the below string values.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">MaterialDesign</string>
    
    <string name="action_settings">Settings</string>
    <string name="action_sort">Sort</string>
    <string name="action_search">Search</string>
    <string name="action_home">Home</string>
    <string name="action_profile">Profile</string>
    <string name="action_inbox">Inbox</string>
    <string name="action_logout">Logout</string>
	
    <string name="lbl_close">Close</string>
    <string name="lbl_open">Open</string>

</resources>

2. Create a file navigation_drawer_items.xml under res ⇒ menu and add the below items in it.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navItemHome"
            android:icon="@drawable/ic_nav_home"
            android:title="@string/action_home"/>
        <item
            android:id="@+id/navItemProfile"
            android:icon="@drawable/ic_nav_profile"
            android:title="@string/action_profile"/>

        <item
            android:id="@+id/navItemInBox"
            android:icon="@drawable/ic_nav_inbox"
            android:title="@string/action_inbox"/>

        <item
            android:id="@+id/navItemSetting"
            android:icon="@drawable/ic_nav_settings"
            android:title="@string/action_settings"/>

        <item
            android:id="@+id/navItemLogout"
            android:icon="@drawable/ic_nav_logout"
            android:title="@string/action_logout"/>
    </group>
</menu>

3. Create a header view layout file res/layout/navigation_drawer_header.xml as below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="@dimen/nav_title_margin">

    <ImageView
        android:layout_width="@dimen/avatar_size"
        android:layout_height="@dimen/avatar_size"
        android:layout_margin="10dp"
        android:src="@drawable/profile_stub" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:gravity="center"
        android:text="Nauman Zubair"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/white" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Lahore, Pakistan"
        android:drawableLeft="@drawable/ic_location"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/light_grey" />

</LinearLayout>

4. Now open activity_home.xml and add navigation view as drawer layout’s content view as below:

<tools:android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawerLayout"
    tools:context=".HomeActivity">

    <!-- your content layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@drawable/bg_drawer"
        app:headerLayout="@layout/navigation_drawer_header"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/navigation_drawer_items" />
</tools:android.support.v4.widget.DrawerLayout>

You’ll note two attributes for NavigationView: app:headerLayout controls the (optional) layout used for the header.app:menu is the menu resource inflated for the navigation items (which can also be updated at runtime). There are some other attributes like app:itemTextColor, app:itemIconTint, app:itemBackground  you can give them a try.



5. Run the app, our Drawer Menu is now summoned ! Woo hooo

device-2015-09-21-200450

In order to get menu icon on toolbar and navigation menu item click listener, implement step 6.

6. Open HomeActivity.java and place below code in it.

public class HomeActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private NavigationView navigationView;
    private DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        navigationView = (NavigationView) findViewById(R.id.navigationView);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        setSupportActionBar(toolbar);
        
        // Set Drawerlayout switch indicator that the icon leftmost Toolbar
        ActionBarDrawerToggle mActionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.lbl_open, R.string.lbl_close);
        mActionBarDrawerToggle.syncState();
        drawerLayout.setDrawerListener(mActionBarDrawerToggle);

        // Set navigation item selected listener
        navigationView.setNavigationItemSelectedListener(new OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                String msgString = "";

                switch (menuItem.getItemId()) {
                    case R.id.navItemHome:
                        msgString = (String) menuItem.getTitle();
                        break;
                    case R.id.navItemProfile:
                        msgString = (String) menuItem.getTitle();
                        break;
                    case R.id.navItemInBox:
                        msgString = (String) menuItem.getTitle();
                        break;
                    case R.id.navItemSetting:
                        msgString = (String) menuItem.getTitle();
                        break;
                    case R.id.navItemLogout:
                        msgString = (String) menuItem.getTitle();
                        break;
                }

                // Menu item clicked on, and close Drawerlayout
                menuItem.setChecked(true);
                drawerLayout.closeDrawers();

                Toast.makeText(getApplicationContext(), msgString, Toast.LENGTH_LONG).show();

                return true;
            }
        });

    }
}

Now run the app and see what happens.

In this tutorial we learned about NavigationDrawer and NavigationView. In next tutorial we’ll learn about RecyclerView. Meanwhile please don’t forget to share this article, like it, leave any suggestions or criticisms in comments section below. :)



This article has 10 comments

  1. Hemant Bharti Goswami Reply

    nice post….sir please attach source code of Android Design Support Library working with Navigation Drawer.

    • nthreads Reply

      Hi Adrian, its size of picture shown in left sliding menu on top as header. You can define it in dimens.xml file under values folder.

  2. shalin deval Reply

    the navigation drawer is hanging while opening and closing..please guide through this.
    Also the navigation drawer is only showing the header imageView and not the menu contents.

Leave a Comment

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