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.
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
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 >
Migrate to AndroidX
- Edit gradle.properties file:
If you have any dependencies that have not been migrated to the AndroidX namespace, set
true and Gradle system will automatically migrate them. Otherwise, set to
2. “Non automatic” refactoring
- Upgrade Gradle version in gradle-wrapper.properties:
- Add following lines to gradle.properties file:
android.enableJetifier=true //Automatically convert third-party libraries to use AndroidX
- Update build.gradle (Project level):
- Update build.gradle (Module: App) — in order to use AndroidX, app has to target API level 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:
- Change your styles in
styles.xmlto inherit from
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
- Change prefixes of packages used in project to use AndroidX ones:
For Support Library:
For Design Library:
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
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.
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:
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 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.
This type has a transparent background with colored text. Text buttons are used for low-priority actions, especially when presenting multiple options.
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.
- Choice chips
Choice chips allow selection of a single chip from a set of options. They contain optional chip icon and are always checkable.
- Action chips
They offer actions related to primary content in a particular dynamic context (unlike Buttons, that are static).
Bottom App Bar
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:fabCradleVerticalOffset. We can also of course, assign a custom menu — via XML or programatically.
Activity layout XML:
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.
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 :)