Android How to Apply Material Design Theme
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.
3. Open colors.xml located under res ⇒ values and add the below color values.
4. Open styles.xml located under res ⇒ values and add below styles. I named the material theme as MyMaterialTheme
5. Finally open AndroidManifest.xml and modify the theme to our customized theme by changing the android:theme attribute value.
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.
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.
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 under 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 under res ⇒ values and add below styles. I named the 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. Finally open AndroidManifest.xml and modify the theme to our customized theme by changing the android:theme attribute value.
android:theme="@style/MyMaterialTheme"
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.bentaherghassen.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.

Comments
Post a Comment