Ahead of I/O 2021 next week, Google has updated Material Design to expand its “adaptive capabilities to help prepare your apps for all form factors,” namely large screens. Most developers today are focused on phones, but the company is specifically looking at tablets and desktops. This takes the form of new guidance and design documents, as well as updated components.
The goal is to make it easy for apps to “scale and adapt while maintaining consistent layouts using components optimized for each device.”
As a system capability, layout and component responsiveness are now baked into our Material guidelines. Our layout guidance, along with components and their design documentation, have all been updated to describe a method of creating interfaces that can adapt to changes in screen size and shape.
Google begins by explaining the fundamentals of layout, starting with the three primary aspects of a Material app: body, navigation, and app bars. There’s guidance on how to work on large screens, given “more space available to display content and actions.” The “Responsive layout grid” and “Component behavior” documents have also been updated.
Meanwhile, the components themselves have been updated to better scale and adapt, with guidance available in each article. The full list of what’s changed is below, while the navigation rail (as seen on photos.google.com today) has been updated and is available on Android (1.4.0-beta release), in addition to Flutter.
- App bars (top)
- Bottom navigation
- Buttons
- Cards (Implicit and explicit containment subsections have also been added under anatomy.)
- Dialogs
- Image lists
- Lists
- Menus
- Navigation drawers
- Bottom sheets
- Side sheets
- Snackbars
- Tabs
- Text fields
Google has also updated the Material Baseline Design Kit on Figma. More will be shared at I/O 2021, with sessions from the Material Design team about large screens:
- 5 things you can do to prepare your app for large screens
- What’s New in Foldables, Tablets, and Large Screens
FTC: We use income earning auto affiliate links. More.
Comments