Material Design was introduced in Android Lollipop version and is considered as an extensive guide for motion, visual, and interaction design across various devices and platforms. One can also use the design support library to integrate components, patterns as well as the material design. This supporting library is compatible with Android 2.3 (Api level 9) and above.

You can apply the material theme in your app by specifying a style that inherits from android: Theme. Material:

<!-- res/values/styles.xml -->
<resources>
  <!-- your theme inherits from the material theme -->
  <style name="MyAppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

The material theme is defined as:

• @android:style/Theme.Material (dark version)
• @android:style/Theme.Material.Light (light version)
• @android:style/Theme.Material.Light.DarkActionBar

Material Design provides a set of properties to customize the Material Design Color theme. However, we can focus on the following five primary attributes:-

• colorPrimaryDark – It’s the app darkest primary color which mainly applies to status or the notification/status bar background
• colorPrimary – It’s the primary app color and is applied as a toolbar background
• textColorPrimary – It’s the primary text color and is applied to the toolbar title
• windowBackground – It’s the default background color of the app
• navigationBarColor – It defines the background color of footer navigation bar

Besides, you can add colors in the colors.xml inside values folder:

<?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>

Now add them in your theme:-

<!-- res/values/styles.xml -->
<resources><!
  -- your theme inherits from the material theme -->
  <style name="MyAppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  	<item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
  </style>
</resources>

Introduction of Recycler View and Card View

RecyclerView:- RecyclerView is comparatively better refined and flexible version of ListView. It is available in v7 supporting package. You can find more detail on RecyclerView here.

CardView:- CardView increases the FrameLayout class and display the information inside cards. CardView widgets can have shadows and rounded corners.

Below code show, how to add cardview in your layout:-

<!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>

If you want to give shadow to the card view then use card_view: cardElevation attribute.

You need to add the following dependencies in your build.gradle(module)

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
}

You can also give shadow to any view by using android:elevation attribute.

<TextView
    android:id="@+id/myview"
    android:elevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

 By the help of material design, you can include vector drawable's, define custom animation and can do many other things in your app

Hope you like the article! Share the feedback, brickbats, and concerns in the comment section below.