To ensure that your app is visually and behaviorally consistent with other apps installed on your user’s device, we recommend that you follow the Material Design specification, because the operating patterns that users learn from one app can be seamlessly used in another.

Android users expect your app to look and behave in sync with the system. You should follow the Material Design specification when designing visual and navigation patterns…

-d.android.com/design

You can do this using the Material Design Components (MDC) component library. This article lists the advantages of using MDC to show why we recommend it.

component

MDC provides Material versions of standard components of the system, such as Buttons, Toolbars, checkboxes, and so on, which make it easy to implement a Material style. If you are using the MaterialComponents theme, the Material component is instantiated instead of the standard component when you inflate a layout (via the View Inflater of MDC). So you can easily implement the Material style without major updates to the layout.

<! -- Copyright 2019 Google LLC. spdx-license-identifier: apache-2.0 --> <! -- Standard component Button will be replaced by MaterialButton --> <Button... / > <! -- You can even use materialButton-specific properties --> <Button... app:icon="@drawable/foo"/> <! - if you want to use a backward-compatible capacity AppCompatButton rather than MaterialButton, you can do this - > < androidx. Appcompat. Widget. AppCompatButton... />Copy the code

All Material components inherit from their AppCompat counterparts, so they enjoy the same backward compatibility and new bug fixes.

Material components develop more diversified styles and functions based on the corresponding system standard components and AppCompat components. For example, MaterialButton has the following styles:

<! -- Copyright 2019 Google LLC. spdx-license-identifier: apache-2.0 --> <! -- Contained button --> <Button ... style="? attr/materialButtonStyle"/> <! -- Text button --> <Button ... style="? attr/borderlessButtonStyle"/> <! -- Outlined button --> <Button ... style="? attr/materialButtonOutlinedStyle"/>Copy the code

One of my favorite features is to replace TextView with MaterialTextView, which has added the ability to easily set the line height in TextAppearance.

In addition to extending the capabilities of existing components, MDC provides a whole new set of components. You may know Bottom Navigation, Bottom Sheet, and Floating Action Button, but you may not have heard of Chips, Date Picker, and Time Picker.

For a complete list of MDC components, see — Components.

The Material subject

Material themes allow you to more systematically customize Material Design styles to reflect your product brand. The Material theme includes color, font styles, and shape properties. Customizing it automatically applies to the components you use to build your application.

You can think of a Material theme as a design system that creates a design system 🤯. All you need to do is configure the colors, font styles, and shapes to get a complete design system based on your brand.

Nick Rout describes each of these subsystems in depth in the following articles:

  • Building Material color themes | implementation
  • Create Material font style theme | Implementation article
  • Building Material shape themes | implementation

The dark theme

The MDC component implements dark themes in accordance with Material’s dark theme background specification. Under the dark theme, many components adjust their color, and elevation overlay layers are added to represent height changes when shadows are not visible.

Chris Banes dives into the dark themes of MDC in the following article:

  • Use the Material Design component to implement dark themes

The Material move 🆕

Material Design also has a specification for transition animation. Now, MDC not only provides specifications, but also implements these patterns as transitions for you to use in your applications.

Hunter Stich introduces the Material Motion library in this post:

  • Use the Material Design component to achieve Material dynamics

The use of Compose

Jetpack Compose is the next generation UI toolkit for Android. It provides Material style components and themes. Using MDC early will set the stage for a future migration to Jetpack Compose – they use the same concepts, design terms, and components. You can even simplify the migration process by using a library like the MDC-Android Compose theme adapter, which converts an XML-implemented MDC theme into a MaterialTheme for Compose.

Material is recommended.

Hopefully, you’re already aware of why we recommend using Material Design Components to build Android UIs. We recently updated the templates that we created in Android Studio from the File > New Project menu. These templates preset the Material theme for you and use MDC, so you can get started with MDC more easily. If you have not migrated to MDC, check out our migration guide.