Material Components for Android

Akshay Kumar

30 September 2020

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:

implementation "com.google.android.material:material:$material_version"

1	implementation "com.google.android.material:material:$material_version"

Choosing a Material Components theme

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

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.Light.NoActionBar

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:

<style name="AppTheme" parent="Theme.MaterialComponents.*">
    <!-- Add attributes here -->
</style>

</style>

Finally, you need to reference this in your Manifest:

<manifest
    ...>
    <application
        android:theme="@style/AppTheme">
        ...
    </application>
</manifest>

<manifest

...>

<application

android:theme="@style/AppTheme">

...

</application>

</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:

<android.support.design.widget.CoordinatorLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:id="@+id/coordinatorLayout">
</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.CoordinatorLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/coordinatorLayout">

</android.support.design.widget.CoordinatorLayout>

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:

scroll. The View will scroll in response to scroll events. If you don’t add this flag, then the View will remain pinned in place while the rest of the screen scrolls. If you’re going to use any of the following flags, then you must also implement app:layout_scrollFlags=“scroll.”
enterAlways. This View will scroll off the screen with the rest of the scrollable content, however, this View will re-appear as soon as the user starts to scroll upwards. This is sometimes known as the ‘Quick View’ pattern.
enterAlwaysCollapsed. This View will always enter the screen at its minimum, or “collapsed” height (essentially, the value of its android:minHeight attribute). The View will expand fully once it reaches the end of its scroll range. This flag only works when used in combination with the enterAlways flag and, of course, the scroll flag, so you’ll need to add the following to your View: app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed.”
exitUntilCollapsed. As the user scrolls upwards, this View will collapse until its minHeight value is met. The View will remain at this height until the user scrolls in the opposite direction.
snap. If the View is only partially visible when the user stops scrolling, then it’ll continue scrolling to its closest edge, for example if only the bottom 30% of a View is visible, then it’ll be scrolled completely offscreen.

<android.support.design.widget.AppBarLayout
   android:id="@+id/app_bar_layout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

</android.support.design.widget.AppBarLayout>

<android.support.design.widget.AppBarLayout

android:id="@+id/app_bar_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

</android.support.design.widget.AppBarLayout>

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:

Off. No collapsing behavior.
Pin. The View will remain fixed to the screen while the user is scrolling downwards. When the user scrolls upwards, the View will collapse.
Parallax. This implements parallax scrolling, where content fades as it collapses. Parallax scrolling is particularly effective when applied to images.

//Add our CollapsingToolbarLayout//
<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentScrim="?attr/colorPrimary">
    // Add the Toolbar//
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

        // Define your toolbar’s collapsing behaviour//
        app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>

//Add our CollapsingToolbarLayout//

<android.support.design.widget.CollapsingToolbarLayout

android:id="@+id/collapsing"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:contentScrim="?attr/colorPrimary">

// Add the Toolbar//

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

// Define your toolbar’s collapsing behaviour//

app:layout_collapseMode="pin" />

</android.support.design.widget.CollapsingToolbarLayout>

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.

<android.support.v4.widget.NestedScrollView
       android:id="@+id/scroll"
       android:layout_width="match_parent"
       android:layout_height="match_parent"

      //Create the association between the AppBarLayout and the NestedScrollView//
       app:layout_behavior="@string/appbar_scrolling_view_behavior">

</android.support.v4.widget.NestedScrollView>

<android.support.v4.widget.NestedScrollView

android:id="@+id/scroll"

android:layout_width="match_parent"

android:layout_height="match_parent"

//Create the association between the AppBarLayout and the NestedScrollView//

app:layout_behavior="@string/appbar_scrolling_view_behavior">

</android.support.v4.widget.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:

backgroundTint: The tint color applied to the button background. The default enabled color is transparent for text buttons and colorPrimary for all other variants.
iconTint: The tint color applied to an optional button icon. The default enabled color is colorPrimary for text buttons and colorOnPrimary for all other variants.
rippleColor: The color of the button touch ripple. The default color is colorOnPrimary for raised/unelevated buttons and colorPrimary for outlined/text buttons.
strokeColor: The color of the stroke around the button background. The default color is colorOnSurface for outlined buttons and transparent for all other variants.
strokeWidth: The width of the stroke around the button background. The default value is 1dp for outlined buttons and 0dp for all other variants.
shapeAppearance: The shape appearance of the button background. The default value is shapeAppearanceSmallComponent.

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:

boxBackgroundMode: The mode of the box background, which can be either filled, outline or none.
boxBackgroundColor: The color of the text field background. The default enabled color is colorOnSurface for filled box text fields and transparent for outlined box text fields.
boxStrokeColor: The color of the stroke around the text field background. The default color is colorOnSurface (in default state) for outlined box text fields and is ignored for filled box text fields.
hintTextColor/errorTextColor/counterTextColor: Various colors for different “helper” text sub-components.
shapeAppearance: The shape appearance of the text field background. The default value is shapeAppearanceSmallComponent.

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:

cardBackgroundColor: The color of the card background. The default color is colorSurface.
cardElevation: The elevation of the card. The default value is 1dp.
shapeAppearance: The shape appearance of the card background. The default value is shapeAppearanceMediumComponent.

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:

backgroundTint: The color of the bottom navigation background. The default color is colorSurface for surface bottom navigation and colorPrimary for colored bottom navigation.
itemTextColor/itemIconTint: The colors of bottom navigation item icons and labels. The default colors are colorOnSurface/colorPrimary(selected) for surface bottom navigation and colorOnPrimary for colored bottom navigation.
itemHorizontalTranslationEnabled: A flag to set whether or not a translation animation should occur when selecting bottom navigation items. The default value is false.

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