Following steps will help you applying the material design theme to your app.

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. This step is necessary if you are adding any android design support library components to your app.

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.

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

4. Open styles.xml located under res ⇒ values and add below styles. I named the material 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>

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

<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>

6. Finally open AndroidManifest.xml and modify the theme to our customized theme by changing the android:theme attribute value.

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

    <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>

Run the app and verify the material theme by observing the notification bar color. If you see the notification bar color changed, it means that the material design theme is applied successfully.

android-material-design

Here is the complete detailed information about Android Material Design.

Author

Ravi is hardcore Android programmer and Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers through tutorials has always been interesting part for him.

  • Macharia

    Thank you,best introduction before getting info complex stuff….,solve a big problem…,

  • Najmus Saqueb

    Please Ravi explain about the location of build.gradle file. Because in gradle script folder we can’t make changes.It shows error
    dependencies {

    classpath ‘com.android.tools.build:gradle:1.0.0’

    // NOTE: Do not place your application dependencies here; they belong

    // in the individual module build.gradle files

    }

    • There will be two gradle.build files. You need to add the code in gradle located under app folder.

  • jay

    i have supported 23.0.1 lib in eclipse is that working.? how to apply this lib in float(material) edit text theme

  • Hi Ravi :),

    Could you please tell me the purpose of the given xml attrs in style-v21.xml

    true
    true
    true
    @android:transition/move
    @android:transition/move

    🙂

    • kavie

      Hello Ravi Sir,
      Could you please explain me the use of all attributes ?

  • ao2

    Hi, just to nitpick: the colors.xml file shown here has some unused values (textColorPrimary, windowBackground and navigationBarColor), so lint will give some warnings.

    You can either remove them from colors.xml or use them in the style to avoid the warnings.

  • Abner Escocio

    Muitíssimo obrigado cara. Ajudou muito!!

  • yuri

    it does not work to subscribe. any verify email sent to me….could i know why?

    • Maher Nabeel

      I have the same problem. I subscribed but no verification email arrived.

  • Raihan Rian

    is snackbar works for jelly bean or ice sandwich os handset ?

    • sujeeth

      no

  • zeina

    how can i create a folder under res ?

    • Right click on res -> new -> resource folder.

  • Jaspreet Singh

    what about changing between two different themes ,do you have any tuts in that ?

  • Neha chauhan

    I can’t understand how to add icon on tab please explain me

    • Arvind Koli

      TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
      tabLayout.getTabAt(0).setIcon(R.drawable.ic_user);