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


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.

<?xml version=1.0 encoding=utf-8?>
<color name=colorPrimary>#03A9F4</color>
<color name=colorPrimaryDark>#0288D1</color>
<color name=colorAccent>#00BCD4</color>
<color name=windowBackground>#fff</color>
<color name=navigationBarColor>#0288D1</color>
<color name=statusBarColor>#0288D1</color>
<color name=textColorPrimary>#fff4f4f4</color>
view raw colors.xml hosted with ❤ by GitHub


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.


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


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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s