Getting Started with Android Material Design


       Here we are going to cover topic Material themes, which is most talked feature that got introduced with Lollipop release. We will learn how to setup project to use material theme in pre-Lollipop and Lollipop and above versions Ie. API 21 and above.

  We will start our course by creating application, where we are going to apply material design themes. Also we will checkout how to make those themes backward compatible on older Android version devices.
Lets begin…

First of all open Android studio and  start creating new project, give Application name and click next.


On next screen select Minimum sdk as API 19 ie. Kitkat; so that we will be able to demonstrate backward compatibility of material design. Click next.


 Choose Empty Activity template and click next.


Let default screen be as it is and click finish.



Now go to “src->main-> res->layout” you will see “activity_main.xml” layout file which we can see in design mode of android studio as follow.



Now by default maaterial them got applied to screen. Because target sdk is latest API version ie. API 23 (which you can download from Android SDK manager). In this default material theme, status bar gets a specific color and application action bar gets different color.

In above activity screen, top most bar with wifi/ battery/ time display is “Status Bar” with color “colorPrimaryDark”; just below it, is the “Action Bar/ Toolbar” with color “colorPrimary”.

Now from where these colors got allocated to views on activity screen? The answer we get when we open “res->values->colors.xml” .Color primary for action bar, color primary dark for status bar.



How these colors got allocated to views? The answer we get when we open “res->values->styles.xml “. By default Android studio created this theme named “AppTheme” which has parent theme as  “Theme.AppCompact.Light.DarkActionBar”.


Now if you want to apply this theme to all the activities in app you can do that using “android:theme” attribute for <application> tag in “AndroidManifest.xml” or you can add it to specific <activity> .


Now, application’s min sdk is below 21 hence parent theme of “AppTheme” is “Theme.AppCompact.Light.DarkActionBar”.  If you set min sdk as 21 ie. Lolipop then you will get parent theme as “Theme.Material.Light.DarkActionBar” the themes which got introduced in Lolipop.

“Theme.AppCompact.Light.DarkActionBar” is not actual material theme but compatible version of Material theme “Theme.Material.Light.DarkActionBar”. Refer below image.


Note that material themes added in api 21 will work for device Lolipop and above  only; For 7>api<21 we have to use AppCompact version of material themes.

To achieve Material theme compatibility there are 2 ways by xml or by programming way.

1. Lets see how to do it by xml way

Following chart will help you while creating resources when you want to target specifically version 21 and above.


1. You will have to create “values-v21” folder in “res” folder; after that create “styles.xml” in “values-v21” folder.

Following is the typical directory structure after this step:


2. As we are targeting Api level <21 we have to use parent theme as one of the AppCompact version themes. So what we will do we will make another theme named “CustomTheme” which will have parent as “AppTheme”.

We will have following setup while applying material theme by xml way

“values->styles.xml” will look like this



“values-v21->styles.xml” will look like this



and “AndroidManifest.xml” will look like this with android:theme=”style/CustomTheme”



So remember, to make app compatible for older version devices and to use material theme we have to create folder structure as given in  above image

2. Lets see how to achieve material theme compatibility using code.

Check whether app running on Android 5.0 and above or not using below code.



That’s it folks. We have got well start to material design with basics of material themes.
We will cover the above learned lessons in depth in upcoming articles regarding implementation of material design with new material design widgets. 





Reactions:

0 comments :

Post a Comment