Tuesday, June 9, 2015

Navigation View by official Design Support Library


Android 5.0 Lollipop was one of the most significant Android releases ever, in no small part due to the introduction of material design, a new design language that refreshed the entire Android experience.
And detailed spec is a great place to start to adopt material design, but we understand that it can be a challenge for developers, particularly ones concerned with backward compatibility. With a little help from the new Android Design Support Library, we’re bringing a number of important material design components to all developers and to all Android 2.1 or higher devices.

Navigation View

The navigation drawer can be an important focal point for identity and navigation within your app and consistency in the design here can make a considerable difference in how easy your app is to navigate, particularly for first time users.



NavigationView makes this easier by providing the framework you need for the navigation drawer as well as the ability to inflate your navigation items through a menu resource.

To start off please include these libraries in the dependencies section of your build.gradle file:
     compile 'com.android.support:appcompat-v7:22.2.0'
     compile 'com.android.support:design:22.2.0'

     (An Example of Tabs in Material Design Previous Blog)

You use NavigationView as DrawerLayout’s drawer content view with a layout such as:

<android.support.v4.widget.DrawerLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">
             <!-- your content layout -->
             
             <android.support.design.widget.NavigationView
               android:layout_width="wrap_content"
               android:layout_height="match_parent"
               android:layout_gravity="start"
               app:headerLayout="@layout/drawer_header"
               app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>


You’ll note two attributes for NavigationView: app:headerLayout controls the (optional) layout used for the header.app:menu is the menu resource inflated for the navigation items (which can also be updated at runtime). NavigationViewtakes care of the scrim protection of the status bar for you, ensuring that your NavigationView interacts with the status bar appropriately on API21+ devices.

The simplest drawer menus will be a collection of checkable menu items:


<group android:checkableBehavior="single">

   <item android:id="@+id/navigation_item_1" 
     android:checked="true"
     android:icon="@drawable/ic_android"
     android:title="@string/navigation_item_1"/>
   <item android:id="@+id/navigation_item_2"
     android:icon="@drawable/ic_android"
     android:title="@string/navigation_item_2"/>
</group>

The checked item will appear highlighted in the navigation drawer, ensuring the user knows which navigation item is currently selected.

You can also use subheaders in your menu to separate groups of items:

<item android:id="@+id/navigation_subheader"
  android:title="@string/navigation_subheader">
  
        <menu>
            <item android:id="@+id/navigation_sub_item_1"
              android:icon="@drawable/ic_android"
              android:title="@string/navigation_sub_item_1"/>
           
          <item android:id="@+id/navigation_sub_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_2"/>
     </menu>
</item>


You’ll get callbacks on selected items by setting a OnNavigationItemSelectedListener using setNavigationItemSelectedListener().
This provides you with the MenuItem that was clicked, allowing you to handle selection events, changed the checked status, load new content, programmatically close the drawer, or any other actions you may want.

No comments:

Post a Comment