Header Ads

Home android android programming [Tutorial] Android Material Design Sliding Navigation Drawer in 5 minutes

[Tutorial] Android Material Design Sliding Navigation Drawer in 5 minutes

20:53
Read

Navigation Drawer is one of the most important UI component for providing proper Navigation. In this tutorial we are going to implement Material Design Sliding navigation Drawer using NavigationView widget from the latest Design Support library.

sliding navigation drawer

Creating Project

Here I have created a Android Studio project with package com.learn2crack.navigationdrawer also Activity as MainActivityand layout as activity_main.

Complete Project Files

You can download the complete project as zip 

Adding Dependencies

We need to add dependency for the Design Support library. Add the following dependency.
compile 'com.android.support:design:23.2.0'
Note : Newer version Android Studio adds this dependency automatically when you create new project.
The dependencies block would look similar to,
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.2.0'
    compile 'com.android.support:design:23.2.0'
}

Creating Navigation Menu

Previously we used ListView or RecyclerView to inflate Navigation Drawer. The new NavigationView widget from the Design Support library makes this task easier. Just define the menu items in a menu file in res/menu directory. Here I have createdmenu_navigation.xml. The menu item should be defined as,
<item
    android:id="@+id/home"
    android:title="Home"
    android:icon="@drawable/ic_home"/>
The id, title and icon property should be defined. We can group multiple menu items. The checkableBehavior property is to set selectable behavior for the menu item.
The complete navigation menu is given by,

menu_navigation.xml

<?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/home"
            android:title="Home"
            android:icon="@drawable/ic_home"/>
        <item
            android:id="@+id/settings"
            android:title="Settings"
            android:icon="@drawable/ic_setting"/>
        <item
            android:id="@+id/trash"
            android:title="Trash"
            android:icon="@drawable/ic_trash"/>
        <item
            android:id="@+id/logout"
            android:title="Logout"
            android:icon="@drawable/ic_exit"/>
    </group>
</menu>

Creating Layout

Our main layout should contain DrawerLayout as parent. The NavigationView widget should be child of DrawerLayout. The Navigation menu is set using the menu property of Namespace app. The NavigationView is defined as,
<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/menu_navigation"/>
The header layout is set using headerLayout property. The header layout is the layout which is displayed above Navigation menu which displays icon and email. Our header layout has a ImageView and TextView.
sliding navigation drawer
The header layout is given by,

nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:background="@color/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="190dp">
    <ImageView
        android:src="@drawable/ic_person"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:layout_height="0dp" />
    <TextView
        android:id="@+id/tv_email"
        android:textColor="@color/White"
        android:textSize="18sp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>
Our CoordinatorLayout has content_main.xml layout, which displays a single TextView.

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.learn2crack.navigationdrawer.MainActivity"
    tools:showIn="@layout/activity_main">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="24sp"
        android:text="Navigation Drawer" />
</RelativeLayout>
The complete main activity layout is given by,

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.learn2crack.myapplication.MainActivity">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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>
        <include layout="@layout/content_main" />
    </android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/menu_navigation"/>
</android.support.v4.widget.DrawerLayout>

Creating Activity

In the initNavigationDrawer() method we initialize the NavigationView and DrawerLayout. Click in the navigation menu items are handled by implementing the interface NavigationView.OnNavigationItemSelectedListener.
When the Navigation Drawer is opened the Hamburger menu transforms to back arrow. It is achieved using theActionBarDrawerToggle. Add the following two string definition to strings.xml.
<string name="drawer_open">Open</string>
<string name="drawer_close">Close</string>
The ActionBarDrawerToggle is defined as
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close){
    @Override
    public void onDrawerClosed(View v){
        super.onDrawerClosed(v);
    }
    @Override
    public void onDrawerOpened(View v) {
        super.onDrawerOpened(v);
    }
};
Then the ActionBarDrawerToggle is added to DrawerLayout  using addDrawerListener() method. Also syncState() method should be called on ActionBarDrawerToggle object.
Remember we defined the header view with ImageView and TextView. Now lets see how to set email to that TextView. The header view View object can be obtained by calling the getHeaderView() method on the NavigationView object. Now we can create a TextView object using the view object.
View header = navigationView.getHeaderView(0);
TextView tv_email = (TextView)header.findViewById(R.id.tv_email);
tv_email.setText("raj.amalw@learn2crack.com");
Where 0 in the getHeaderView() denotes the header view index. The complete Main Activity is given by,

MainActivity.java

package com.learn2crack.navigationdrawer;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    private DrawerLayout drawerLayout;
    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        initNavigationDrawer();
    }
    public void initNavigationDrawer() {
        NavigationView navigationView = (NavigationView)findViewById(R.id.navigation_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                int id = menuItem.getItemId();
                switch (id){
                    case R.id.home:
                        Toast.makeText(getApplicationContext(),"Home",Toast.LENGTH_SHORT).show();
                        drawerLayout.closeDrawers();
                        break;
                    case R.id.settings:
                        Toast.makeText(getApplicationContext(),"Settings",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.trash:
                        Toast.makeText(getApplicationContext(),"Trash",Toast.LENGTH_SHORT).show();
                        drawerLayout.closeDrawers();
                        break;
                    case R.id.logout:
                        finish();
                }
                return true;
            }
        });
        View header = navigationView.getHeaderView(0);
        TextView tv_email = (TextView)header.findViewById(R.id.tv_email);
        tv_email.setText("raj.amalw@learn2crack.com");
        drawerLayout = (DrawerLayout)findViewById(R.id.drawer);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close){
            @Override
            public void onDrawerClosed(View v){
                super.onDrawerClosed(v);
            }
            @Override
            public void onDrawerOpened(View v) {
                super.onDrawerOpened(v);
            }
        };
        drawerLayout.addDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();
    }
}


https://www.learn2crack.com
Tags :

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.