Android Apply Material Design to Pre-Lollipop Devices using AppCompat v21
Post
Cancel

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:

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.+'
}

2 – Apply Material Theme

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

You can also customize theme colour palette here

<style name="AppTheme" parent="Theme.AppCompat">
	<item name="colorPrimary">@color/colorPrimary</item>
	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
	<item name="colorAccent">@color/colorAccent</item>
	<item name="android:windowNoTitle">true</item>
</style>

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:

<style name="AppTheme" parent="android:Theme.Material.Light">
	<item name="android:colorPrimary">@color/colorPrimary</item>
	<item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
	<item name="android:colorAccent">@color/colorAccent</item>
	<item name="android:windowNoTitle">true</item>
</style>

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:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	android:orientation="vertical"
	tools:context=".MainActivity">

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

</LinearLayout>

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.

This post is licensed under CC BY 4.0 by the author.