Start a Project

Material Components for Android

Material Design is Google’s attempt to provide a more consistent experience for Android users, and the Material Design Components (MDC) library is Google’s latest effort to drive the adoption of Material Design.

MDC is essentially a centralized repository of UI components that you can drop into your Android projects, to give them an instant Material Design look. If this sounds familiar, then it’s because MDC is actually a continuation of the Design Support Library, to the point where it even retains the Design Support Library’s import statements.

Material Components for Android is under active development. The initial 1.0.0 release was mostly just a port of the existing com.android.support.design classes over to the new com.google.android.material namespace. Following this have been independent feature releases and, at the time of writing, the latest version is 1.2.0-alpha06.

Initial setup

This is as simple as adding a single Gradle dependency to your app/module build.gradle file:

Choosing a Material Components theme

As with the AppCompat themes, the Material Components themes include a few base variants for you to choose from:

The key differences in each variant are the light/dark color palettes and the inclusion/exclusion of an ActionBar in each themed Activity‘s Window. There exist DayNight variants of these for supporting automatic dark/light theming.

To start using one of these themes in your app, you’d add the following to your res/styles.xml file:

Finally, you need to reference this in your Manifest:

 

Adding the Material Design Library Components

Many of the MDC components are designed to be used together, In this blog, we are discussing some components which are most commonly used.

CoordinatorLayout

CoordinatorLayout is a layout that helps you coordinate how its child Views interact with one another.

CoordinatorLayouts have a couple of useful attributes that you can apply to its child Views, most notably app:layout_anchor which lets you attach one View to another, and app:layout_insetEdge, which you can use to define inset edges.

To create a CoordinatorLayout, open your main_activity file and add the following:

AppBarLayout

By implementing an AppBarLayout, we can define how all of its child Views respond to scrolling events, via the app:layout_scrollFlags attribute.

Once you’ve applied app:layout_scrollFlags to a View, you can set it to one, or more of the following flags, depending on the scrolling behavior you want to implement:

CollapsingToolbarLayout

CollapsingToolbarLayout is a wrapper for Android’s Toolbar component.

A CollapsingToolbarLayout allows us to define how our toolbar content should collapse and expand in response to scrolling activity, via the app:layout_collapseMode attribute.

Once you’ve implemented a CollapsingToolbarLayout, you can add the app:layout_collapseMode attribute to any of your toolbar elements, and then set it to one of the following values:

NestedScrollView

A NestedScrollView is similar to a ScrollView, but with nested scrolling enabled by default. Although this View isn’t part of the MDC library, since it’s a child of AppBarLayout there is one MDC attribute we need to add to our NestedScrollView.

When you’re using an AppBarLayout, you need to create an association between that AppBarLayout and the View that’s going to be scrolled, which in our case is the NestedScrollView.

You create this association using the ‘appbar_scrolling_view_behavior’ string resource that’s included in the MDC library.

This string resource maps to the AppBarLayout.ScrollingViewBehavior method, which ensures the AppBarLayout is notified whenever a scroll event occurs on our NestedScrollView.

Buttons

Material Buttons include four main variants that all inherit from the base Widget.MaterialComponents.Button style, each with an optional style suffix: raised (default, no suffix), unelevated (*.UnelevatedButton), outlined (*.OutlinedButton) and text (*.TextButton).

All button variants use the textAppearanceButton theme attribute for their typography styles.
The key attributes for customizing these styles are as follows:

Text Fields

Material Text Fields include two main variants. As a result of porting the pre-existing AppCompat TextInputLayout and TextInputEditText classes, there are in fact two base styles: Widget.MaterialComponents.TextInputLayout.* and Widget.MaterialComponents.TextInputEditText.*.

The variants have a style suffix and include filled box (default, *.FilledBox) and outlined box (*.OutlinedBox).

All text field variants use the standard text appearance for input and the textAppearanceCaption theme attribute for “helper” text (labels, errors, counters, etc.).
The key attributes for customizing the Widget.MaterialComponents.TextInputLayout.* styles are as follows:

 

Cards

Material Cards are considered to be “surfaces” and make use of the Widget.MaterialComponents.CardView style. The key attributes for customizing them are as follows:

Bottom Navigation

Material Bottom Navigation includes two main variants that inherit from the base Widget.MaterialComponents.BottomNavigationView style, with an optional style suffix: surface (default, no suffix) and colored (*.Colored).

Bottom Navigation labels use the textAppearanceCaption theme attribute for their typography styles.
The key attributes for customizing these styles are as follows:

 

Learn More about Material Design

You’ll find Google’s Material Design guidelines and library here: https://design.google/resources/ and here: https://material.io/design/

For the material design complete component, you can follow: https://material.io/components

Exit mobile version