Contents
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.
- colorPrimaryDark – the darkest primary color of the app; mainly applies to notification bar background.
- colorPrimary – the primary color of the app; applied as toolbar background.
- textColorPrimary – the primary color of text; applied to toolbar title.
- windowBackground – default background color of the app.
- navigationBarColor – the 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
<?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
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 “[email protected]“. I would love to hear from you.
