Top Menu

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Thursday 22 September 2016

How to apply Material Design Theme

Below are the very simple steps to applying Material design theme in your application.
1. Open your Android Studio and create a New Project. When it prompt to select 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 support library component to your application.
build.gradle
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 in res->values and add the below color values
colors.xml
<?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 in res->values and add below styles. I renamed material theme as MyMaterialTheme
styles.xml
<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 folder named values-v21. Inside values-v21, create another styles.xml with the below styles. These styles are specific to Android5.0  
styles.xml
<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 your customized theme by changing the android:theme attribute value.
android:theme="@style/MyMaterialTheme"
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
    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 the material design theme is applied successfully. 

No comments:

Post a Comment