Android Navigationview Drawerlayout Support Library Example

With help of Android Design Library its easy to add Sliding Navigationview, this is supported from Android 2.1 onward and gets Material design look.

Example code demonstrates on how to add Navigation view to your apps.

1) Add support lib to build.gradle file,

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

1) Create a ‘android.support.v4.widget.DrawerLayout‘ as parent and make ‘android.support.design.widget.NavigationView‘ as child & this acts as sliding view. Apart from this we need to have another child view to display data on selection of these sliding menu. Here for demo purpose i have taken Relativelayout.

res/layout/activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/apps_drawerLayout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/toolbarlayout"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/headerlayout"
        app:menu="@menu/menu_main"/>

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

Note:

To see navigationview from Left to Right set android:layout_gravity="start", similarly for Right to left set android:layout_gravity="end".

res/layout/toolbarlayout.xml

<RelativeLayout
    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.support.v7.widget.Toolbar
        android:id="@+id/apps_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/apps_toolbar"
        android:textSize="25sp"
        android:text="Hello world"/>

</RelativeLayout>

2) Add res/layout/headerview.xml it is to show header for sliding menu. Make any customizations like add image, set background color etc.. Set this as app:headerLayout for navigationview.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#ff3f50ff"
    android:layout_height="250dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="30sp"
        android:textColor="#ffffff"
        android:text="Header Text"/>

</RelativeLayout>

3) Menu are nothing but the sliding items, add icons and make customization & set it as part of navigationview.
res/menu/menu_main.xml,  set it as app:menu in navigationview

<menu 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" tools:context=".MainActivity">


    <item android:id="@+id/action_componse"
        android:title="Compose"
        android:icon="@drawable/ic_compose"/>

    <item android:id="@+id/action_draft"
        android:title="Draft"
        android:icon="@drawable/ic_draft"/>

    <item android:id="@+id/action_messages"
        android:title="Messages"
        android:icon="@drawable/ic_messages"/>

    <item android:id="@+id/action_settings"
        android:title="Settings"
        android:icon="@drawable/ic_settings"/>
</menu>

4) Update res/values/styles.xml to remove the default actionbar & use standard toolbar.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff5fb71a</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
    </style>
</resources>

5) Set the view & toolbar in activity class & run the application. Learn more about Android Toolbar

public class MainActivity extends AppCompatActivity {

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

         Toolbar toolbar = (Toolbar) findViewById(R.id.apps_toolbar);
         setSupportActionBar(toolbar);
    }

Output:
NavigationView Android Support Library

6) To Enable & update custom icon for navigation in toolbar add below code.

navigation_icon

final ActionBar supportAB = getSupportActionBar();
        supportAB.setHomeAsUpIndicator(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        supportAB.setDisplayHomeAsUpEnabled(true);

7) To show and hide naviagtion view on touch of actionbar or toolbar home icon use below code.

 

mDrawerLayout = (DrawerLayout)findViewById(R.id.apps_drawerLayout);

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

8) To get the selected item in NavigationView add the below event handler.

NavigationView mNavigationView;
mNavigationView = (NavigationView)findViewById(R.id.nav_view);
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                //write your code here.
                Toast.makeText(getApplicationContext(),menuItem.getTitle(),Toast.LENGTH_SHORT).show();
                return true;
            }
        });

To view sliding navigation items in group use the below code.

nav_menu_in_group

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:id="@+id/animalsGroup">
        <item android:id="@+id/id_lion"
            android:title="Lion" />
        <item android:id="@+id/id_cat"
            android:title="Cat" />
        <item android:id="@+id/id_dog"
            android:title="Dog" />
        <item android:id="@+id/id_rat"
            android:title="Rat" />
    </group>

    <group android:id="@+id/id_fruits">
        <item android:id="@+id/id_apple"
            android:title="Apple" />
        <item android:id="@+id/id_orange"
            android:title="Orange" />
        <item android:id="@+id/id_grapes"
            android:title="Grapes" />
    </group>
</menu>