Material Components for Android 1.1.0 is now available
Material Theming, new components, dark theme support, and more
We’re excited to announce the release of Material Components for Android (MDC-Android) 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.
Take a look at our guide that helps you migrate your codebase from the Design Support Library to MDC:
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 version 1.1.0 of MDC, there has never been a better time to migrate.
Material Theming
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.
New components
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:
Dark theme support
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
DayNightvariants. These automatically switch between-nightand-not-nightresource qualifiers depending on the device configuration. - New colors: The default palette has been extended for dark theme. You should tweak
colorPrimaryandcolorSecondaryfor your brand to be less saturated in dark themes. By defaultcolorSurfaceandandroid:colorBackgrounduse 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
MaterialShapeDrawablefor 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.
colorSurfaceandcolorOnSurface). 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 ofcolorPrimary) as their background tint in dark mode. This is backed by a new color attribute —colorPrimarySurface— which switches betweencolorPrimaryandcolorSurfacedepending on the mode, and a number ofPrimarySurfacewidget styles.
Android 10 gesture navigation support
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.
Accessibility improvements
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 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.
