Material Design in Android

Material Design in Android

Material

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.

toolbar.xml

[code language=”html”]
<?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" />
[/code]

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:

[code language=”html”]
dependencies {
compile ‘com.android.support:recyclerview-v7:21.0.+’
}
[/code]

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:

[code language=”html”]
dependencies {
compile ‘com.android.support:cardview-v7:21.0.+’
}
[/code]

Reference: appdevwiki.com, android-arsenal.com

Conclusion
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.

Tags:
,
Jay
Jayadev Das
jayadev.das@andolasoft.com

Do what you do best in – that’s what I’ve always believed in and that’s what I preach. Over the past 25+ years (yup that’s my expertise ‘n’ experience in the Information Technology domain), I’ve been consulting to small, medium and large companies ‘bout Web Technologies, Mobile Future as well as on the good-and-bad of tech. Blogger, International Business Advisor, Web Technology Expert, Sales Guru, Startup Mentor, Insurance Sales Portal Expert & a Tennis Player. And top of all – a complete family man!