Android 5.0 Lollipop was one of the most significant Android releases ever, due to introduction of material design, a new design language that refreshed the entire Android experience. For backward compatibility Android Design Support Library was introduced. It provides compatibility to number of material design components all the way back to Android 2.1. In Design support Library the components like navigation drawer, floating action button, snackbar, tabs, floating labels and animation frameworks were introduced. In this article we are going to learn about Navigation Drawer & NavigationView. With NavigationView provided in Android Design Support Library, things are much more easier !
Before going further, I suggest you to take a look at design guide lines docs mentioning specs, do’s and don’ts.
Adding Material Design
First of all we’ll start making our app material. If you are not aware of android material design, take a look at previous article Easy Getting Started with Material Design, this will give you a quick, easy and good start.
1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.
2. Open build.gradle and add android design support library com.android.support:design:23.0.1
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
}
3. Open colors.xml located under res ⇒ values and add the below color values.
<resources>
<color name="colorPrimary">#4ec07e</color>
<color name="colorPrimaryDark">#3b925f</color>
<color name="colorAccent">#4a90e2</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationBarColor">#000000</color>
<color name="white">#ffffff</color>
<color name="light_grey">#e1e1e1</color>
</resources>
4. Open styles.xml located under res ⇒ values and add below styles. The styles defined in this styles.xml are common to all the android versions.
<resources>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- customize the color palette -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme" parent="AppTheme.Base">
</style>
</resources>
5. Now under res, create a folder named values-v21. Inside values-v21, create another styles.xml with the below styles. These styles are specific to Android 5.0
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<!-- customize the color palette -->
<item name="android:colorPrimary">@color/colorPrimary</item>
<item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="android:colorAccent">@color/colorAccent</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>
Now run the app and look at status bar color, if it changed, it means material theme is applied successfully.
Adding Navigation Drawer
The navigation drawer can be an important focal point for identity and navigation within your app. 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.
1. Open strings.xml located under res ⇒ values and add the below string values.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">MaterialDesign</string>
<string name="action_settings">Settings</string>
<string name="action_sort">Sort</string>
<string name="action_search">Search</string>
<string name="action_home">Home</string>
<string name="action_profile">Profile</string>
<string name="action_inbox">Inbox</string>
<string name="action_logout">Logout</string>
<string name="lbl_close">Close</string>
<string name="lbl_open">Open</string>
</resources>
2. Create a file navigation_drawer_items.xml under res ⇒ menu and add the below items in it.
<?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/navItemHome"
android:icon="@drawable/ic_nav_home"
android:title="@string/action_home"/>
<item
android:id="@+id/navItemProfile"
android:icon="@drawable/ic_nav_profile"
android:title="@string/action_profile"/>
<item
android:id="@+id/navItemInBox"
android:icon="@drawable/ic_nav_inbox"
android:title="@string/action_inbox"/>
<item
android:id="@+id/navItemSetting"
android:icon="@drawable/ic_nav_settings"
android:title="@string/action_settings"/>
<item
android:id="@+id/navItemLogout"
android:icon="@drawable/ic_nav_logout"
android:title="@string/action_logout"/>
</group>
</menu>
3. Create a header view layout file res/layout/navigation_drawer_header.xml as below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="@dimen/nav_title_margin">
<ImageView
android:layout_width="@dimen/avatar_size"
android:layout_height="@dimen/avatar_size"
android:layout_margin="10dp"
android:src="@drawable/profile_stub" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:gravity="center"
android:text="Nauman Zubair"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Lahore, Pakistan"
android:drawableLeft="@drawable/ic_location"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/light_grey" />
</LinearLayout>
4. Now open activity_home.xml and add navigation view as drawer layout’s content view as below:
<tools: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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawerLayout"
tools:context=".HomeActivity">
<!-- your content layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@drawable/bg_drawer"
app:headerLayout="@layout/navigation_drawer_header"
app:itemIconTint="@color/white"
app:itemTextColor="@color/white"
app:menu="@menu/navigation_drawer_items" />
</tools: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). There are some other attributes like app:itemTextColor, app:itemIconTint, app:itemBackground you can give them a try.
5. Run the app, our Drawer Menu is now summoned ! Woo hooo
In order to get menu icon on toolbar and navigation menu item click listener, implement step 6.
6. Open HomeActivity.java and place below code in it.
public class HomeActivity extends AppCompatActivity {
private Toolbar toolbar;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
toolbar = (Toolbar) findViewById(R.id.toolbar);
navigationView = (NavigationView) findViewById(R.id.navigationView);
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
setSupportActionBar(toolbar);
// Set Drawerlayout switch indicator that the icon leftmost Toolbar
ActionBarDrawerToggle mActionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.lbl_open, R.string.lbl_close);
mActionBarDrawerToggle.syncState();
drawerLayout.setDrawerListener(mActionBarDrawerToggle);
// Set navigation item selected listener
navigationView.setNavigationItemSelectedListener(new OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
String msgString = "";
switch (menuItem.getItemId()) {
case R.id.navItemHome:
msgString = (String) menuItem.getTitle();
break;
case R.id.navItemProfile:
msgString = (String) menuItem.getTitle();
break;
case R.id.navItemInBox:
msgString = (String) menuItem.getTitle();
break;
case R.id.navItemSetting:
msgString = (String) menuItem.getTitle();
break;
case R.id.navItemLogout:
msgString = (String) menuItem.getTitle();
break;
}
// Menu item clicked on, and close Drawerlayout
menuItem.setChecked(true);
drawerLayout.closeDrawers();
Toast.makeText(getApplicationContext(), msgString, Toast.LENGTH_LONG).show();
return true;
}
});
}
}
Now run the app and see what happens.
In this tutorial we learned about NavigationDrawer and NavigationView. In next tutorial we’ll learn about RecyclerView. Meanwhile please don’t forget to share this article, like it, leave any suggestions or criticisms in comments section below. 