Loading...

Android Custom Material Design Theme and Color

Google has introduced a new design guideline with the release of Android 5.0 (Lollipop) known as Material Design, and with this guidelines Google provide Material Theme to the android developer. This is a new user interface. In this post, I will show you way to use custom material design theme and color in your application.

Setup Material Theme


First of all, you have to setup material design theme to your styles.xml file. You can choose any of three material themes according to your wish:
• Theme.Material
• Theme.Material.Light
• Theme.Material.Light.DarkActionBar
Here I have used Theme.Material.Light.DarkActionBar as app theme.
    <style name="AppTheme" parent="Theme.Material.Light.DarkActionBar">
</style>

Add Custom Theme Colors


You have to create a colors.xml file in res/values folder to define custom theme colors. After defining theme colors, your colors.xml file seems like this.
res/values/colors.xml

Look at following image, here I have shown meaning of colorPrimary, colorPrimaryDark, colorAccent, windowBackground, navigationBarColor, statusBarColor, textColorPrimary.

Android Custom Material Design Theme and Color

Update Your styles.xml File


Here, I have added status bar color, action bar / app bar color, app background color, navigation bar color, etc. that we defined before in our colors.xml file. Your styles.xml file seems like this.
res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.Material.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@color/windowBackground</item>
        <item name="android:navigationBarColor">@color/navigationBarColor</item>
        <item name="android:statusBarColor">@color/statusBarColor</item>
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <!-- Customize your theme here. -->
    </style>

</resources>
Only this much is not about the material design, it is lot more. Here I just described how to use custom material design theme and color in android application. For more about android material
Tutorial 2705861912061643292
Home item