You might have heard of android Material Design which was introduced in Android Lollipop version. In Material Design lot of new things were introduced like Material Theme, new widgets, custom shadows, vector drawables and custom animations. If you haven’t working on Material Design yet, this article will give you a good start.

In this tutorial we are going to learn the basic steps of Material Design development i.e writing the custom theme and implementing the navigation drawer using the RecyclerView.

Go through the below links to get more knowledge over Material Design.

> Material Design Specifications

> Creating Apps with Material Design

android getting started with material design

1. Downloading Android Studio

Before going further, download the Android Studio and do the necessary setup as I am going to use Android Studio for all my tutorial from now on. If you are trying the Android Studio for the first time, go the overview doc to get complete overview of android studio.

2. Material Design Color Customization

Material Design provides set of properties to customize the Material Design Color theme. But we use five primary attributes to customize overall theme.

colorPrimaryDark – This is darkest primary color of the app mainly applies to notification bar background.

colorPrimary – This is the primary color of the app. This color will be applied as toolbar background.

textColorPrimary – This is the primary color of text. This applies to toolbar title.

windowBackground – This is the default background color of the app.

navigationBarColor – This color defines the background color of footer navigation bar.

android-material-design-color-schema

You can go through this material design color patterns and choose the one that suits your app.

3. Creating Material Design Theme

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 res ⇒ values ⇒ strings.xml and add below string values.

<resources>
    <string name="app_name">Material Design</string>
    <string name="action_settings">Settings</string>
    <string name="action_search">Search</string>
    <string name="drawer_open">Open</string>
    <string name="drawer_close">Close</string>

    <string name="nav_item_home">Home</string>
    <string name="nav_item_friends">Friends</string>
    <string name="nav_item_notifications">Messages</string>

    <!-- navigation drawer item labels  -->
    <string-array name="nav_drawer_labels">
        <item>@string/nav_item_home</item>
        <item>@string/nav_item_friends</item>
        <item>@string/nav_item_notifications</item>
    </string-array>

    <string name="title_messages">Messages</string>
    <string name="title_friends">Friends</string>
    <string name="title_home">Home</string>
</resources>

3. Open res ⇒ values ⇒ colors.xml and add the below color values. If you don’t find colors.xml, create a new resource file with the name.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#F50057</color>
    <color name="colorPrimaryDark">#C51162</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="windowBackground">#FFFFFF</color>
    <color name="navigationBarColor">#000000</color>
    <color name="colorAccent">#FF80AB</color>
</resources>

4. Open res ⇒ values ⇒ dimens.xml and add below dimensions.

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="nav_drawer_width">260dp</dimen>
</resources>

5. Open styles.xml under res ⇒ values and add below styles. The styles defined in this styles.xml are common to all the android versions. Here I am naming my theme as MyMaterialTheme.

<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    
</resources>

6. 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 Lollipop only.

<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
        <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>

7. Now we have the basic Material Design styles ready. In order to apply the theme, open AndroidManifest.xml and modify the android:theme attribute of <application> tag.

android:theme="@style/MyMaterialTheme"

So after applying the theme, your AndroidManifest.xml should look like below.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.materialdesign" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
        <activity
            android:name=".activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Now if you run the app, you can see the notification bar color changed to the color that we have mentioned in our styles.

android-material-design-notification-bar

3.1 Adding the Toolbar (Action Bar)

Adding the toolbar is very easy. All you have to do is, create a separate layout for the toolbar and include it in other layout wherever you want the toolbar to be displayed.

8. Create an xml file named toolbar.xml under res ⇒ layout and add android.support.v7.widget.Toolbar element. This create the toolbar with specific height and theming.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

9. Open the layout file of your main activity (activity_main.xml) and add the toolbar using <include/> tag.

<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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />
    </LinearLayout>


</RelativeLayout>

Run the app and see if the toolbar displayed on the screen or not.

android-material-design-toolbar

Now let’s try to add a toolbar title and enable the action items.

10. Download this search icon and import it into Android Studio as a Image Asset.

11. To import the Image Asset in Android Studio, right click on res ⇒ New ⇒ Image Asset. It will show you a popup window to import the resource. Browse the search icon that you have downloaded in the above step, select Action Bar and Tab Icons for Asset Type and give the resource name as ic_search_action and proceed.

android-studio-importing-image-asset

12. Once the icon is imported, open menu_main.xml located under res ⇒ menu and add the search menu item as mentioned below.

13. Now open your MainActivity.java and do the below changes.

> Extend the activity from AppCompatActivity

> Enable the toolbar by calling setSupportActionBar() by passing the toolbar object.

> Override onCreateOptionsMenu() and onOptionsItemSelected() methods to enable toolbar action items.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

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.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }


    @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);
    }
}

After doing the above changes, if you run the app, you should see the search icon and action overflow icon.

android-material-design-toolbar-action-items

3.2 Adding Navigation Drawer

Adding navigation drawer is same as that we do before lollipop, but instead if using ListView for menu items, we use RecyclerView in material design. So let’s see how to implement the navigation drawer with RecyclerView.

14. In your project’s java folder, create three packages named activity, adapter, model and move your MainActivity.java to activity package. This will keep your project organized.

15. Open build.gradle located under your app module and add below dependencies. After adding the dependencies, goto Build ⇒ Rebuild Project to download required libraries.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.+'
}

16. Under model package, create a class named NavDrawerItem.java with the below code. This model class is POJO class that defines each row in navigation drawer menu.

17. Under res ⇒ layout, create an xml layout named nav_drawer_row.xml and add the below code. The layout renders each row in navigation drawer menu. If you want to customize the navigation drawer menu item, you have to do the changes in this file. For now it has only one TextView.

18. Download this profile icon and paste it in your drawable folder. This step is optional, but this icon used in the navigation drawer header part.

19. Create another xml layout named fragment_navigation_drawer.xml and add the below code. This layout renders the complete navigation drawer view. This layout contains a header section to display the user information and a RecyclerView to display the list view.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">


    <RelativeLayout
        android:id="@+id/nav_header_container"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary">

        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/ic_profile"
            android:scaleType="fitCenter"
            android:layout_centerInParent="true" />

    </RelativeLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/drawerList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/nav_header_container"
        android:layout_marginTop="15dp" />


</RelativeLayout>

20. As the RecyclerView is customized, we need an adapter class to render the custom xml layout. So under adapter package, create a class named NavigationDrawerAdapter.java and paste the below code. This adapter class inflates nav_drawer_row.xml and renders the RecycleView drawer menu.

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.Collections;
import java.util.List;

/**
 * Created by Ravi Tamada on 12-03-2015.
 */
public class NavigationDrawerAdapter extends RecyclerView.Adapter<NavigationDrawerAdapter.MyViewHolder> {
    List<NavDrawerItem> data = Collections.emptyList();
    private LayoutInflater inflater;
    private Context context;

    public NavigationDrawerAdapter(Context context, List<NavDrawerItem> data) {
        this.context = context;
        inflater = LayoutInflater.from(context);
        this.data = data;
    }

    public void delete(int position) {
        data.remove(position);
        notifyItemRemoved(position);
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.nav_drawer_row, parent, false);
        MyViewHolder holder = new MyViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        NavDrawerItem current = data.get(position);
        holder.title.setText(current.getTitle());
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        TextView title;

        public MyViewHolder(View itemView) {
            super(itemView);
            title = (TextView) itemView.findViewById(R.id.title);
        }
    }
}

21. Under activity package, create a fragment named FragmentDrawer.java. In Android Studio, to create a new fragment, Right click on activity ⇒ New ⇒ Fragment ⇒ Fragment (Blank) and give your fragment class name.


/**
 * Created by Ravi on 29/07/15.
 */

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

import info.androidhive.materialdesign.R;
import info.androidhive.materialdesign.adapter.NavigationDrawerAdapter;
import info.androidhive.materialdesign.model.NavDrawerItem;

public class FragmentDrawer extends Fragment {

    private static String TAG = FragmentDrawer.class.getSimpleName();

    private RecyclerView recyclerView;
    private ActionBarDrawerToggle mDrawerToggle;
    private DrawerLayout mDrawerLayout;
    private NavigationDrawerAdapter adapter;
    private View containerView;
    private static String[] titles = null;
    private FragmentDrawerListener drawerListener;

    public FragmentDrawer() {

    }

    public void setDrawerListener(FragmentDrawerListener listener) {
        this.drawerListener = listener;
    }

    public static List<NavDrawerItem> getData() {
        List<NavDrawerItem> data = new ArrayList<>();


        // preparing navigation drawer items
        for (int i = 0; i < titles.length; i++) {
            NavDrawerItem navItem = new NavDrawerItem();
            navItem.setTitle(titles[i]);
            data.add(navItem);
        }
        return data;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // drawer labels
        titles = getActivity().getResources().getStringArray(R.array.nav_drawer_labels);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflating view layout
        View layout = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
        recyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);

        adapter = new NavigationDrawerAdapter(getActivity(), getData());
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        recyclerView.addOnItemTouchListener(new RecyclerTouchListener(getActivity(), recyclerView, new ClickListener() {
            @Override
            public void onClick(View view, int position) {
                drawerListener.onDrawerItemSelected(view, position);
                mDrawerLayout.closeDrawer(containerView);
            }

            @Override
            public void onLongClick(View view, int position) {

            }
        }));

        return layout;
    }


    public void setUp(int fragmentId, DrawerLayout drawerLayout, final Toolbar toolbar) {
        containerView = getActivity().findViewById(fragmentId);
        mDrawerLayout = drawerLayout;
        mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActivity().invalidateOptionsMenu();
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                getActivity().invalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                toolbar.setAlpha(1 - slideOffset / 2);
            }
        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);
        mDrawerLayout.post(new Runnable() {
            @Override
            public void run() {
                mDrawerToggle.syncState();
            }
        });

    }

    public static interface ClickListener {
        public void onClick(View view, int position);

        public void onLongClick(View view, int position);
    }

    static class RecyclerTouchListener implements RecyclerView.OnItemTouchListener {

        private GestureDetector gestureDetector;
        private ClickListener clickListener;

        public RecyclerTouchListener(Context context, final RecyclerView recyclerView, final ClickListener clickListener) {
            this.clickListener = clickListener;
            gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
                @Override
                public boolean onSingleTapUp(MotionEvent e) {
                    return true;
                }

                @Override
                public void onLongPress(MotionEvent e) {
                    View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
                    if (child != null && clickListener != null) {
                        clickListener.onLongClick(child, recyclerView.getChildPosition(child));
                    }
                }
            });
        }

        @Override
        public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {

            View child = rv.findChildViewUnder(e.getX(), e.getY());
            if (child != null && clickListener != null && gestureDetector.onTouchEvent(e)) {
                clickListener.onClick(child, rv.getChildPosition(child));
            }
            return false;
        }

        @Override
        public void onTouchEvent(RecyclerView rv, MotionEvent e) {
        }

        @Override
        public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

        }


    }

    public interface FragmentDrawerListener {
        public void onDrawerItemSelected(View view, int position);
    }
}

22. Finally open main activity layout (activity_main.xml) and modify the layout as below. In this layout we are adding android.support.v4.widget.DrawerLayout to display the navigation drawer menu.

Also you have to give the correct path of your FragmentDrawer in <fragment> element.

<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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/container_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar" />
        </LinearLayout>

        <FrameLayout
            android:id="@+id/container_body"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />


    </LinearLayout>


    <fragment
        android:id="@+id/fragment_navigation_drawer"
        android:name="info.androidhive.materialdesign.activity.FragmentDrawer"
        android:layout_width="@dimen/nav_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        tools:layout="@layout/fragment_navigation_drawer" />

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

Now we have all the layout files and java classes ready in place. Let’s do the necessary changes in MainActivity to make the navigation drawer functioning.

23. Open your MainActivity.java and do the below changes.

> Implement the activity from FragmentDrawer.FragmentDrawerListener and add the onDrawerItemSelected() override method.

> Create an instance of FragmentDrawer and set the drawer selected listeners.


import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawerListener {

    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        drawerFragment = (FragmentDrawer)
                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);
    }


    @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);
    }

    @Override
    public void onDrawerItemSelected(View view, int position) {

    }
}

Now if you run the app, you can see the navigation drawer with a header and few list items in it.

androd-material-design-navigation-drawer

3.3 Implementing Navigation Drawer Item Selection

Although navigation drawer is functioning, you can see the selection of drawer list items not working. This is because we are yet to implement the click listener on RecyclerView items.

As we have three menu items in navigation drawer (Home, Friends & Messages), we need to create three separate fragment classes for each menu item.

24. Under res layout, create an xml layout named fragment_home.xml and add below code.

<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"
    android:orientation="vertical"
    tools:context="info.androidhive.materialdesign.activity.HomeFragment">


    <TextView
        android:id="@+id/label"
        android:layout_alignParentTop="true"
        android:layout_marginTop="100dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textSize="45dp"
        android:text="HOME"
        android:textStyle="bold"/>

    <TextView
        android:layout_below="@id/label"
        android:layout_centerInParent="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12dp"
        android:layout_marginTop="10dp"
        android:gravity="center_horizontal"
        android:text="Edit fragment_home.xml to change the appearance" />

</RelativeLayout>

25. Under activity package, create a fragment class named HomeFragment.java and add below code.

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class HomeFragment extends Fragment {

    public HomeFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_home, container, false);


        // Inflate the layout for this fragment
        return rootView;
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
    }

    @Override
    public void onDetach() {
        super.onDetach();
    }
}

26. Create two more fragment classes named FriendsFragment.java, MessagesFragment.java and respected layout files named fragment_friends.xml and fragment_messages.xml and add the code from above two steps.

27. Now open MainActivity.java and do the below changes. In the below code

> displayView() method displays the fragment view respected the navigation menu item selection. This method should be called in onDrawerItemSelected() to render the respected view when a navigation menu item is selected.

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity implements FragmentDrawer.FragmentDrawerListener {

    private static String TAG = MainActivity.class.getSimpleName();

    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        drawerFragment = (FragmentDrawer)
                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);

        // display the first navigation drawer view on app launch
        displayView(0);
    }


    @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;
        }

        if(id == R.id.action_search){
            Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onDrawerItemSelected(View view, int position) {
            displayView(position);
    }

    private void displayView(int position) {
        Fragment fragment = null;
        String title = getString(R.string.app_name);
        switch (position) {
            case 0:
                fragment = new HomeFragment();
                title = getString(R.string.title_home);
                break;
            case 1:
                fragment = new FriendsFragment();
                title = getString(R.string.title_friends);
                break;
            case 2:
                fragment = new MessagesFragment();
                title = getString(R.string.title_messages);
                break;
            default:
                break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.container_body, fragment);
            fragmentTransaction.commit();

            // set the toolbar title
            getSupportActionBar().setTitle(title);
        }
    }
}

Now if you run the app, you can see the selection of navigation drawer menu is working and respected view displayed below the toolbar.

android-material-design-navigation-drawer-1
android-material-design-navigation-drawer-2
android-material-design-navigation-drawer-3

What’s Next?

Below are few more material components you can add to your app. These were implemented using recent Android Design Support Library.

1. Sliding Menu using Navigation Drawer

The Navigation Drawer is added using Navigation View and Drawer Layout.

2. Material Design Tab Layout

If you want to add tabs to your app, Android Material Design Tabs covers different aspects of Tab Layout.

3. Floating Labels for EditText

Learn how floating labels works on EditText with a simple form validation example.

4. Floating Action Button (FAB)

Add the Floating Action Button to your which displays in circular shape floating on the top of the UI.

5. Snackbar

Add the Snackbar to your app to give immediate feedback about any operation that user performed.

Change Log

Updated On 29th July 2015 (Latest support library)
19th Sep 2016 (Bug fixes and content update)
Subscribe
Notify of
guest
556 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
sunil sarode
sunil sarode
5 years ago

Thanks lot , your tutorials i love it ……..:)

Basil Alias
Basil Alias
5 years ago

Thanks..

Josh Holiday
Josh Holiday
5 years ago

Thank you a lot! Been waiting for that tutorial for a long time!

Oyewole Samuel Success
Oyewole Samuel Success
5 years ago

I’ve been waiting for this tuts, Please how can i add shadow to that toolbar? Thanks

Ravi Tamada
5 years ago

Use android:elevation=”2dp” to toolbar.

Terry
Terry
5 years ago
Reply to  Ravi Tamada

on the android connecting to mysql what can l do to make it work on my phone? thanks in advance

Adel Jaffan
Adel Jaffan
5 years ago

amazing 🙂

Rakhi Dhavale
5 years ago

Nice !! I would like to see a post on Material Design Animations from Android Hive !!

Ravi Tamada
5 years ago
Reply to  Rakhi Dhavale

Yeah, I’ll post.

Devrath Dev
Devrath Dev
5 years ago

Thanks Ravi …. I also did drop this Exact Tutorial request in your Facebook msgs … Very nice tutorial man … Cheers !

Ravi Tamada
5 years ago
Reply to  Devrath Dev

You are welcome 🙂

Siranjeevi
Siranjeevi
5 years ago

Thanks Ravi… Kindly Share lot of concepts with Android 5.0 API’s. Also Share How to work android studio as effective.

Niranga Sandaruwan
Niranga Sandaruwan
5 years ago

great post Ravi…i am developing android apps using eclipse as IDE.How do i support my material design app which is developed in eclipse for pre lollipop device.in eclipse there is no gradle.where should i put
compile ‘com.android.support:appcompat-v7:22.0.0’

compile ‘com.android.support:recyclerview-v7:21.0.+’

these two dependency in eclipse.

Ravi Tamada
5 years ago

You can find this library in /extras/android/support/v7/ of your android sdk folder. Just import it into your Eclipse workspace, but I strongly suggest you move to Android Studio ASAP.

http://stackoverflow.com/questions/24449344/using-android-support-v7-widget-cardview-in-my-project-eclipse

Dawkin's Kamara
Dawkin's Kamara
5 years ago

Thanks Ravi!

Alaa Hossam
Alaa Hossam
5 years ago

Awesome,Thank you Ravi!

Ahmed
Ahmed
5 years ago

How i set icon for item drawer ?

Ravi Tamada
5 years ago
Reply to  Ahmed

You have to add the icon in nav_drawer_row.xml. Check the 17th point.

Also refer below link

http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

Trey Rosius
Trey Rosius
5 years ago

U make android programming look too easy…thanks for keeping it simple.You are a true GURU..thank you

Ravi Tamada
5 years ago
Reply to  Trey Rosius

Thanks Trey 🙂

Anoop
Anoop
5 years ago

@Ravi Tamada You can inflate the actionbar menu using mToolbar.inflateMenu(menuResId). This is the more recommended way to do it.

kristich
kristich
5 years ago

the problem is you need to understand fragment to use this tut…… and using fragment with REST api or REST services is some anoying problem……

Ravi Tamada
5 years ago
Reply to  kristich

Can you explain me whats the problem we get when using Fragment?

Utpal Ruparel
Utpal Ruparel
5 years ago

I am using your tutorial since first day I started Android. Can you please tell me Will API 10-11 support Material Design?

Ravi Tamada
5 years ago
Reply to  Utpal Ruparel

No they won’t support. The things like animations, ripple effects and few other things won’t work. But you will get the uniform look across all the android versions.

Francisco
Francisco
5 years ago

thank you so much… it really help me….. Gracias.

John
John
5 years ago

How can you implement back button action to this drawer (history when changing between fragments) ?

Arjun Bansil
Arjun Bansil
5 years ago
Reply to  John

Add each fragment to the backstack trace. It’s not elegant but it works.

John
John
5 years ago
Reply to  Arjun Bansil

Can you give me an example ?

angra89
angra89
5 years ago

Great tutorial!! keep doing it.

manvi
manvi
5 years ago

hello ….. its so awesome tutorial .. just need to know that can i use this whole code with eclipse …???

alekdi
alekdi
5 years ago
Reply to  manvi

Just follow the tutorial as is, instead to use Gradle, you have to manually import the jar of app compact in your lib folder, and add it as a library in your project structure.

manvi
manvi
5 years ago
Reply to  alekdi

thank you so much dear for ur rply …… can u just tell me which jar files i have to import nd how i have to work for it …… thank u so much in advance ..

Alekdi
Alekdi
5 years ago
Reply to  manvi

Sorry for the reply. In eclipse you have to do this steps:

– manually copy/paste compatibility-v7-appcompat-22.0.0-sources.jar (google it to find the jar)

– Right click on the jar you want to add.
– Build Path > Add to Build Path

Done.
Here the official documentation: https://developer.android.com/tools/support-library/setup.html

ali hussnain
ali hussnain
5 years ago

you are awesome man,you made my life much easier so far, in android development 🙂

vikrant
vikrant
5 years ago

does this work on 4.4.2

Alekdi
Alekdi
5 years ago
Reply to  vikrant

Yes it does.

Shifar Shifz
5 years ago

So finally you migrated to Android Studio. 🙂

Ravi Tamada
5 years ago
Reply to  Shifar Shifz

Yup 🙂

Gurupad Mamadapur
5 years ago
Reply to  Ravi Tamada

:disqus How to create a new activity which has the same ActionBar created in MainActivity?.

Pramoda
Pramoda
5 years ago

usefull and good work brother thanks…

Abhimanyu R Shrivastava
Abhimanyu R Shrivastava
5 years ago

Great tutorial………I have a question,
How I can update the selection of drawer items to notify which row is currently selected?

Urnish Makwana
Urnish Makwana
5 years ago

First of all thanks for nice and easy tutorial..
My question is, Suppose when i click on “Home fragment”, a new page will be open as in this application “fragment_home”, suppose their is button in “fragment_home” and i want to navigate it to other page, then how can i implement it.?.. the toolbar must be present in that page also means in fragment / activity.

vikrant
vikrant
5 years ago

how to replace navigation drawer with back button? in new activity clicked from fragment_home

Alekdi
Alekdi
5 years ago
Reply to  vikrant

You have to specify the new activity in the Manifest, with parent your main activity.

Bima Aditama
Bima Aditama
5 years ago

Material design support Eclipse???

Ravi Tamada
5 years ago
Reply to  Bima Aditama

Yes, it supports.

Bima Aditama
Bima Aditama
5 years ago
Reply to  Ravi Tamada

Can you make a tutorial…

Lubulwa Ric
Lubulwa Ric
5 years ago
Reply to  Bima Aditama

You can use this same tutorial in eclipse, am using app compact and it is working fine

WaWaToR
WaWaToR
5 years ago

Thank you for this great tutorial. Just one little question how and where can i add divider in the navigation drawer?

Gheorghita Paul
Gheorghita Paul
5 years ago

Thanks for the tutorial but i seem to have a problem. I am new to Android and when i try to run the app i get 3 errors “cannot resolv symbol” in MainActivity.java

private void displayView(int position) {

Fragment fragment = null;

String title = getString(R.string.app_name);

switch (position) {

case 0:

fragment = new HomeFragment(); //Error here with cannot resolve symbol

title = getString(R.string.title_home);

break;

case 1:

fragment = new FriendsFragment(); //Error here with cannot resolve symbol

title = getString(R.string.title_friends);

break;

case 2:

fragment = new MessagesFragment(); //Error here with cannot resolve symbol

title = getString(R.string.title_messages);

break;

default:

break;

}

Any help with that? 😀

Renitto Jose
Renitto Jose
5 years ago

Great Work Ravi . We are Going to Switch to Android Studio and Material from next Project onwards and Hope Your Tutorials will help alot 🙂 . Keep Up the good work (y)

Kim Dotnet
Kim Dotnet
5 years ago

Great tutorial like always. I have a question do you think RetroFIt is better than “Volley” Library?

Yadnyesh
Yadnyesh
5 years ago

Great tutorial..Can you post tutorial on swipable tabs with material designs? Thanks in advance!!

Renan
5 years ago

How to make the sidebar appear under the system toolbar (not the navbar at the bottom)?

Viraj
Viraj
5 years ago

is this specific to lollipop ? because notification bar color is not changing in below lollipop.

James Seddon
James Seddon
5 years ago
Reply to  Viraj

You can’t change the status bar colour in pre-lollipop, although you can add a graduated colour.

Arjun
Arjun
5 years ago

How do i add third party libraries to my porject through Android Studio ?

alekdi
alekdi
5 years ago
Reply to  Arjun

In your build.gradle file in the app folder, add in the dependencies the library you want to add using “compile ‘your_library'” and sync project.

Another method is to add the jar in the libs folder of your project, right click on it and choose “add as library”, rebuild project and done.

Arjun
Arjun
5 years ago
Reply to  alekdi

Didn’t get you mate , Please be clear. Thank you

alekdi
alekdi
5 years ago
Reply to  Arjun

Sorry for the late.

Follow this steps in order:

1- copy your .jar file in the libs folder of the project, if there isn’t the folder create it.

2- right click on it, click on “Add as Library”

3- Sync your gradle project

If all steps are done good, you should see something like this in the dependencies of your build.gradle file in app folder:

dependencies {

compile fileTree(dir: ‘libs’, include: [‘*.jar’])

compile files(‘libs/YOUR_JAR.jar’)

}

/************/

Another method (the simpler) is to add this line in the build.gradle of /app/ folder in your project:

dependencies {

compile ‘com.YOUR_LIBRARY’

}

Example: if you want to add the app-compat v7, you should add:

compile ‘com.android.support:appcompat-v7:22.0.0’ in your build.gradle

After that, Sync the project and all is done.

Hope that helps

Alekdi

Arjun
Arjun
5 years ago
Reply to  alekdi

Thanks a ton, Alekdi

alekdi
alekdi
5 years ago
Reply to  Arjun

Read the official documentation, is really simple: https://developer.android.com/tools/support-library/setup.html

Jack Teh
Jack Teh
5 years ago

can u come out a guide with adding lollipop ripple effect on selection~

@rpit Patel
@rpit Patel
4 years ago
Reply to  Jack Teh

this is temporary solution to add this into your gradle file

compile ‘com.github.traex.rippleeffect:library:1.3’

And put like this

Maik Braga
Maik Braga
5 years ago

Muito bom seu artigo. Parabéns!

Rygel
Rygel
5 years ago

You are my hero Ravi! i was watting for this tutorial for so long, you just saved my week bro. Thank you man!
And finally you have switched to Android Studio 😉

Christian Moscosa
Christian Moscosa
5 years ago

Great tutorial! May I ask if how many fragment that I can add on the drawer? thanks! Appreciate it,

Christian Moscosa
Christian Moscosa
5 years ago

Already got it, I forgot to put nav_drawer_labels under strings.xml. Thanks bro!

Anggrayudi H
Anggrayudi H
5 years ago

Hi Ravi, what about activatedBackgroundIndicator attribute for that Navigation Drawer? Can you add one step for this?

Kurt Marko
Kurt Marko
5 years ago

Does it work on android older then lolipop. Thanks

Salar Rastari
Salar Rastari
5 years ago
Reply to  Kurt Marko

no i don’t think so.
i tested on android 4+ and it doesn’t work.

Munim
Munim
5 years ago
Reply to  Kurt Marko

Its working for me on Android 4.2.2 API Level 19

Siya
Siya
5 years ago
Reply to  Munim

Hey did you write separate code for lower versions?

Munim
Munim
5 years ago
Reply to  Siya

Nope. Current code works as it is.

Joginder Sharma
5 years ago

When I run the Application before Adding the Toolbar (Action Bar) I get this error :-

Caused by: java.lang.IllegalArgumentException: AppCompat does not support the current theme features

at android.support.v7.app.AppCompatDelegateImplV7.ensureSubDecor(AppCompatDelegateImplV7.java:360)

at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:246)

at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:106)

at ……………….. .MainActivity.onCreate(MainActivity.java:14)

It works fine after changing parent=”Theme.AppCompat.Light.DarkActionBar”
to
parent=”Theme.AppCompat.NoActionBar”

jatin
jatin
5 years ago

Add true in styles.xml

Joginder Sharma
5 years ago
Reply to  jatin

This line is already there.
It works fine after changing parent=”Theme.AppCompat.Light.DarkActionBar”
to
parent=”Theme.AppCompat.NoActionBar”

Mergim Krasniqi
Mergim Krasniqi
5 years ago

Joginder Sharma – Insert in styles.xml

true

Suleiman19
5 years ago

What works for me is: “Theme.Appcompat.Light.NoActionBar”
Also for your Toolbar, change the change app:theme to android:theme
Should work fine

Gurupad Mamadapur
5 years ago
Reply to  Suleiman19

@suleiman19:disqus can you create new activities and have the same actionbar displayed?

Suleiman19
5 years ago

The ‘Toolbar’ works like any other view, so you must include it in all activities where you which to have an ActionBar. Simply include the same Toolbar in those activities.
Remember ‘setSupportActionBar(mToolbar);’ is the key to make your Toolbar behave as an ActionBar 🙂

Salar Rastari
Salar Rastari
5 years ago

Hi Ravi, thank you so much
would you please give me more details how to add Icons for nav items?
i couldn’t get help from this tutorial http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/
and would you please learn us how to add swipe tabs in one of the nav items? also this tutorial http://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/ doesn’t help me

Sina Riani
Sina Riani
5 years ago

Hi Ravi, thanks for your great tutorials
I have a problem in putting icons for navigation Drawer elements , how can i do that?
Next…please put a tutorial about how to create swipe tab in a navigation Drawer menu?
thanks a lot

kiran
kiran
5 years ago

Hello Ravi, ur tutorial works fine for me one small favour for me is how to have back navigaion in the action bar in this tutorial such as i have another activity and when back navigation in action bar is pressed it should go back to home

Dmitriy Dzyuba
Dmitriy Dzyuba
5 years ago

Thanks Ravi! But I have a trouble… I want ….
startActivity(new Intent(MainActivity.this, Save.class));


public class Save extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_save);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}

But I have crash when I want show ActionBar with back navigation. getSupportActionBar().setDisplayHomeAsUpEnabled(true); – null pointer
I searched but did not find the possibility to solve my problem.

Thanks for help!

alekdi
alekdi
5 years ago
Reply to  Dmitriy Dzyuba

Did you add the activity in your Manifest with parent the Main activity? in the OnCreate method you forgot to add
getSupportActionBar().setHomeButtonEnabled(true );

Dmitriy Dzyuba
Dmitriy Dzyuba
5 years ago
Reply to  alekdi

Solved the problem, need to add in onCreate. Thanks

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);

MD Danish Ansari
MD Danish Ansari
5 years ago

how do i make the navigation drawer below the toolbar so that i see the toolbar even when the drawer is pulled ?????

Arjun
Arjun
5 years ago

Can anyone please tell me What are the free libraries that any android developers can use ? and what is an adapter and handlers in android and what are they use for, I was asked this questions in an interview but couldn’t answer this as i am new to android. Please help.Thank you

alekdi
alekdi
5 years ago
Reply to  Arjun

I advise you to start your own simple project, ask Google your doubts, because this is the best way to learn. Anyway read the official documentation: http://developer.android.com/index.html There is all you need to start in Android.

About the opensource library visit this https://android-arsenal.com or https://android-libs.com

Arjun
Arjun
5 years ago
Reply to  alekdi

Thanks Alekdi

Daniel Contreras
Daniel Contreras
5 years ago

great tutorial, but, How can i add functionality to the layout? , I tried but does nothing, in the layoult of home I put buttons that when pressed show text, but simply does nothing. Help me please

Salar Rastari
Salar Rastari
5 years ago

Hi Ravi, please help us how to add icons?
if u can’t answer please say.
thank you.

556
0
Would love your thoughts, please comment.x
()
x