1. Before you begin
Explore the new Material Design Adaptive design principles to help you achieve consistency across screen sizes. In this design lab you'll take a mobile design to tablet format, learning about the responsive grid, adaptive composition patterns, and using the right components.
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. Both Web and Android utilize responsive design concepts, like flexible grids and images, to create layouts that better respond to their context.
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
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 Duplicate in the top right corner to copy the file into your files.
Duplicate Figma File 
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. Responsive Column Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
1 Column, 2 Gutter, 3 Margin
Columns, gutters, and margins
Columns
Content is placed in the areas of the screen that contain columns. These columns lend structure to the layout, providing convenient structure to arrange elements.
Column width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it's a breakpoint for mobile, tablet, or another size.
The column-based grid responds easily across screens.
Gutters
Gutters are the spaces between columns. They help separate content. Gutter widths are fixed values at each breakpoint range. To better adapt to the screen,
gutter width can change at different breakpoints. Wider gutters are more appropriate for larger screens, as they create more whitespace between columns.
Layout grids can be customized for your layout needs.
Layout regions
A column grid helps create layout regions for information hierarchy. App bar, Body, and Navigation can make up 3 such regions in a responsive layout.
Often, the responsive grid impacts the body of the layout the most, how content elements are arranged on the grid can change for each breakpoint layout.
4. Setting up the Column Grid
Column Grid from extra small to small
In the First Exercise we'll explore how the grid can adapt to a Small Breakpoint going from 4 columns to 8.
Take your grid from 360dp with 4 columns to 600dp with 8 columns.
- Expand the "Exercise Layout 1" frame from 360dp Extra Small breakpoint (mobile) to 600dp Small breakpoint (tablet).
- Unhide the hidden Columns and Gutters layers by clicking on the eye icon.
- Select Gutters adjust to 24dp for 600dp breakpoint.
- Adjust Margins from 16dp to 32dp.
Column Grid small to medium
Now that your grid is 8 columns for Tablets, let's adapt the grid to Medium breakpoints for larger screens. This will be the column grid used for the rest of the exercises.
- Expand the frame from 600dp to 1280dp.
- Unhide the hidden Columns and Gutters to make 12 columns.
- Adjust Margins from 32dp to 200dp.
Your grid is now set up for a large screen device and ready to start adapting the layout!
In the next section we'll discuss more on Composition of elements on the Column Grid.
5. Adapting Composition overview
Notice how the content and elements are adjusting: 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 becoming 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.
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.
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. The 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 60sp, Description body copy to 24sp, and all other text to 20sp.
- 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 6 columns. Keeping grid alignment. Leave 40dp 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.
8. Component Behavior overview
Components can behave differently at various breakpoints by adapting their width, visibility, or even 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.
Component Switching
Components can adapt by switching out for functionality equivalent components that are better suited for large screens.
Navigation components that work on mobile can create ergonomic issues on large formats.
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 and the column grid.
- Consider how Tasks and Wishlist could expand vertically at different rates, adapting them to 6 columns. and horizontally will make better use of the space.
- Move the Care tip card above the other two cards.
- Adjust the internal vertical density (spacing between items) on the wishlist card to 36dp.
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.
- Find the Navigation Rail component and drop it into the navigation space.
- Update labels and icons to match bottom navigation.
- Style to match the rest of the layout or keep it to the surface color.
11. Putting it all together: Adaptive Component and Layout
Now we can combine adaptive concepts to take this tabbed list layout for the Plant section to a fully adaptive layout.
- Unhide the rest of the columns and gutters to reveal a 12 column grid. Margins have been already updated for the larger breakpoint. Lock the Grid layer.
- Currently the layout is fluidly displaying one list, but we have enough horizontal screen space to divide the tabs and display both lists. Drag the Wishlist layout from below to the drop target.
- Remove your tabs and add labels above each list, aligning them with your grid.
12. Continue Adapting
Everything still looks small on the screen. Let's push the layout a little further with additional component switching that will make composition scaling easier.
- Cards would allow for the photos to have greater impact. Remove list / my plants. Switch with the plant cards below. Keeping the My Plants to 6 columns overall, but play with alternating card width so that every third card is 6 columns.
- Scale the type in the Wishlist to 20sp to match previous type scaling.
- Style the Wishlist to match the cards, in the inspector panel: Unhide the Fill, Unhide Drop Shadows, and change the Auto Layout padding around items to 16.
- Remove the FAB from its current placement and unhide the FAB in the Nav Rail.
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