Android Material Design Tutorial/Example – Coderz Passion

Add this depency to your build.gradle

compile ‘com.android.support:appcompat-v7:23.1.1’

In this tutorial, we will learn some basics of Material Design  Development

1. Adding the Toolbar (ActionBar) to your application.

2. create a layout for ActionBar and include it in your Activity’s Layout

3. change your styles.xml  to add a custom toolbar and set parent Theme as  Theme.AppCompat.Light.NoActionBar as described below:-

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <!-- Customize your theme here. -->
    </style>

</resources>

4. Now Create a layout for ActionBar

bar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:id="@+id/toolbar"
    />

5. Include this ActionBar layout in MainActivity’s layout.

activity_main.xml

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

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

</RelativeLayout>

6. ActionBar items can be added by adding in menu_main.xml and there click can be handled by onOptionsItemSelected() method of MainActivity.java

7. Finally add ActionBar in MainActivity.java as Follows

MainActivity.java

package com.coderzpassion.recyclesample;

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

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

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

    }

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

2. Customization of Material Design Theme

1. Materials design provides several attributes to change the color of theme.Lets take at look at them.
2. colorPrimaryDark– This is the darkest primary color mainly applies to Notification Bar Background.
3. colorPrimary- This is the Primary color which applies to toolbar(ActionBar) background.
4. textColorPrimary- This is color of text which applies to toolbar title.
5. windowBackground- This is background color of the application.
6. navigationBarColor– This color is background footer of softbuttons.

Let’s Define Colors for Material Theme

1. Open res->values->colors.xml. if u don’nt have colors.xml, create one with colors.xml name.

2. Define Following Colors along with their name as follows.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#537CED</color>
    <color name="colorPrimaryDark">#1410FB</color>
    <color name="textColorPrimary">#000000</color>
    <color name="windowBackground">#5B5F69</color>
    <color name="navigationBarColor">#000000</color>
</resources>

3. Now Create theme in styles.xml from res->values->styles.xml to use these colors.

styles.xml

<resources>

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

    </style>

    <style name="CustomMaterialTheme.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="android:textColorPrimary">@color/textColorPrimary</item>
        <item name="android:windowBackground">@color/windowBackground</item>     
    </style>

</resources>

4. For Creating designs specifically for Android Lollipop create a folder named values-v21 under res->values-v21. Under values-v21 create styles.xml as follows

styles.xml

<resources>

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

5. Now we are done with creating Custom Material Theme. Now set the theme to application in AndroidMainfest as follows.

AndroidManifest.xml

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/CustomMaterialTheme" >
        <activity
            android:name=".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>