Navigation View - Support Design Library

In our previous tutorial about Navigation Drawer we saw how to create a navigation drawer using RecyclerView. Before Support Design Library was introduced we had to create navigation drawer using RecyclerView or ListView. We saw in two part series of the tutorial, how much work needed to create a Navigation drawer. It included the setting up adapter, creating different view types and implementing our own listener for selecting Menus.





NavigationView from Design Support Library comes really handy when we want to add Navigation Drawer to our app. Let's create a Navigation Drawer using NavigationView like the screenshot below.




Let's create an Android project with Blank Activity template and add a Toolbar, We will be using Toolbar instead of Actionbar so in values/styles.xml use theme with NoActionbar. Set toolbar as the actionbar of Mainactivity. So MainActivity.java looks like this.



public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        
        mToolbar = (Toolbar)findViewById(R.id.appBar);
        setSupportActionBar(mToolbar);
    }


}


Since we will be using NavigationView from Design Support Library, let's at that to the dependencies. Open build.gradle file from app module and add following lines.
OR you can just select the project and hit f4 to open the Project Structure dialog and select dependencies tab , click plus icon at the bottom select library dependency and search recyclerview and select the following library from the list to include it.


    compile 'com.android.support:design:22.2.1'





Best thing about NavigationView is that we don't have to create layouts for each menu item as it uses our existing menu system. if you already have created new android project, let's add a menu called menu_nav_drawer.xml.


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_inbox"
        android:orderInCategory="100"
        android:title="@string/inbox"
        android:icon="@drawable/inbox"
        app:showAsAction="never" />
    <item
        android:id="@+id/menu_send"
        android:orderInCategory="200"
        android:title="@string/send"
        android:icon="@drawable/send"
        app:showAsAction="never" />

</menu>



We just created two menu items, Inbox and Send, If you need icons for them, please download from here.

Next, we create layout for Main activity, in change activity_main.xml as below.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:background="#00bbff"/>



    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appBar">
        <!--Content-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">


            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/app_name" />

        </LinearLayout>

        <!-- Navigation Drawer-->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:menu="@menu/menu_nav_drawer"
            android:layout_gravity="left"/>

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

</RelativeLayout>

Here, we are using a LinearLayout for our content with a TextView in it. And for Navigation drawer we are using NavigationView.

In navigation we can set up the menu using menu attribute.  We assigned the menu that we created in XML.


            app:menu="@menu/menu_nav_drawer"


Now if you run the project you will see navigation drawer is all set with menu titles and icons





Now Let's add the ActionbarDrawerToggle to add nice icons.


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


        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);

        mDrawerLayout.setDrawerListener(drawerToggle);
        drawerToggle.syncState();



Now finally let's add Listener to the menu items.


             mNavigationView.setNavigationItemSelectedListener(
                        new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                if (menuItem.getItemId() == R.id.menu_inbox) {
                    Toast.makeText(MainActivity.this, 
                                  "Selected Inbox", 
                                  Toast.LENGTH_SHORT).show();
                    mDrawerLayout.closeDrawer(mNavigationView);
                }
                return false;
            }
        });



Finally add a header view. For that just create a layout and use addHeaderView method on NavigationView.



       View view = getLayoutInflater().inflate(R.layout.layout_drawer_header, 
                   mNavigationView, false);

        mNavigationView.addHeaderView(view);






We saw how Support Design Library made it very easy to create a navigation drawer.


0 comments:

Post a Comment

More

Download