1. Before you begin
Explore the Material Design Layout and Adaptive design principles to help you achieve coherent experiences across screen sizes.
What is Adaptive Design and why should I use it?
Adaptive design is the practice of designing layouts that adapt to specific breakpoints and devices. Usually we consider the width of the device to determine where the layout should change, or adapt.
While not every app needs to be available on every screen size, it does allow for more freedom for your users with an increased experience in regards to ergonomics, usability, and app quality.
As a designer, adapting key screens of your app to larger formats can help developers translate the rest of the app to more contexts.
What you'll learn
- Learn how to use Material Design's new adaptive design principles to design for large screens.
- You'll learn how to take keyscreen designs from mobile to large screen.
- Adaptive concepts you can use to apply to your own designs.
- How to design with new canonical layouts.
Prerequisites
For this lab we'll be building on some foundational design concepts.
- Knowledge of foundational design concepts: Grid, Type Scale, Material Components
- Knowledge of Figma
What you'll need
2. Get started
Setup
Next, you'll need to set up your design environment.
To get started you'll need to access the Adaptive Designlab Figma file. Everything you need for the lab is in the Figma file. You can either download and import the file or duplicate it from the Figma community.
First, sign into Figma or create an account.
Duplicate from Figma Community
Navigate to the Design an Adaptive Layout with Material Design or search for Design an Adaptive Layout with Material Design within Figma Community. Click Open in Figma to copy the file into your files.
File Layout
Look around the file. You'll notice that the file is self contained, starting with an introduction. Each section is divided into a row of artboards that are linked together, with some core concepts for the section followed by exercises. The sections and exercises build on each other, so should be completed sequentially.
This codelab will guide you through those concepts and exercises in greater detail. If you are new to adaptive and/or Material Design I suggest reading along with the codelab.
Start with the Intro artboard, there are buttons that link the artboards together in order, access the link by clicking on the button.
3. Understanding Layout
Material 3 calls for adapting an app's layout to different breakpoints, or window size classes, with the use of canonical layouts and spacing methods. Rather than utilizing the responsive grid of M2.
Don't lock layouts to fixed sizes at each breakpoint, layouts still need to flex in between these size classes to ensure a solid experience across numerous devices.
Window size class
A window size class is an opinionated breakpoint, the window size at which a layout needs to change to match available space, device conventions, and ergonomics.
All devices fall into one of three Material Design window size classes: compact, medium, or expanded.
Layout regions
Most Android apps consist of regions referred to as the system bars, the navigation area, and the body.
System bars are an integral part of the device interface and should be included in any app design and shown in the correct context across devices to best portray how the app's layout will interact with the system UI and for accurate implementation.
Navigation represents the different affordances that allow a user to navigate within your app, access important actions, or across the Android platform. The navigation region can hold components such as the navigation drawer, rail, and bar.
The body region contains most of the content in an app. Body content is composed of additional groupings and layout parameters or panes. It must continue under navigation and system bar regions.
Margins
Margins are the space on the left and right edges. Margins can be fixed or scale between sizes.
4. Window class size
We'll start out by adjusting the window class size of the provided mockup to a medium window class size.
- Expand the "Exercise Layout 1" frame, to the right, from Compact (mobile) to 1440 dp for Expanded (tablet).
- In the Grid styles dropdown, change from small to Large (body regions off).
- With the device size and grid adjusted, adjust the body region's content margins as needed.
Your grid is now set up for a large screen device and ready to start adapting the layout! For now, we'll move to scaling to see how content should react at larger screen sizes.
5. Adapting Composition overview
Notice how the content and elements are adjusting on the exercise layouts: Fluidly expanding to match the width. Fluidly resizing to larger screens can create unusable layouts, like in these layouts where line lengths are too long and become unreadable.
Principles of Visual Grouping and Containment can guide how elements should be rearranged in the larger space. Keep in mind, larger screens can have increased visual noise as a result of more visible content. Sticking to a max line length of 60 characters will assist readability.
Spacing
Similar items can be grouped together with white space or visible division to help guide the user through content. Implicit containment uses white space to visually group content to create container boundaries while explicit containment uses objects like divider lines and cards to group content together. Margins are the spacing used for left and right edges, further spacing techniques include:
Panes are a grouping within the body region.
Columns are flexible with the amount changing at a breakpoint.
Column grids still hold an important part of your layout, either within canonical layout panes or to help build the initial structure.
Spacers are similar to gutters, but separate panes.
Padding is smaller spacing within components.
6. Scaling
The detail layout has been fluidly scaled up with the large screen creating a layout that doesn't take advantage of the larger screen size. We can use visual grouping on the column grid to better arrange the elements. A column grid has already been setup for the layout.
- Align and organize content onto the column grid.
- To help with the larger device, we'll need to scale the content. Adjust type scale for legibility on large screens: Update the Title to Display large, Description body copy to 24sp, and all other text to Body large.
- The description icon seems small in the new layout, scale to 40x40dp for the space.
7. Grouping and Containment
The layout is looking more readable now that the composition has been scaled and aligned to the column grid, but using grouping and containment will help take advantage of the screen size.
- Scale the image to 6 columns, left aligned.
- Group the title and care facts to the right of the image spanning 5 columns. Keeping grid alignment. Leave 24 DP space under the header group to create an implicit boundary.
- For the description content use a 60 character line length to determine column span (11 cols). With 1 leading column of white space. Create a visual container with a surface container color role.
8. Component Behavior overview
Components can behave differently at various breakpoints. Adapting their width, visibility, or event switching components.
Some components, like buttons, may not handle the amount of space in a 12 column layout and may need to maintain a set width or be switched out to maintain readability and usability. For example, this button should have been fixed to a certain width regardless of the larger screen size, instead of having fluid adaptation.
Responsive patterns are common methods that help components adapt to their space.
Reposition is one of those patterns, where elements reflow on the screen to take advantage of the additional screen space.
Reflowing cards from a vertical orientation, moving a FAB to the nav rail, or dividing tabbed content into one space are all examples of Repositioning.
Components can adapt by switching out for functionality equivalent components that are better suited for large screens.
Navigation components that work on mobile, create ergonomic issues on large formats.
Canonical layouts
Canonical layouts are designs for common screen layouts across all window size classes. Feeds, List Detail, and supporting pane are three such canonical layouts. These layouts make ideal starting points across window class sizes.
9. Responsive Patterns
Right now components are fluidly expanding to fill the space. Using the reposition pattern and grouping, we'll adapt the content for the larger space. We'll Reposition cards on Today screen to take advantage of the horizontal space.
- Move the Care tip card above the tasks and wishlist.
- Consider how Tasks and Wishlist could expand vertically at different rates, adapting them to 6 and 5 columns and horizontally will make better use of the space. Wishlist is already visually contained in a pane.
10. Adaptive Navigation
The designs utilize a bottom navigation, so for this design lab we'll maintain the navigation model and bring in a navigation rail.
- Remove the Bottom Navigation bar
- Find the Navigation Rail component (in the Assets panel) and drop it into the navigation space.
- Update labels and icons to match bottom navigation.
- Style to match the rest of the layout.
11. Canonical Layout Feed
Currently the layout is fluidly displaying one list, but we have enough horizontal screen space to utilize a more interesting Feed canonical layout.
- The navigation and top bar have already been adapted to medium size, so we can focus on body content. A Feed layout uses a grid composition. Update the list items to Stacked Cards.
- Cards don't have to be uniform in a feed. Allow the first card to act as a featured card, spanning 11 columns. The rest can shrink to 5 columns with 24 dp spacing. (Using Auto Layout Wrap can help)
12. Canonical List/Detail
The layout is now on a larger device, so there is space to show a detail view for one of the plants whenever the expanded layout is shown.
- Create a pane to display the detail. Within the margins, create a 5 column container. Set it to a surface container or higher.
- Copy the philodendron content from the scaling exercise above into the pane. Add 16 dp padding to the pane.
- Update the plant title to display small and the rest to body medium or large.
- The content can flow vertically, with the hero photo filling the space horizontally.
13. Congratulations
Great job on using Material Design Adaptive principles to take designs from small screens to large screens.
If you've got questions, feel free to ask us any time using @MaterialDesign on Twitter.
Stay tuned for more design content and tutorials on youtube.com/MaterialDesign