Getting Started with Material Design - ANDROID TUTORIAL

You might have heard of android Material Design which was introduced in Android Lollipop version. In Material Design lot of new things were introduced like Material Theme, new widgets, custom shadows, vector drawables and custom animations. If you haven’t working on Material Design yet, this article will give you a good start.

Go through the below links to get more knowledge over Material Design.

Creating Apps with Material Design

Material Design Color Customization

Material Design provides set of properties to customize the Material Design Color theme. But we use five primary attributes to customize overall theme.

colorPrimaryDark – This is darkest primary color of the app mainly applies to notification bar background.

colorPrimary – This is the primary color of the app. This color will be applied as toolbar background.

textColorPrimary – This is the primary color of text. This applies to toolbar title.

windowBackground – This is the default background color of the app.

navigationBarColor – This color defines the background color of footer navigation bar.

Creating Material Design Theme

1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.

2. Open res ⇒ values ⇒ strings.xml and add below string values.

strings.xml

<resources>     <string name="app_name">Material Design</string>     <string name="action_settings">Settings</string>     <string name="action_search">Search</string>     <string name="drawer_open">Open</string>     <string name="drawer_close">Close</string>     <string name="nav_item_home">Home</string>     <string name="nav_item_friends">Friends</string>     <string name="nav_item_notifications">Messages</string>     <!-- navigation drawer item labels  -->     <string-array name="nav_drawer_labels">         <item>@string/nav_item_home</item>         <item>@string/nav_item_friends</item>         <item>@string/nav_item_notifications</item>     </string-array>     <string name="title_messages">Messages</string>     <string name="title_friends">Friends</string>     <string name="title_home">Home</string> </resources>

3.Open res ⇒ values ⇒ colors.xml and add the below color values. If you don’t find colors.xml, create a new resource file with the name.

colors.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <color name="colorPrimary">#F50057</color>     <color name="colorPrimaryDark">#C51162</color>     <color name="textColorPrimary">#FFFFFF</color>     <color name="windowBackground">#FFFFFF</color>     <color name="navigationBarColor">#000000</color>     <color name="colorAccent">#FF80AB</color> </resources>

4.Open res ⇒ values ⇒ dimens.xml and add below dimensions.

dimens.xml

<resources>     <!-- Default screen margins, per the Android Design guidelines. -->     <dimen name="activity_horizontal_margin">16dp</dimen>     <dimen name="activity_vertical_margin">16dp</dimen>     <dimen name="nav_drawer_width">260dp</dimen> </resources>

5.Open styles.xml under res ⇒ values and add below styles. The styles defined in this styles.xml are common to all the android versions. Here I am naming my theme as MyMaterialTheme.

styles.xml

<resources>     <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">     </style>     <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">         <item name="windowNoTitle">true</item>         <item name="windowActionBar">false</item>         <item name="colorPrimary">@color/colorPrimary</item>         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>         <item name="colorAccent">@color/colorAccent</item>     </style>       </resources>

6.Now under res, create a folder named values-v21. Inside values-v21, create another styles.xml with the below styles. These styles are specific to Android Lollipop only.

styles.xml

<resources>     <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">         <item name="android:windowContentTransitions">true</item>         <item name="android:windowAllowEnterTransitionOverlap">true</item>         <item name="android:windowAllowReturnTransitionOverlap">true</item>         <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>         <item name="android:windowSharedElementExitTransition">@android:transition/move</item>     </style> </resources>

7.Now we have the basic Material Design styles ready. In order to apply the theme, open AndroidManifest.xml and modify the android:theme attribute of <application> tag.

android:theme="@style/MyMaterialTheme"

So after applying the theme, your AndroidManifest.xml should look like below.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="com.mrbrown.materialdesign" >     <application         android:allowBackup="true"         android:icon="@mipmap/ic_launcher"         android:label="@string/app_name"         android:theme="@style/MyMaterialTheme" >         <activity             android:name="com.mrbrown.materialdesign.MainActivity"             android:label="@string/app_name" >             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                 <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>         </activity>     </application> </manifest>

Now if you run the app, you can see the notification bar color changed to the color that we have mentioned in our styles.

There are more in Material Design go through this for detail and get started

_______________________________________________________________

Happy Coding...