What's new

Learn about new guidelines, components, tools, and announcements across platforms


2021

May

February

2020

December

November

  • Time picker: Guidelines for an accessible component that helps users select and set specific times

October

September

  • Material blog: New space on material.io for news, guides, updates, and more

August

  • Android - Compose Theme Adapter: New library to ease migration and interoperability with Jetpack Compose by extracting color, type, and shape theming values

July

  • Sliders update: Improved accessibility, visibility, and alignment with emerging patterns – in guidance, and implementations on Android and Flutter

June

May

April

  • Migrating to MDC-Android: A hands-on guide to migrating your Android codebase from the Design Support Library to MDC-Android

March

  • Gallery Plugin: New name for the Material Plugin, which lets you upload files from Sketch directly to Gallery

February

  • Type scale generator: New tool for creating and customizing your type scale, powered by Google Fonts

January

  • Navigation rail: A compact new component for side navigation in desktop views

2019

December

  • Density: Updated guidance for making global density changes to your UI
  • Web - Density demo: Interactive demo showing Material Components with three levels of density
  • Get started: Updates to quickly get up and running with Material
  • Flutter Interact: A December 11 event for Flutter developers and designers to interact, innovate, and collaborate with the global community

November

  • Beta design guidance: Backdrop, side sheet, and six other design elements are now marked “beta” – here’s why
  • Icon design templates: Downloadable Adobe Illustrator files for creating your own product and system icons
  • Beta design guidance: Backdrop, side sheet, and six other design elements are now marked “beta” – here’s why

October

  • Accessible imagery: New guidance for alt tags, color contrast, and making imagery understandable to more users

September

August

  • Component directory: Top-level components section including design guidance and links to developer documentation

July

  • Resources: Launched an updated Resources section, making it easier to find available tools, downloads, interactive projects, and additional Google guidelines
  • Material RangeSlider in Flutter: what a range slider is, why you might use it, and how you can use Material Theming to customize the behavior and appearance of the Flutter RangeSlider.

June

  • Dark theme case studies: Explore new color palettes, revamped contrast, and increased legibility as four Google products adopt Material’s dark theme
  • Date pickers: Component letting users select a date, or a range of dates

May

  • Dark theme: Guidelines for creating low-luminance user interfaces
  • Sound design: Guidelines for using audio to augment your product’s user experience
  • iOS - Banners: New beta component for banners, which display a prominent message and related actions
  • New material.io: A redesigned Material.io puts resources for designers, developers, and product managers front and center

April

March

  • Flutter for Design: Flutter’s expressive and flexible Material widgets, as well as the evolution of design engineering in Flutter

February

  • Android slices: Guidance for displaying small, customizable search content in the Android OS
  • Web - Card: Behavior updated to align with guidance across all platforms
  • iOS - Ripple: Improved behavior, appearance, and state support of the visual ripple
  • Web - Text field: Update to enable the display of character count, as well as a text field variant without a built-in label
  • Motion design kit: Download files for designing UI motion in After Effects – containing Material components, baseline UIs, and navigation transitions

January

2018

December

November

October

  • Bottom navigation: Updated guidance about differences in behavior between Android and iOS
  • Expanding bottom sheet: Displays selection queues, chat features, and other content in a small persistent container
  • Flutter - Backdrop: New component appearing behind other surfaces in an app, displaying contextual and actionable content

September

  • Web - Dialogs: Updated the size and layout to automatically adjust to the amount of content and screen space

August

  • iOS - Navigation drawer: Documentation and code for navigation drawer, providing access to destinations in your app
  • iOS - Action sheet: Documentation and code for applying Material principles to the standard iOS notification pattern
  • Web - Menus: Updated to have more flexibility in positioning, as well as support for menu item icons and selection groups

July

  • Web - Tabs: Updated to make them more performant and support theming with color and typography

June

  • iOS - VoiceOver support: Added for auditory descriptions of onscreen elements including app bars, sliders, and text fields

May

  • Material Components: Launched component documentation and code for Android, iOS, the web, and Flutter
  • Making More with Material: Get to know Material Design’s new end-to-end features so you can design flexibly, develop across platforms, and customize more easily
  • How Google created a custom Material theme: Product teams from Gmail, Google News, Google Pay, and Google Home detail how Material Theming creates a cohesive, branded experience — and a roadmap for future redesigns.
  • Material partner studies: Learn how apps like Lyft, Genius, NPR, Pocket Casts, and Zappos bring Material’s new expressive capabilities to life
  • Material Theming: Launched the new ability to systematically customize Material Design to better reflect your product’s brand
  • Material studies: A showcase of the flexibility of Material Theming and components to create expressive and unique apps
  • Material Theme Editor: A Sketch plugin for creating your own branded symbol library and apply global style changes to color, shape, and typography
  • Gallery: A collaborative tool for uploading design work, getting feedback, and tracking revisions
  • Icons: Download five stylized sets of system icons

2017

September

  • Offline states: How to customize apps for users without internet access
  • Notifications: Updated guidance on categorizing notifications into channels and a new messaging template
  • Settings: Simplified guidance on how they’re grouped, titled, and styled

April

  • Color Tool: New tool for creating color palettes and testing accessibility
  • Text fields: Update expands on usage basics and introduces text field boxes for increasing text field discoverability
  • Bidirectionality: Added resource links to developer guidance on right-to-left (RTL) icons

2016

December

  • Platforms: When and how to adapt apps to Material Design, and when to adhere to platform conventions
  • Bidirectionality: Updated guidance on mirroring UI content and icons in right-to-left (RTL) languages
  • Accessibility: New guidance on sound, controls, labeling elements, and testing
  • Selection: Detailed examples on item selection, toggling, and styling

August

  • Notifications: Revised for Android N, including new content areas, interactions, user controls, and short text input
  • Widgets: Guidance on user engagement, retention, and acquisition
  • Navigation: New details on how to use the Up and Back buttons as part of your navigation strategy

May

  • Motion: Detailed examples and specs on material motion principles, duration and easing, transformations, choreography, and customization
  • Expansion panels: Describes lightweight containers used for creating flows and editing content

March

February

  • Color specs: Updates for dialog errors, text selection, and text field labels
  • Design files: Updated with text field colors, month and time pickers, and bottom toolbars (for Photoshop, Illustrator, and Sketch)

2015

December

  • Responsive UI: Includes a pattern on positioning and more examples of responsive patterns
  • Punctuation: New guidance on en dashes and parentheses

October

  • Steppers: How different types of steppers convey progress through numbered steps
  • Chips: New guidance on chip movement and deletion

September

  • Navigation: New guidance on navigation hierarchy and structure, new navigation patterns, and combined navigation patterns
  • UI color application: How transparent text maintains legibility against different background colors
  • Buttons: Guidance on toggle buttons and flat button behaviors
  • Tabs: Guidance on text sizing in tabs

August

  • Permissions: Guidance on permissions groups, runtime permissions, request patterns, and how to address permissions when they are denied
  • Bottom sheets: Descriptions of persistent and modal bottom sheets, alternative display options, and desktop and tablet display using increments

June

  • Notifications: Guidance for tailoring notifications to users, including peeking notifications
  • Fingerprint: Guidance on implementing Fingerprint as an authentication option
  • Cards: More image examples of card UI controls, sliders, and tabs
  • Settings: Additional guidance for labels and secondary text

May

  • Adaptive UI: Responsive layout guidance, grids, breakpoints, and patterns
  • Empty states: Guidance for states when regular content can’t be shown
  • Navigation: How to guide users through different parts of your app
  • Elevation and shadows: Renamed from “Objects in 3D space,” adding new details about elevation changes

April

  • Data tables: How to display sets of raw data, especially in desktop enterprise products.
  • Units and measurements: The usage of device-independent pixels, scaleable pixels, as well as concepts like pixel density.
  • Typography: Additional guidance on style and line height for dense and tall languages
  • Cards: More specs for laying out actions and content
  • Dialogs: Additional layout guidance
  • Tabs: Guidance around label content and more complete sizing specs