Material Design Components for Android 1.1.0 Are Now Available
Material Theming, new components, dark theme support, and more
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.
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
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.
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
<style name="Theme.MyApp" parent="Theme.MaterialComponents.*"> <!-- Color attributes -->
<item name="colorOnBackground">@color/black</item> <!-- Type attributes -->
</item> <!-- Shape attributes -->
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
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
-not-nightresource qualifiers depending on the device configuration.
- New colors: The default palette has been extended for dark theme. You should tweak
colorSecondaryfor your brand to be less saturated in dark themes. By default
android: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.
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
colorPrimary) as their background tint in dark mode. This is backed by a new color attribute —
colorPrimarySurface— which switches between
colorSurfacedepending on the mode, and a number of
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.
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
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.