Material Design Components for Android 1.1.0 Are Now Available

Material Theming, new components, dark theme support, and more

Nick Rout
Nick Rout
Feb 12 · 5 min read

We are excited to announce the release of Material Design Components (MDC) 1.1.0! A host of exciting new features have been added along with many bug fixes and accessibility improvements. Get the rundown below.

Be sure to check out the release notes. If you’re using MDC for the first time, also take a look at our getting started guide.

A brief background on MDC

Material Components for Android (MDC) evolved from the Design Support Library. The initial 1.0.0 release was binary-equivalent with 28.0.0 and mainly served as the android.support.design to com.google.android.material namespace change. Since then, the Material Design specification has evolved. New principles, guidelines, and components have emerged to better represent brands while maintaining the core principles of Material. The purpose of MDC is to provide developers with a library that implements these components and guidelines in code. As guidelines continue to change over time, MDC will adapt and make updates to meet the latest specs. This library allows designers and developers to share a common system and build delightful experiences for their brand, faster.

What’s new in 1.1.0?

A lot has changed in MDC since 1.0.0! The things you loved from the alpha, beta, and RC releases of 1.1.0 are now officially stable. If you haven’t yet started using 1.1.0 of MDC (or above), there has never been a better time to migrate.

For those who are using the Design Support Library or MDC 1.0.0, we are planning to provide guidance to migrate both your design system and codebase for the new changes in Material Theming and MDC 1.1.0. Watch this space!

Material Theming allows you to customize Material Design to better reflect your brand. Color, typography and shape choices provide common properties between design and development enabling near-infinite design expression.

MDC 1.1.0 enables Material Theming in your Android app. All components support adjusting their color, typography, and shape through themes, styles, new attributes, and custom classes (such as MaterialShapeDrawable).

<style name="Theme.MyApp" parent="Theme.MaterialComponents.*">    <!-- Color attributes -->
<item name="colorPrimary">@color/green_500</item>
<item name="colorPrimaryVariant">@color/green_700</item>
<item name="colorOnPrimary">@color/black</item>
<item name="colorSecondary">@color/orange_500</item>
<item name="colorSecondaryVariant">@color/orange_300</item>
<item name="colorOnSecondary">@color/black</item>
<item name="colorError">@color/red_700</item>
<item name="colorOnError">@color/white</item>
<item name="colorSurface">@color/white</item>
<item name="colorOnSurface">@color/black</item>
<item name="android:colorBackground">@color/white</item>
<item name="colorOnBackground">@color/black</item>
<!-- Type attributes -->
<item name="textAppearanceHeadline1">
@style/TextAppearance.MyApp.Headline1
</item>
<item name="textAppearanceHeadline2">
@style/TextAppearance.MyApp.Headline2
</item>
<item name="textAppearanceHeadline3">
@style/TextAppearance.MyApp.Headline3
</item>
<item name="textAppearanceHeadline4">
@style/TextAppearance.MyApp.Headline4
</item>
<item name="textAppearanceHeadline5">
@style/TextAppearance.MyApp.Headline5
</item>
<item name="textAppearanceHeadline6">
@style/TextAppearance.MyApp.Headline6
</item>
<item name="textAppearanceSubtitle1">
@style/TextAppearance.MyApp.Subtitle1
</item>
<item name="textAppearanceSubtitle2">
@style/TextAppearance.MyApp.Subtitle2
</item>
<item name="textAppearanceBody1">
@style/TextAppearance.MyApp.Body1
</item>
<item name="textAppearanceBody2">
@style/TextAppearance.MyApp.Body2
</item>
<item name="textAppearanceCaption">
@style/TextAppearance.MyApp.Caption
</item>
<item name="textAppearanceButton">
@style/TextAppearance.MyApp.Button
</item>
<item name="textAppearanceOverline">
@style/TextAppearance.MyApp.Overline
</item>
<!-- Shape attributes -->
<item name="shapeAppearanceSmallComponent">
@style/ShapeAppearance.MyApp.SmallComponent
</item>
<item name="shapeAppearanceMediumComponent">
@style/ShapeAppearance.MyApp.MediumComponent
</item>
<item name="shapeAppearanceLargeComponent">
@style/ShapeAppearance.MyApp.LargeComponent
</item>

</style>

Learn more about how to implement theming here.

A host of new components from the Material Components library have been added to MDC 1.1.0. In addition to this, existing components are now styled according to the latest designs. If you’re using the Design Support Library or MDC 1.0.0 your components will automatically adopt these new styles. For example, text fields have a new default appearance (backed by user experience research).

Some of the new and updated components available in MDC 1.1.0 include:

System wide dark theme support was introduced in Android 10. Along with Material Design guidance, MDC enables Material dark theme out-of-the-box. It builds upon existing AppCompat DayNight functionality, so you don’t have to implement it from scratch:

  • Themes: All MDC themes now come in DayNight variants. These automatically switch between -night and -not-night resource qualifiers depending on the device configuration.
  • New colors: The default palette has been extended for dark theme. You should tweak colorPrimary and colorSecondary for your brand to be less saturated in dark themes. By default colorSurface and android:colorBackground use dark grey instead of black to reduce eye strain, make elevation shadows more visible, and ensure an appropriate contrast with text and other elements.
  • Elevation surface lightening: All relevant MDC components (and anything backed by a MaterialShapeDrawable for that matter) support brightening of their surfaces to convey elevation in dark theme. The white overlay transparencies from the guidelines map to elevation levels set on components.
  • Accessibility: MDC employs the Material Design concept of “on” colors — used to tint text, icons, and other content displayed on colors (eg. colorSurface and colorOnSurface). An important aspect of dark theme is to ensure there is sufficient contrast between a color and its corresponding “on” color. MDC now uses the recommended colors and opacities to ensure this is the case.
  • Primary and surface color switching: MDC components adhere to the guidance to make less use of the primary color in dark theme. This can be seen in app bars, for example, which use colorSurface (instead of colorPrimary) as their background tint in dark mode. This is backed by a new color attribute — colorPrimarySurface — which switches between colorPrimary and colorSurface depending on the mode, and a number of PrimarySurface widget styles.

Gesture navigation was also introduced in Android 10. Some MDC components tend to fall into the main gesture areas (such as BottomNavigationView and the swipe-up-from-bottom home gesture). Relevant components have been updated to take these gesture areas as well as the device orientation into account. Appropriate padding/margin values are automatically applied, using the WindowInsets API (on Android 10 and above), with opt-out APIs also available.

A lot of accessibility improvements have made their way into MDC components. This mostly comprises better support for TalkBack in the form of helpful content descriptions, focusability, and the order in which the various “parts” of a component are described to a screen reader user. For example, TextInputLayout now reads its hint, input, and helper or error text in the correct order.

What’s next for MDC?

We’ve heard your feedback about the cadence of MDC releases and the rate of response to issues. We’re committed to shipping more regularly and incorporating your important contributions. The next feature release of MDC — 1.2.0 — is well underway with multiple alpha releases out at the time of writing. Exciting new updates include Slider and ShapeableImageView components. As always, we encourage you to file bug reports and feature requests on GitHub. Also be sure to check out our Android companion example apps and Build a Material Theme.


We highly encourage trying out MDC 1.1.0. If you’re using its features in your Android app, leave a comment below or reach out to us on Twitter @materialdesign. We’d love to see it.

Google Design

Stories by Googlers on the practice of design.

Thanks to Barbara Eldredge

Nick Rout

Written by

Nick Rout

Developer Advocate (Material Design) at Google 🇿🇦

Google Design

Stories by Googlers on the practice of design. For editorial content and more visit design.google

More From Medium

More from Google Design

More from Google Design

More from Google Design

Implementing motion

More from Google Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade