Apply Material Design to Pre-Lollipop Devices using AppCompat v21

As you know, the Android 5.0 Lollipop was released featuring with new UI style called Material Design.
Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. You can find more information, design guidelines about Material Design here: http://www.google.com/design/spec/material-design/introduction.html#introduction-principles

Luckily, Google also provides support library – AppCompat v21 – to allow us to apply Material Design on older Android versions.

A – AppCompat v21 Library

AppCompat v21 library supports following material design features:

-   Provide Material Design style for some system widgets (EditText, Spinner, CheckBox, RadioButton, SwitchCompat, CheckedTextView) when using AppCompat theme

-   Customize theme colour palette

-   CardView – a new View in Android 5.0

-   RecyclerView – a new View in Android 5.0 used to display data collection

-   Palette – and utility class to extract prominent colours from image

B – Apply Material Design to Pre-Lollipop Devices using AppCompat v21

1 – Set Up

Add following dependencies to Graddle build file:

{% highlight java %}

dependencies { compile ‘com.android.support:appcompat-v7:21.0.+’ compile ‘com.android.support:cardview-v7:21.0.+’ compile ‘com.android.support:recyclerview-v7:21.0.+’ }

{% endhighlight %}

2 – Apply Material Theme

Opent styles.xml and make your AppTheme inherit from Theme.AppCompat.

You can also customize theme colour palette here

{% highlight java %}

{% endhighlight %}

Parallelly, you should create a specific styles.xml file for Android 5.0 (in values-v21 folder), to be able to use all the Material Design features:

{% highlight java %}

{% endhighlight %}

FYI about the colour attributes:

-   colorPrimary: the primary colour of your app, will be applied to the app bar

-   colorPrimaryDark: will be applied to the status bar and contextual app bars

-   colorAccent: will be applied to some theme UI controls like Checkboxes, RadioButton, EditText,…

3 – Demo using supported system widgets

Now, your project is ready to use Material Design theme.

Here, I added some common views to the activity for a visual demo only:

{% highlight java %}

<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/hello_world" />

<EditText
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="@dimen/activity_vertical_margin"
	android:hint="Edit Text" />

<Button
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="@dimen/activity_vertical_margin"
	android:text="Button"/>

<CheckBox
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="@dimen/activity_vertical_margin"
	android:text="Checkbox"/>

<RadioButton
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="@dimen/activity_vertical_margin"
	android:text="Radio Button"/>

{% endhighlight %}

Demo result:

C – Download Source Code for Apply Material Design to Pre-Lollipop Devices using AppCompat v21

 https://drive.google.com/file/d/0Bw3dwdSezn6fWFZvaDJTY21wcEk/view?usp=sharing
http://www.mediafire.com/download/gc918np2et81do8/DemoMaterialDesignBasic.zip
In next post, I’ll introduce about 2 new Views in Android 5.0: CardView and RecyclerView.