Android Developing Tips: Using AppCompat Theme

Standard

Google have launched latest Material design that brings evolution in user experience in various technologies including mobile industries, specifically Android. But this theme is still new and only Lollipop devices can support this so we can’t implement this theme directly using Material theme provided by Google.

So, how do we implement this on pre-Lollipop devices? Yes, there are various solutions. But the simple one is AppCompat v21.

What is AppCompat?

AppCompat (aka ActionBarCompat) started out as a backport of the Android 4.0 ActionBar API for devices running on Gingerbread, providing a common API layer on top of the backported implementation and the framework implementation. AppCompat v21 delivers an API and feature-set that is up-to-date with Android 5.0.

Source: Android Developer Blog

How do we implement AppCompat Theme?

Here are easy ways to implement AppCompat Theme in your apps.

We must declare AppCompat library in our app’s gradle script

dependencies {
    compile "com.android.support:appcompat-v7:21.0.+"
}

All activities must extends from ActionBarActivity class

Define theme in values/styles.xml

Before, we used Holo themes in our base theme. Now, we can use AppCompat theme with simple declaration in our base theme.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

Customize the theme

Material design simplify our color selection for our apps. We only have to define 3 colors for our apps. These are primary color, primary dark color and accent color.

  • Primary color is our apps brand color.
  • Primary dark color is darker version of primary color which is used in status bar and contextual app bar.
  • Accent color is used in various UI widget like checkbox and text field.
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- colorPrimary is used for the default action bar background -->
    <item name=”colorPrimary”>@color/my_awesome_color</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</item>
    <!-- colorAccent is used as the default value for colorControlActivated,
    which is used to tint widgets -->
    <item name=”colorAccent”>@color/accent</item>
    <!-- You can also set colorControlNormal, colorControlActivated
    colorControlHighlight, and colorSwitchThumbNormal. -->
</style>

Leave a Reply