Upgrading to Material Components

Material Components (part of Android Jetpack) bring redesign for well known UI elements and even add new ones to the entire collection. In this article we’ll take a look at them — their appearance, behaviour and what is the most important — how to upgrade an app in order to check them out in practice. And of course, when upgraded, how to implement them in an easy and clear way.

Demo app featuring Backdrop Menu, TextInputLayouts, MaterialButtons, Chips and Bottom App Bar

AndroidX vs Support Library

Material Components are part of AndroidX, which is a succeedor of Support Library, bringing newer OS features to older Android versions. AndroidX simply maps the original Support Library API packages into the androidx.* namespace. Only the package and Maven artifact names changed. Classes, methods, and field names did not change. This is finally a huge step to clean and order the confusing mess of old artifacts and package names.

Short overview of included features:

• Material Design components compatible with older Android versions
• Android KTX (set of Kotlin extensions)
• Smaller, specified packages
• Architecture Components & Support Library together under androidx.* packages

It’s also worth emphasizing that new UI elements are included in API 28. However, keep in mind that Support Libraries will no longer be updated by Google. We can avoid refactoring the whole project at the moment, but it is strongly recommended to upgrade to AndroidX as soon as possible.

How to upgrade to AndroidX?

There are few ways of it, all of them require Android Studio 3.2 or higher:

1. Automatic refactoring to AndroidX

• Upgrade Gradle to version 4.8 or higher (see Upgrade Gradle section below)
• Menu > Refactor > Migrate to AndroidX

• Edit gradle.properties file:

If you have any dependencies that have not been migrated to the AndroidX namespace, set android.enableJetifier to true and Gradle system will automatically migrate them. Otherwise, set to false.

android.useAndroidX=true
android.enableJetifier=true

2. “Non automatic” refactoring

• Upgrade Gradle version in gradle-wrapper.properties:

distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

• Add following lines to gradle.properties file:

android.useAndroidX=true
android.enableJetifier=true //Automatically convert third-party libraries to use AndroidX

• Update build.gradle (Project level):

classpath ‘com.android.tools.build:gradle:3.3.1’

• Update build.gradle (Module: App) — in order to use AndroidX, app has to target API level 28:

android{ 
   compileSdkVersion ‘28’ 
   DefaultConfig{ 
      .. 
      targetSdkVersion 28 
   } 
}

• Add following lines to build.gradle (Module: App) file, replacing standard Support Libraries — these libraries will let you try out all the examples from the article:

implementation 'androidx.appcompat:appcompat:1.0.0-beta01'
implementation 'androidx.core:core-ktx:1.1.0-alpha04'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'com.google.android.material:material:1.0.0-beta01'

• Change your styles in styles.xml to inherit from MaterialComponents instead of AppCompat:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    ...
</style>

• Change prefixes of packages used in project to use AndroidX ones:

For Support Library: android.support.* to androidx.*

For Design Library: android.design.** to com.google.android.material.*

Note: for exact import mappings, check out the official documentation.

• Done! Your project is configured to use the new namespace and its components.

Implementing the UI

NOTE: all examples from this article will be explained using com.google.android.material namespace.

TextInputLayout

Material TextInputLayout comes with new types of text boxes: Outlined and Filled. Both come with smooth corner roundings and updated hint animation behaviour. To create a Material text field, add a TextInputLayout to your XML file and TextInputEditText as a direct child.

OutlinedBox

Outlined text fields have less visual emphasis than filled text fields. When they appear in places like forms, where many text fields are placed together, their reduced emphasis helps simplify the layout.

Remember to add style TextInputLayout.OutlinedBoxto your View:

FilledBox

Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.

Remember to add style TextInputLayout.FilledBoxto your View:

Material Button

Material Buttons generally come in two main types: Button and Text Button. Both have elevation and ripple effect by default, optional icons, icon padding and optional button corner radius.

Filled, elevated Button

The default style represents an button with an elevation and a colored background.

Text Button

This type has a transparent background with colored text. Text buttons are used for low-priority actions, especially when presenting multiple options.

Chips

Chips are compact elements that represent an input, attribute or action. Chips allow users to enter information, make selections, filter content, trigger actions and look like perfect component for tagging. Unlike Buttons, Chips were fully designed for dynamic and interactive content.

Chips should be aggregated in groups. In order to provide them, add ChipGroup container to your XML layout file:

There are several types of Chips. Any of them can be regular or outlined.

• Filter chips

Filter chips use tags or descriptive words to filter content. They contain optional chip icon, optional close icon and are always checkable.

style="@style/Widget.MaterialComponents.Chip.Filter"

• Choice chips

Choice chips allow selection of a single chip from a set of options. They contain optional chip icon and are always checkable.

style="@style/Widget.MaterialComponents.Chip.Choice"

• Action chips

They offer actions related to primary content in a particular dynamic context (unlike Buttons, that are static).

style="@style/Widget.MaterialComponents.Chip.Action"

Bottom App Bar

app:fabAlignmentMode=”center”

app:fabAlignmentMode=”end”

BottomAppBar is an evolution from standard Material guidance. Visually anchors the UI, puts more focus on features and increases engagement. It comes with several alignment modes: we can have anchored FloatingActionButton (center or end) or no fab anchored. There are also several useful attributes available to modify fab’s cradle apperarance, such as app:fabCradleMargin, app:fabCradleRoundedCornerRadius, app:fabCradleVerticalOffset. We can also of course, assign a custom menu — via XML or programatically.

Activity layout XML:

Activity code:

Code above will make your Top App Bar empty and make Bottom Bar default for action icons. If you want to have two Bars on one screen, just set your Top Toolbar as SupportActionBar instead of Bottom and assign different menus to both of them.

Backdrop Menu

As a newest way of interacting with user, a backdrop is the furthest back surface of an app, appearing behind all other content and components. It’s composed of two surfaces: a back layer (which displays actions and filters) and a front layer (which displays content). Back layer can be available for user via standard “Hamburger” icon in top left corner. You can use a backdrop to display interactive information and actions, such as navigation or content filters.

For the best tutorial of implementing the menu, I recommend trying out this one from Google’s Material Advanced Codelabs. It provides clear, step-by-step explanation of how to make back layer, place it in a right place and finally implement the menu with proper design and animation.

That’s all for today, it’s been ages since my last post and that was so much fun to come back with a brand new content :) Don’t forget to 👏👏👏 and leave your opinions and comments :)

My last two posts (first and second) on AndroidPub got over !2.5 K! claps and immensely great amount of new readers. Thank you very much!

Jetpack-Andie for goodbye, again!

References

Migrating to AndroidX | Android Developers

MDC-104 Android: Material Advanced Components (Kotlin)