ANDRIOD Navigation View - Material Design Support Library Tutorial

14:17:00 , , , , 0 Comments

Few days back Google announced Material Design Support Library in their Google IO 2015, and today we are going to take a look at one of the component of the material design library and that's Navigation View,  Navigation View makes it very easy to make a good looking material design Navigation drawer, I have showed you how to make a navigation drawer before this library came out and it was pretty tiresome but with this library things have changed.  So Lets get started



Prerequisites

Tutorial is going to use a toolbar as action bar and if you aren't familiar with building toolbar then before starting out this tutorial please go through that my Toolbar tutorial. This is not absolutely necessary but I strongly recommend you do give it a read.

Requirements

1. Android Studio  1.3 (Version used for this tutorial)

2. Circle Image Library (Add the dependency mentioned below)

compile 'de.hdodenhof:circleimageview:1.3.0'

 3. Material Design Support Library (Add the dependency mention below)

compile 'com.android.support:design:22.2.0

In my previous tutorial I have explained how the DrawerLayout works which will act as our root view in this tutorial so if you are not sure about its working just go and read that particular section from that tutorial, The link to that tutorial is here - 
How To Make Navigation Drawer With Header View

Lets Understand Navigation View


Think of NavigationView as any other view you know, Navigation View has two main components which you can define according to your requirements those component are as show

 Header View
This View is basically the top part of the navigation drawer, which holds the profile picture, name and email etc. You need to define this in a separate layout file we would look into that in just a moment.
 Menu
This is the menu you want to show below your header, we define menu in a menus folder, just like you define menu for your overflow menu.
So basically NavigationView is a container for the Header View and Menu which you are going to use in your sliding drawer. So now that you understand the NavigationView we can start building our Navigation Drawer.
So before we start building our app lets take a look at what we are trying to build, look at the gif below and you can see that we are going to make a sliding navigation drawer also on clicking inbox option you see we open the Inbox fragment inside the app, when you click any other option we show toast message indicating we have received the click event

Steps To Build Navigation Drawer With Navigation View

1. Open Android Studio and create a new blank project, Once your project is created go ahead and define Color scheme for your app. You do that by creating a file called colors.xml in res -> values  folder of your project. Now go ahead and add this lines to your color file again all about those colors and their usage explained in my Toolbar tutorial.
1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="PrimaryColor">#2196F3</color>
    <color name="PrimaryDarkColor">#1976D2</color>
</resources>


 2.  Now we define style for our app, Go ahead and open the styles.xml file of your project located at res -> values folder . Add the following line to the styles.xml. We are setting the color scheme for the entire app notice we make our status bar color transparent. As to achieve the desired results.

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorPrimary">@color/PrimaryColor</item>
        <item name="android:colorPrimaryDark">@color/PrimaryDarkColor</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
3. Now lets first define how our header in the navigation drawer would look like, for this go ahead and create a new layout resource file in your layouts folder and name it header.xml. Add the following code to the file. Our header layout has Relative layout with three views inside it  one Circle Image View for the profile picture and two text views one for Name and other for email. I have added the Image named profile to my drawable folder to use it with Circle Image View.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="190dp"
    android:background="@drawable/background_material"
    android:orientation="vertical"
    >
 
    <de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_width="76dp"
    android:layout_height="76dp"
    android:src="@drawable/profile"
    app:border_color="#FF000000"
    android:layout_marginLeft="24dp"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginStart="24dp" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Akash Bangad"
        android:textSize="14sp"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:gravity="left"
        android:paddingBottom="4dp"
        android:id="@+id/username"
        android:layout_above="@+id/email"
        android:layout_alignLeft="@+id/profile_image"
        android:layout_alignStart="@+id/profile_image" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Akash.bangad93@gmail.com"
        android:id="@+id/email"
        android:gravity="left"
        android:layout_marginBottom="8dp"
        android:textSize="14sp"
        android:textColor="#fff"
        android:layout_alignParentBottom="true"
        android:layout_alignLeft="@+id/username"
        android:layout_alignStart="@+id/username" />
 
</RelativeLayout>

4. Now with our header view done lets make our menu, for that go to res -> menu and create a new menu resource file and name it drawer.xml and add the following code to your file. Every menu option is enclosed withing <item> tag we have grouped them together with <group> tag setting  android:cheakableBehavour=”single” makes sure only one item can be selectable at once. Icon Tag indicate the icon we want the menu items to show besides them  I have downloaded my icons from www.google.com/design/icons and added them to my drawable folder.
?
1
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?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/inbox"
            android:checked="false"
            android:icon="@drawable/ic_inbox_black"
            android:title="@string/inbox_string" />
 
        <item
            android:id="@+id/starred"
            android:checked="false"
            android:icon="@drawable/ic_star_black"
            android:title="@string/starred_string" />
 
        <item
            android:id="@+id/sent_mail"
            android:checked="false"
            android:icon="@drawable/ic_send_black"
            android:title="@string/sent_mail_string" />
 
        <item
            android:id="@+id/drafts"
            android:checked="false"
            android:icon="@drawable/ic_drafts_black"
            android:title="@string/draft_string" />
 
 
        <item
            android:id="@+id/allmail"
            android:checked="false"
            android:icon="@drawable/ic_email_black"
            android:title="@string/all_mail_string" />
        <item
            android:id="@+id/trash"
            android:checked="false"
            android:icon="@drawable/ic_delete_black"
            android:title="@string/trash_string" />
        <item
            android:id="@+id/spam"
            android:checked="false"
            android:icon="@drawable/ic_error_black"
            android:title="@string/spam_string" />
 
    </group>
</menu>

5. Now with our header and menu created we can start creating our main_activity.xml, so open up main_activity.xml  and add the following code inside it. As you can see we have our DrawerLayout root view and it has two child view, the first one represents the content of our app which is linear layout in my case I have added my toolbar and frameLayout inside the linear layout. Now the second child of our Drawer Layout is going to be the view which we want to act like a sliding drawer in our case its the Navigation View. Rhe following attributes help us link our drawer menu and header view to navigation view. Setting gravity start makes the view slide from left. Also notice that we have added android:fitsSystemWindows="true" attribute to our drawerlayout to achieve the slide under transparent status bar effect.
app:headerLayout="@layout/header" 
app:menu="@menu/drawer"
android:layout_gravity="start"
rest of the code is self explanatory.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="vertical"
        >
        <include
            android:id="@+id/toolbar"
            layout="@layout/tool_bar"
        />
        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
 
        </FrameLayout>
 
    </LinearLayout>
 
    <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/header"
        app:menu="@menu/drawer"
        />
</android.support.v4.widget.DrawerLayout>

6. Now for the purpose of tutorial I am going to make a fragment and show you how to replace the fragment with the contents of your app when your menu item in drawer is selected so go ahead and create a layout for the fragment I have named mine content_fragment.xml. Add the following code to it (Just a TextView Inside a relative layout).
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="INBOX"
        android:padding="8dp"
        android:textColor="#fff"
        android:background="@color/PrimaryColor"
        android:textSize="28sp"
        android:id="@+id/textView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

7.  Now go to Java->[app_package_name] and create a new class for your fragment name. I have named mine ContentFragment. Add the following lines of code. Code is pretty self explanatory, with that we have our fragment ready.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.android4dev.navigationview;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
/**
 * Created by Admin on 04-06-2015.
 */
public class ContentFragment extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.content_fragment,container,false);
        return v;
    }
}

8. Now finally go to MainActivity.xml add Add the following code, I have added Comments to help you understand the code so make sure you read the comments.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
package com.android4dev.navigationview;
 
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
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.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.SubMenu;
import android.view.View;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    //Defining Variables
    private Toolbar toolbar;
    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // Initializing Toolbar and setting it as the actionbar
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
         
        //Initializing NavigationView
        navigationView = (NavigationView) findViewById(R.id.navigation_view);
         
        //Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
             
            // This method will trigger on item Click of navigation menu
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
 
                 
                //Checking if the item is in checked state or not, if not make it in checked state
                if(menuItem.isChecked()) menuItem.setChecked(false);
                else menuItem.setChecked(true);
 
                //Closing drawer on item click
                drawerLayout.closeDrawers();
                 
                //Check to see which item was being clicked and perform appropriate action
                switch (menuItem.getItemId()){
 
                     
                    //Replacing the main content with ContentFragment Which is our Inbox View;
                    case R.id.inbox:
                        Toast.makeText(getApplicationContext(),"Inbox Selected",Toast.LENGTH_SHORT).show();
                        ContentFragment fragment = new ContentFragment();
                        android.support.v4.app.FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                        fragmentTransaction.replace(R.id.frame,fragment);
                        fragmentTransaction.commit();
                        return true;
                    
                    // For rest of the options we just show a toast on click
                     
                    case R.id.starred:
                        Toast.makeText(getApplicationContext(),"Stared Selected",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.sent_mail:
                        Toast.makeText(getApplicationContext(),"Send Selected",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.drafts:
                        Toast.makeText(getApplicationContext(),"Drafts Selected",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.allmail:
                        Toast.makeText(getApplicationContext(),"All Mail Selected",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.trash:
                        Toast.makeText(getApplicationContext(),"Trash Selected",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.spam:
                        Toast.makeText(getApplicationContext(),"Spam Selected",Toast.LENGTH_SHORT).show();
                        return true;
                    default:
                        Toast.makeText(getApplicationContext(),"Somethings Wrong",Toast.LENGTH_SHORT).show();
                        return true;
 
                }
            }
        });
 
        // Initializing Drawer Layout and ActionBarToggle
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.openDrawer, R.string.closeDrawer){
 
            @Override
            public void onDrawerClosed(View drawerView) {
                // Code here will be triggered once the drawer closes as we dont want anything to happen so we leave this blank
                super.onDrawerClosed(drawerView);
            }
 
            @Override
            public void onDrawerOpened(View drawerView) {
                // Code here will be triggered once the drawer open as we dont want anything to happen so we leave this blank
 
                super.onDrawerOpened(drawerView);
            }
        };
 
        //Setting the actionbarToggle to drawer layout
        drawerLayout.setDrawerListener(actionBarDrawerToggle);
         
        //calling sync state is necessay or else your hamburger icon wont show up
        actionBarDrawerToggle.syncState();
 
 
 
 
 
 
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.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);
    }
}

9. So with that we are done,  If you follow the tutorial properly and now if you run the app you would get the desired result as shown below.

GitHub - Download Project
This concludes the tutorial hope you learned something and you like it, If you do like it please share, comment and subscribe for more tutorials.

0 comments :

Subscribe to: Post Comments ( Atom )