Recently in Google IO 2015, Matias Duarte in Material Now session announced the release on Android Design Support Library. Android Design Support Library is basically for adding quick Material Design Views to your android app. And also this views are backward compatible up to Android 2.1. Android Design Support Library is a big relief for developers who wanted to implement Material Design to their apps. So today in this tutorial we will be learning "How to implement Navigation View using Android Design Support Library". Let's start.
Why The Hell Do We Use Navigation View?
Navigation View is used to display the main navigation options of the app to the user. I many apps, Navigation View has a header which shows the logged in user's name, profile image, and some more information about him.What will it look like?
Understanding Navigation View
Let's see what we learn. Imagine Navigation View as a parent view of two more views. These two views are header view and lists of options view as shown in the image above. The header view isn't compulsory to be placed, but you need the list of items in the Navigation View. So first we need to define a Menu XML resource which will define all the list of options to be shown. The second step will be to write XML code in the layout file. These XML code will have DrawerLayout as parent view and your apps views inside them with the last view as Navigation View. Then finally in the Main Activity java file you need to initialise the Navigation view and set an OnNavigationItemSelectedListener to it for performing actions.Steps To Implement Navigation View
Step 1. Open Android Studio and create a new blank project by navigating to File => New Project and then fill other details.Step 2. The first thing to be done is adding the dependencies. So open the build.gradle file and add the following line in dependencies.
compile 'com.android.support:design:22.2.0'
Step 3. Now open colors.xml in res => values directory. If it does not exists then create one with the same name. After opening the file, add colors resources as given below.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">#03A9F4</color>
<color name="primaryDark">#0288D1</color>
<color name="white">#fff</color>
<color name="black">#000</color>
</resources>
Step 4. Now open you styles.xml in res => values directory and add the given styles.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primaryDark</item>
</style>
<style name="CustomToolbar" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">@color/white</item>
<item name="android:textColorSecondary">@color/white</item>
</style>
</resources>
Step 5. So now we have completed up some initial setup. So now let's focus on Navigation View components. First we will create a menu resource file which will contain all the list of options that will be shown in the Navigation View. So create a new menu resource file in the res => menu directory and name it drawer.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/list_item_1"
android:title="@string/list_item_1"
android:icon="@drawable/ic_stars_black_24dp"/>
<item android:id="@+id/list_item_2"
android:title="@string/list_item_2"
android:icon="@drawable/ic_stars_black_24dp"/>
<item android:id="@+id/list_item_3"
android:title="@string/list_item_3"
android:icon="@drawable/ic_stars_black_24dp"/>
<item android:id="@+id/list_item_4"
android:title="@string/list_item_4"
android:icon="@drawable/ic_stars_black_24dp"/>
<item android:id="@+id/list_item_5"
android:title="@string/list_item_5"
android:icon="@drawable/ic_stars_black_24dp"/>
<item android:id="@+id/list_item_6"
android:title="@string/list_item_6"
android:icon="@drawable/ic_stars_black_24dp"/>
</group>
</menu>
Here as you can see, each item is represented using <item> tag. This <item> tag contains three attributes. First is the android:title which is used to set the title of the item. Second is the android:icon which is used to set the icon for the item. And third is the android:id which is used to identify each item uniquely. All this items are inside a <group> tag which is used to group this list of items. As you can see there is attribute used in <group> tag that is the android:cheakableBehavior="single" which will allow the user select only one item at a time.Step 6. Many known apps on the Play Store have a header in there Navigation View which is used for branding or for displaying accounts inside the app. In Android Design Support Library, they have introduced this by default. It is called as header view. Header view is not compulsory, but it can be used to make the Navigation view more interactive and useful. So we will be learning how to add header view to the navigation view. For that, we need to create a new layout resource file inside the res => layout directory and name it navigation_view_header.xml.
<?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="192dp"
android:background="@color/primary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HEADER"
android:textSize="40sp"
android:textColor="@color/white"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Step 7. Now we need to add the Navigation View to your activity_main.xml. This layout will contain DrawerLayout as parent layout with Navigation View as its last child. Before navigation view you need to add you views.
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
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"
tools:context=".MainActivity">
<!--Your Content Go's Here-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_view_header"
app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
In the above code, we have used app:headerLayout attribute to specify the header layout of the navigation view and app:menu attribute to specify the menu items inside the navigation view. The android:layout_gravity attribute is used to specify whether navigation view will slide out from left or right side. The android:layout_gravity="start" means left side and the value android:layout_gravity="end" means right side.Step 8. The final step is implementing the java code where all the magic happens. So open your MainActivty.java file and make its code as I have given below. Read comments carefully as they will help you understand the code.
package com.androidsphere.aditya9172.navigationview;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity {
Toolbar toolbar;
DrawerLayout drawerLayout;
ActionBarDrawerToggle drawerToggle;
NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Initialising toolbar.
toolbar = (Toolbar) findViewById(R.id.toolbar);
//Setting toolbar as Actionbar.
setSupportActionBar(toolbar);
//Initialising NavigationView
navigationView = (NavigationView) findViewById(R.id.navigation_view);
//Setting OnNavigationItemSelectedListener to the Navigation View.
//This is used to perform specific action when an item is clicked.
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
//Navigation View must close when any of this item is clicked.
//To do this we use the closeDrawers() method.
drawerLayout.closeDrawers();
//Using switch case to identify the ID of the menu item
// and then performing relevant action.
switch (menuItem.getItemId()){
case R.id.list_item_1:
//Action Code Here
Toast.makeText(getApplicationContext(),"You Clicked On List Item 1",Toast.LENGTH_SHORT).show();
return true;
case R.id.list_item_2:
Toast.makeText(getApplicationContext(),"You Clicked On List Item 2",Toast.LENGTH_SHORT).show();
return true;
default:
Toast.makeText(getApplicationContext(),"Something went wrong",Toast.LENGTH_SHORT).show();
return true;
}
}
});
//Initialising DrawerLayout.
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
//Initialising ActionBarDrawerToggle and overriding its methods
drawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open_drawer,R.string.close_drawer){
//We can perform a particular action when the
// Navigation View is opened by overriding the
// onDrawerOpened() method.
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
Toast.makeText(getApplicationContext(),"Drawer Opened",Toast.LENGTH_SHORT).show();
}
//We can perform a particular action when the
// Navigation View is closed by overriding the
// onDrawerClosed() method.
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
Toast.makeText(getApplicationContext(),"Drawer Closed",Toast.LENGTH_SHORT).show();
}
};
//Finally setting up the drawer listener for DrawerLayout
drawerLayout.setDrawerListener(drawerToggle);
//Sync State of the navigation icon on the toolbar
// with the drawer when the drawer is opened or closed.
drawerToggle.syncState();
}
}
In the above code, the main part is initialising the NavigationView and adding OnNavigationItemSelectedListener to it. That's it nothing more is needed to implement the working navigation view. The rest of the code is just to add the Drawer Toggle in the toolbar.Step 9. So now go on and run you project. You would definitely love to see the Navigation View working live.
No comments:
Post a Comment