/ Android

Material Design Theme Android Example

Its been a while since Google has introduced Material Design. Material Design is design language & principle or guidelines derived by Google which gives consistent design guidelines across different platforms like Mobile, Web, TV, Wearables.

Lets come to the point. There are different OS versions in Android.

How older OS version will support Material design concepts?

Nothing to worry about, for that Google updated its AppCompat library to support older OS platforms. Here we are going see how to implement or apply the material design theme for Android application.

Steps to implement

  1. First add the AppCompat library to android application as dependency.
  2. Define the theme for app by extending parent theme Theme.AppCompat.Light or Theme.AppCompat.Dark
  3. Specify the primary, primary dark and accent colors in colors.xml. Learn where those colors are applied from Matrial Design usage

Define theme.xml

define the theme in values folder in your application like below.

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="colorPrimary">@color/primary</item>
  <item name="colorPrimaryDark">@color/primary_dark</item>
  <item name="colorAccent">@color/accent</item>
  <item name="actionMenuTextColor">@style/MyActionBarTitleText</item>
  <item name="actionModeBackground">@color/primary</item>
</style>

<style name="MyActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/primary_text_color</item>
</style>
</resources>

colors.xml

The colors values in xml given below are applied from Material Design Color Palette. As per the guide lines, primary color with 500 shade and primary dark color with 700 shade and choose the accent colors (500 shade) that matches with primary color.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#673AB7</color>
    <color name="primary_dark">#512DA8</color>
    <color name="accent">#E91E63</color>
    <color name="navigation_bar">#311B92</color>
    <color name="primary_text_color">#FFFFFF</color>
</resources>

This will make the app look like

JellyBean

{<1>}JellyBean

KitKat

{<2>}Kitkat

Define Values-v21/theme.xml

For Lollipop devices, define the theme like below.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="colorPrimary">@color/primary</item>
  <item name="colorPrimaryDark">@color/primary_dark</item>
  <item name="colorAccent">@color/accent</item>
  <item name="android:actionMenuTextColor">@style/MyActionBarTitleText</item>
  <item name="android:navigationBarColor">@color/navigation_bar</item>
</style>

<style name="MyActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
  <item name="android:textColor">@color/primary_text_color</item>
</style>
Lollipop

For above code, the app will look like the below screen shot in Lollipop devices.
{<3>}Lollipop

Happy coding :-)

Material Design Theme Android Example
Share this