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

<?xml version=1.0 encoding=utf-8?>
<resources>
<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>
</resources>
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.
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

http://www.viralandroid.com/2015/08/android-custom-material-design-theme-color.html

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s