Getting Started with Material Design — MaterializeMyApp

I waited long to write about Material design but could not succeed. Now you may find lots of resources regarding material design in web. I done a research and found out a way to start with Material theme in your apps with backward compatibility(pre-Android Lollipop versions — API level > 21).

Step 0 : Android Studio & AppCompat
Google is recommending Android Studio as official IDE for app development. I hated it long ago, but now started loving it(like our girl friend). It is Material theme, recyclerview, cardview friendly IDE. Go & get started with Android Studio for smooth experience.
Using AppCompat theme makes your app to look nice in pre-Lollipop devices too.

Step 1 : AppCompat Material Theme
Customize your app style in res/values/styles.xml for example take any theme of your preference

<style name="myTheme" parent="Theme.AppCompat.Light.NoActionBar"></style>

<style name="AppTheme" parent="myTheme">
<!--for ActionBar / Toolbar-->
<item name="colorPrimary">@color/primary</item>
<!--for status bar style-->
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorControlHighlight">@color/accent_translucent</item>
<!--for checkBoxes and TextFields etc-->
<item name="colorAccent">@color/accent</item>
</style>

<!--Floating Action Button style-->

<style name="FabStyle">
<item name="android:layout_width">?attr/actionBarSize</item>
<item name="android:layout_height">?attr/actionBarSize</item>
<item name="android:layout_margin">@dimen/spacing_large</item>
<item name="android:background">@drawable/fab_background</item>
<item name="android:src">@drawable/ic_add_black</item>
</style>

<style name="AppTheme" parent="myTheme">

<!--for ActionBar / Toolbar-->
<item name="colorPrimary">@color/primary</item>
<!--for status bar style-->
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorControlHighlight">@color/accent_translucent</item>

</resources>

This style is generalized and suitable for devices with no lollipop(API < 21).
Same style is not applicable for Lollipop device, create a folder as res/values-v21 and style resource file in it. for example

<style name="AppTheme" parent="myTheme">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorControlHighlight">@color/accent_translucent</item>
<item name="android:colorControlHighlight">
@color/accent_translucent
</item>
<item name="colorAccent">@color/accent</item>
<item name="selectableItemBackground">@drawable/selectable_item_background</item>
<item name="android:selectableItemBackground">@drawable/selectable_item_background</item>
<! — for smooth activity transitions →
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
<item name="android:windowSharedElementsUseOverlay">false</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowContentTransitions">true</item>
</style>

<!--Floating Action Button Style-->

<style name="FabStyle">
<item name="android:layout_width">?attr/actionBarSize</item>
<item name="android:layout_height">?attr/actionBarSize</item>
<item name="android:layout_margin">@dimen/spacing_large</item>
<item name="android:background">@drawable/fab_background</item>
<item name="android:src">@drawable/ic_add_black</item>
<item name="android:outlineProvider">background</item>
<item name="android:stateListAnimator">@anim/fab_elevation</item>
</style>

Step 2 : User App-Widgets interaction backgrounds
As of Android lollipop user can experience his interaction with app widget like buttons with new ripples. Unfortunately these ripples won’t work with pre-lollipop devices hence their backgrounds can be created under

res/drawable/
// for example background of clickable widgets res/drawable/selectable_item_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/accent_translucent" android:state_pressed="true" />
<item android:drawable="@android:color/transparent" />
</selector>

For devices with API 21 ripple background of clickable widgets

res/drawable-v21/selectable_item_background.xml<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight">
<item android:id="@android:id/mask" android:drawable="@color/accent" />
</ripple>

refer this for more.
Step 3 : Use Toolbar not ActionBar in your app
Toolbar is the perfect widget which plays role of a normal actionbar which is compatible with all devices, you need to add this widget in all layout resource file of your activity or fragment. Here is the example to use toolbar.

<?xml version=”1.0" encoding=”utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
/>

Step 4 : Use DrawerLayout not Navigation drawer to your app
for example

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
></android.support.v4.widget.DrawerLayout>

Refer this for an example.
I made a demo app based on some references which involves recyclerview, cardview etc.
Enjoy! Happy Coding!

--

--