What's new
Learn about new guidelines, components, tools, and announcements across platforms
2021
May
Design and build for large screens : New guidance for adapting layouts and components to work seamlessly on tablets and larger screens
February
Android - MDC-Android 1.3.0 : Stable feature release including progress indicators and time pickers
2020
December
Android - Progress indicators : Beta release of progress indicators
Combined component pages : Developer docs and design guidelines for components now live in one place, separated by tabs
Material Design Award winners : Moooi, Epsy, and KAYAK,
November
Time picker : Guidelines for an accessible component that helps users select and set specific times
Android - Time picker : Updated code and documentation for implementing time pickers
Flutter - Time picker : Updated code and documentation for implementing time pickers
October
Material YouTube channel : New home for video tutorials, livestreams, and Q&As
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
Design kits for Adobe XD : Download to start creating your own baseline and dark theme layouts in Adobe XD
Android - Material motion tutorial : Learn how to build beautiful transitions using the Material motion system and Kotlin
Understanding the type system : Video tutorial on how typography works in Material, and how to create a custom type system
Understanding the color system : Video tutorial on how color works in Material, and how to use it to express your brand
Android - MDC-Android 1.2.0 : Stable feature release including motion transitions and sliders
July
Sliders update : Improved accessibility, visibility, and alignment with emerging patterns – in guidance, and implementations on Android and Flutter
June
Dark theme tutorial : Learn how to craft a dark theme to complement your app’s light theme
Flutter - Slider widget update : Accessibility improvements to Flutter's Slider and RangeSlider
Submissions open for 2020 MDAs : Nominate your product for a Material Design Award
May
Android - MDC-Android 1.2.0 beta : Beta feature release including motion transitions and sliders
How to Find Device Metrics for Any Screen : Learn to calculate the right measurements for design across devices
April
Migrating to MDC-Android : A hands-on guide to migrating your Android codebase from the Design Support Library to MDC-Android
March
View prototypes in Gallery : New feature supports uploading and viewing prototypes created in Sketch
Gallery Plugin : New name for the Material Plugin, which lets you upload files from Sketch directly to Gallery
Material Theme Editor retired : This tool has been shut off
February
Material motion system : Guidance on designing and implementing the most common Material transitions
Type scale generator : New tool for creating and customizing your type scale, powered by Google Fonts
Flutter - Transition patterns : Code and documentation for implementing the most common Material transitions
Android - Transition patterns : Code and documentation for implementing the most common Material transitions
Material Theme Editor deprecation : We’re sunsetting the Material Theme Editor in order to expand our offering of theming tools and resources
Direct, a motion design tool : Get open source code for the tool Google designers and developers use to collaborate on motion design
Implementing motion : An introduction to our new motion system and transition patterns
Android - MDC-Android 1.1.0 : Our Android component library is officially stable
January
Navigation rail : A compact new component for side navigation in desktop views
Using Material Density on the Web : A hands-on guide to applying default, comfortable, and compact density to your application
2019
December
State of Design Systems 2019 : A community survey on the emerging trends, evolving uses, and growing importance of design systems
Density : Updated guidance for making global density changes to your UI
Cross-platform adaptation : Updates on adapting Material for iOS interfaces
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 - Google Fonts package : An easy way to use hundreds of free, open-source fonts in your Flutter apps
Flutter - Example apps : Open-source code and documentation for four fully built sample applications
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
Text field research : An overview of the findings that informed the current text field design
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
The evolution of Material Design’s text fields : How user studies reshaped the design of Material’s open-source text fields
October
How accessible design helps everyone : New guidelines help developers & designers prevent mistakes that make websites and apps difficult to use
Accessible imagery : New guidance for alt tags, color contrast, and making imagery understandable to more users
Material Design Award winners : Ruff, Reflectly, Scripts, and Trip.com
Material email newsletter : Our first round-up of recent Material Design news and updates
Android - Android components enter beta : Code and documentation for Android Material Components are stable and officially out of alpha
Android - MDC Android version 1.1.0-beta01 : Our Android library officially enters beta
September
Android - Date pickers : Documentation and code for building date pickers
Flutter - Banners : Documentation and code for building banners
Flutter - Toggle button : Documentation and code for building toggle buttons
New Features and More Accessible Data Tables : Updated interactions, new customizations and expanded access for users – dig into Material Design’s new-and-improved data tables
August
Component directory : Top-level components section including design guidance and links to developer documentation
Downloadable design files : Kits for creating baseline and dark theme layouts in Sketch and Figma
To Make Apps Accessible, Make Them Compatible with Different Devices : How to design with old operating systems, varying contrast, low battery life, and damaged screens in mind
July
Resources : Launched an updated Resources section, making it easier to find available tools, downloads, interactive projects, and additional Google guidelines
Web - Data tables : Documentation and code for building data tables
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.
Data table guidelines : Updates to increase touch targets, making data tables more accessible
June
Dark theme case studies : Explore new color palettes, revamped contrast, and increased legibility as four Google products adopt Material’s dark theme
Six principles for designing any chart : An introduction to Google’s new data visualization guidelines
Web - Making Material Your Own : How to make a Material Theme on the web
Data visualization guidelines : How to communicate dense and complex information in graphical form
Date pickers : Component letting users select a date, or a range of dates
May
Making the Case for Accessibility : How to convince your team to invest in more accessible design
Top design videos from Google I/O 2019 : The playlist of every design presentation from Google I/O 2019
Dark theme : Guidelines for creating low-luminance user interfaces
Design for machine learning-powered features : Guidance on designing object detection and barcode scanning
Sound design : Guidelines for using audio to augment your product’s user experience
Android - Dark theme : Code and documentation for implementing a dark theme
iOS - Banners : New beta component for banners, which display a prominent message and related actions
Build a Material Theme : Two interactive projects for making your own Material theme for Android and the web
Dark theme design tutorial : Learn how to design dark UIs with Figma
Dark theme design file : Download Sketch and Figma files for designing dark layouts
Product sound files : Download audio clips for notifications, alarms, and more
AI and Design, Putting People First : A discussion on how designers can harness and humanize AI’s vast potential
Designing Sound and Silence : Introducing Google’s first-ever public guidelines for designing product sounds
New material.io : A redesigned Material.io puts resources for designers, developers, and product managers front and center
April
Guide to getting started : Quick intro and links to top videos, tutorials, tools, and more
Redesigned homepage : A new homepage for material.io
March
Material Design in 60 seconds : Design Advocate Yasmine Evjen explains everything you can do with Material, in 60 seconds
Android - Toggle button : Alpha component for grouping a series of related actions
Flutter for Design : Flutter’s expressive and flexible Material widgets, as well as the evolution of design engineering in Flutter
Web - MDC Web version 1.0 : Officially bringing Material Components for the web out of beta
Web - Component catalog : Updates to demo the most popular components in our web catalog
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
Android - Extended FAB : Variant of the floating action button capable of containing text
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
Guide to Material Motion in After Effects : A basic sticker sheet and workflow for animating user interfaces
Flutter - Fortnightly demo app : A new example showcasing Material Theming, custom typography, and text-heavy UI design and layout
January
Web - Snackbar : Update to improve behavior and appearance
2018
December
Building the Shape System for Material Design : A behind-the-scenes look at engineering the shape system for Material Components
A Material Button Is More Than a Button : How to style (and differentiate) buttons using Material Theming
How to use shape : Improve your user’s experience and communicate brand
Flutter - The evolution of Material Components for Flutter : How Flutter supports great design
November
You need a shape system : How to use shape to enhance your brand, direct attention, and support interactions
Web - Component catalog : Interactive demos and handy links to documentation, code, and design guidelines
October
2018 Material Design Award Winners : KptnCook, Lyft, Simple Habit Meditation, Anchor
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
Web - Select menus : New text field component helping users select from a list of options
Flutter - Expanding bottom sheet : Documentation on how to build this advanced component for accessing features like selection queues, chat, and other content
Flutter - Material Theming : Updated code for improved Material Theming
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
Collaborate and share Gallery projects : Update to collaborate and share projects with people outside of your organization
August
iOS - MDFInternationalization : API for iOS that makes it easier to support RTL languages and bi-directional text
iOS - Navigation drawer : Documentation and code for navigation drawer, providing access to destinations in your app
Web - Navigation drawer : New implementations including permanent, dismissible, and modal navigation drawers
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
Android - Component typography : Updated to enable typography theming in all Android components – including buttons, tabs, and menus
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
Flutter - Selection controls : Improved accessibility support for selection controls including checkboxes, radio buttons, and switches
May
Design talks from Google I/O 2018 : The playlist of every design session from Google I/O 2018
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
Icons for Android O : How to create them
Settings : Simplified guidance on how they’re grouped, titled, and styled
April
Color system : Updated guidance on usability
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
App shortcut icons : Specs on how to create app shortcut icons for the home screen
Help and feedback : How to indicate, craft, and place help content
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
Confirmation and acknowledgement : When and how to acknowledge user actions
Navigation : New details on how to use the Up and Back buttons as part of your navigation strategy
Full-screen mode : Using Lean Back, Immersive mode, and Lights out interactions
May
Motion : Detailed examples and specs on material motion principles, duration and easing, transformations, choreography, and customization
Growth & communications : Guidance on user engagement, retention, and acquisition
Expansion panels : Describes lightweight containers used for creating flows and editing content
March
Bottom navigation bars : Switching between top-level views
Android - Split screens : The display of two activities at once (Android only)
Accessibility guidance : Expanded to include color and contrast, sound, motion, hierarchy and more
Password input : How to display it on text fields
February
Customizing your app’s color palette : Expanded guidance with more examples
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
Text fields : Adds guidance on required text fields
Whiteframes : Added for Sketch
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
Notifications : Includes formatting guidance for timestamps
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
Settings : Includes a usage overview
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
Launch screens : Guidance for implementing placeholder UIs
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
Launch screens : Branding and placeholder UI content
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
Authentic motion : Describes easing terms in more detail
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.
Floating Action Button : Moved into its own section, adding new details about behavior and transitions
App structure : How to structure your app
Component sticker sheet : Design file for Adobe After Effects
Data truncation and redaction : How to truncate and redact information
Writing guidelines : How to write for Settings
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
Scrolling techniques : Guidance for overlapping content