6,055 total views, 1 views today

What is Material Design?

It’s a comprehensive guide for visual, motion and interaction designs across platforms and devices, with introduction of new features like Material Theme, New Widgets, Custom Shadows, Vector Drawables & Custom Animations.

Android included support for Material Design from Android 5.0 (API Level 21) on wards.

Material Design Color Customization:

We use 5 primary attributes for customization.

  • colorPrimaryDarkthe darkest primary color of the app; mainly applies to notification bar background.
  • colorPrimarythe primary color of the app; applied as toolbar background.
  • textColorPrimarythe primary color of text; applied to toolbar title.
  • windowBackgrounddefault background color of the app.
  • navigationBarColorthe background color of footer navigation bar

Adding the Toolbar/AppBar (Actionbar):

It’s pretty easy. All you have to do is, create a separate layout for the toolbar & include it in other layouts wherever you want it to be displayed.

  • Create an xml file named xml under res ⇒ layout & add android.support.v7.widget.Toolbar element. This creates the toolbar with specific height & theme.


<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:local="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Implementation of RecyclerView:

It introduces an additional level of abstraction between theRecyclerView.Adapter & RecyclerView.LayoutManager; To detect data set changes in batches during a layout calculation. This helps with performance because all view bindings happen at the same time & unnecessary bindings are avoided.

TheRecyclerView widgets is part of the v7 Support Libraries. To use the widgets in your project, add these Gradle dependencies to your app’s module:

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

Creating Cards:

CardView extends theFrameLayout class & lets you show information inside cards that have a consistent look across the platform. To create a card with a shadow, use the card_view: cardElevation attribute.

Use these properties to customize the appearance of the CardView widget:

  • card_view:cardCornerRadius attribute, to set the corner radius in your layouts.
  • setRadius method, to set the corner radius in your code,
  • card_view:cardBackgroundColor attribute, to set the background color of a card.

To use the widgets in your project, add these Gradle dependencies to your app’s module:

dependencies {
compile 'com.android.support:cardview-v7:21.0.+'
Reference: appdevwiki.com, android-arsenal.com

There are many more advantages of Material Design over its predecessor, flat design. I hope this article gives you some idea & helps you to integrate Material Design in your Android Application.

Do you have anything interesting to tell about Android’s Material Design? Write to me at “info@andolasoft.com“. I would love to hear from you.