Design an Adaptive Layout with Material Design

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.

fddd8daffd62f9b3.png

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

30bbe1f749862a36.png

What you'll need

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 fac57508a874d283.png

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.

800154fe7f63e2b1.png

The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

7ea9079df4f5aa9a.png

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.

9363aafc99907a18.png

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.

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.

78d031d2013690ba.png

Take your grid from 360dp with 4 columns to 600dp with 8 columns.

  1. Expand the "Exercise Layout 1" frame from 360dp Extra Small breakpoint (mobile) to 600dp Small breakpoint (tablet).
  2. Unhide the hidden Columns and Gutters layers by clicking on the eye icon.

c7bea3b3a8659d2e.png

  1. Select Gutters adjust to 24dp for 600dp breakpoint.
  2. 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.

8e8ae247584b9967.png

  1. Expand the frame from 600dp to 1280dp.
  2. Unhide the hidden Columns and Gutters to make 12 columns.
  3. Adjust Margins from 32dp to 200dp.

Your grid is now set up for a large screen device and ready to start adapting the layout!

6590c382aa42e3bc.png

In the next section we'll discuss more on Composition of elements on the Column Grid.

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.

17840af249581726.png

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.

4dd24a877de2e0e3.png

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.

caba9a5e2b7c9cd0.png

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.

5d956ab4d521bebc.png

  1. Align and organize content onto the column grid.
  2. 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.

9337663e653830b9.png

  1. The description icon seems small in the new layout, scale to 40x40dp for the space.

7ab3e29d414fbb0b.png

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.

313e8120feb0384a.png

  1. Scale the image to 6 columns, left aligned.
  2. 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.

b9ecd5187c6c76e7.png

  1. For the description content use a 60 character line length to determine column span (11 cols). With 1 leading column of white space.

3bc6736c9aa9908b.png

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.

b0152ce9f4e4cf0e.png

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.

d65e04172d9ee193.png

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.

21c338aac2cadfbf.png

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.

15615285e785f771.png

  1. 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.

107a102758ad53.png

  1. Move the Care tip card above the other two cards.
  2. Adjust the internal vertical density (spacing between items) on the wishlist card to 36dp.

a01294584cf592f3.png

The designs utilize a bottom navigation, so for this design lab we'll maintain the navigation model and bring in a navigation rail.

54f55084b82cca3f.png

  1. Find the Navigation Rail component and drop it into the navigation space.

e3e30bcc6e690392.png

  1. Update labels and icons to match bottom navigation.
  2. Style to match the rest of the layout or keep it to the surface color.

b750cba1e9774116.png

Now we can combine adaptive concepts to take this tabbed list layout for the Plant section to a fully adaptive layout.

49c327aa7af70455.png

  1. 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.
  2. 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.

ea7863d4c1fbd4d0.png

  1. Remove your tabs and add labels above each list, aligning them with your grid.

8a72f1ab000ff054.png

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.

a0b316eece96ce4e.png

  1. 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.

fe97827c131f6bbe.png

  1. Scale the type in the Wishlist to 20sp to match previous type scaling.
  2. 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.

eed99d4570cd0068.png

  1. Remove the FAB from its current placement and unhide the FAB in the Nav Rail.

ac5236d7074f43f2.png

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