Background and Intro
Android OS, unlike iOS, has always been designed with the assumption that it will run on many different devices. While iOS only runs on Apple’s own iPhone and iPad, Android is installed on tons of smartphones and tablets made by companies other than Google, and is used in all sorts of environments.
On top of that, the fact that Android apps can now run on Chromebook (Chrome OS) and Windows 11, along with the launch of foldable devices (folding smartphones) and so on, suggests Android will be used across an even wider range of display sizes going forward.
Just a small sample of devices that run Android
Material Design has also placed greater importance on multi-device and foldable support, with many guidelines added recently. This time, I’ll summarize the new official guidelines and link out to relevant resources.
Related article:
A Quick Summary of Material Design 3 | WEBA
What Even Is a Foldable Device (Folding Smartphone)?
You’ve probably been hearing more about folding smartphones lately. These are devices whose screens can bend and fold thanks to flexible OLED displays (some use LCDs with physical hinges instead).
Since they can be used in all sorts of states—small screen, large screen, vertically split, horizontally split—you have to consider an enormous range of UI states with just one device. A real designer’s headache.
They’re still extremely expensive, often more than twice the price of a typical high-end smartphone. The user base probably won’t grow much for a while, so you don’t really need to worry too much about foldable support itself just yet.
There are also rumors—coming and going—that Google is officially making a “Pixel Fold” device…
Android 12L
That said, as I mentioned, large devices in general (not just foldables) are clearly increasing. Google has announced Android 12L, an OS optimized for tablets, scheduled for the second half of 2022.
12L features and changes | Android 12 | Android Developers
Along with optimizations to the notification area and lock screen, multitasking aids like split-screen and a taskbar have been beefed up. The behavior seems heavily influenced by iPadOS.
Two-column display of notifications and quick settings
Taskbar display, split-screen via drag-and-drop
Split layout for the Settings screen
UI Design Considerations
Now we’re getting to the main part. As I mentioned, you have to assume apps will be used not only on larger screens but also at aspect ratios you’ve never seen before due to split-screen layouts. I’ll summarize what we did for our app, along with the major official guidelines, and lay out what you can do.
The Three Steps Material Design Recommends
Google has published several articles on supporting larger screens (linked below). Three steps in particular are emphasized consistently across them.
Layout Grid / Reconsider Your Column Grid
Material Design defines a Layout Grid. It’s a concept used since the days of ancient Web Design, but turning columns into a grid-based rule makes it much easier to flexibly change layout per breakpoint (device width).
Adaptive Composition / Scale the Compositional Elements
A single screen typically contains multiple compositional elements like the following:
- Global menus such as Bottom Navigation
- Information display areas such as Top App Bars
- Scroll regions made up of components like Cards
Material Design recommends rethinking the overall placement of these elements based on screen size.
- When placing multiple elements on a large screen, use cards or dividers to make groups visually distinct
- Cap the maximum line length at around 60 characters per line to keep text readable
Reconsider the placement and behavior of compositional elements based on screen size—including adopting things like Navigation Rail, which I’ll mention later.
Related articles:
- Foldables – Material Design 3
- Material Design
- 5 Exercises to Prepare Your App for Large Screens - Material Design
Component Behavior / Per-Component Adjustments
In Material Design, individual components also flexibly adjust their behavior based on the screen. For example, Snackbars span the full screen width on mobile devices, but a maximum width is defined for large screens.
In recent updates, the following Component pages have added definitions for large screens:
App bars (top) / Bottom navigation / Buttons / Cards / Dialogs / Image lists / Lists / Menus / Navigation drawers / Bottom sheets / Side sheets / Snackbars / Tabs / Text fields
Think About Where to Place Frequently Tapped Elements
When using a smartphone with one hand, you should avoid placing frequently tapped elements at the top of the screen where your fingers can’t reach. On foldable devices, area 2 in the image below is considered the easiest to tap. Area 3 is at the bottom, but it’s actually very hard to tap, and placing things like FABs there isn’t recommended.
Reference: Foldables – Material Design 3
Also, placing important elements too far down can cause them to fall outside the first viewport at awkward aspect ratios, hiding them.
This kind of thing seems to call for layout logic that calculates positions from the bottom up, among other tricks.
Considering Input Devices
Responsive design on Android isn’t just about handling various screen sizes. As I mentioned earlier, since your app may be used on Chromebooks or Windows, you also have to consider that users may be operating it with a mouse and keyboard.
For that reason, ideally your app should support hover and click interactions, navigating elements with the Tab key, executing with Enter, and so on. A lot of this seems to be handled automatically when you implement with Material Design–related libraries.
Also, you might want to consider:
- For a video app, supporting the spacebar for play/pause and other keyboard shortcuts
- For a game app, supporting controller input
- Whether to assume use of a stylus / touch pen
Table Top Mode Support
Reference: Foldables – Material Design 3
Foldable devices can be folded horizontally and stood up on a desk. In that state, playing video on the upper half while displaying controls on the lower half makes for a great experience.
This is mainly a UX assumption for video playback or video calls. Since it’s foldable-specific, the priority feels low.
Sliding Pane Layout
For settings-style screens, or list-to-detail navigation flows, consider adopting a Sliding Pane Layout with the list and detail side by side.
This is the same kind of screen used by the Settings app on iPad. Android 12L is also planned to use it on its Settings screen.
Motion on Resize
When the screen size changes, animating the added or removed elements appropriately helps users understand the UI change.
Reference: Foldables – Material Design 3
That said, foldable devices are about the only ones where you have to assume frequent size changes, so this will inevitably be lower priority.
Adaptive Type Scale
This is a font rule defined since Material Design 3 that allows dynamic size changes.
By defining size rules per design token (variables like Headline, Body), you can dynamically change sizes using shared rules between design and implementation. That said, Android fonts vary by device’s pre-installed fonts, and font sizes are often implemented in sp (Scalable Pixel), so it’s complex—I have a feeling this will be quite a hassle in practice.
Typography – Material Design 3
Display as a Modal Window
By displaying certain screens in a modal window, you can reuse the same layout as the mobile app. For example, in the U-NEXT app, the title detail screen is displayed in a tall, narrow modal so it can be reused with nearly the same layout as on mobile.
You can’t use this for every screen, but it’s a small trick that cuts down on design and implementation costs.
Adopting Navigation Rail
This is a relatively new component added to Material Design about two years ago.
Navigation rail - Material Design
In the U-NEXT app, when the screen width exceeds 600dp, it’s displayed in place of the Bottom Navigation.
By the way, an Android engineer at our company has put together a slide deck with implementation insights.
Easier Than Expected? A Story About Adopting Navigation Rail - Speaker Deck
Adopting Side Sheets
This is also a Material Design Component. It works on mobile apps too, but it’s especially well suited to large-screen devices since you can show additional content without completely covering the screen.
Sheets: side - Material Design
In the U-NEXT app, the table of contents in the book viewer is displayed as:
- Full-screen Dialogs on mobile
- Side Sheets on tablets
Avoid the Hinge
On the unfolded screen of a foldable device, avoid placing tappable elements within 48dp around the central hinge.
A common bad example is displaying a Modal Dialog as-is right over the central hinge.
Minimize Finger Travel
On large screens, you have to be aware that finger travel becomes longer. By displaying a popup near the UI element the user just operated, you let users continue to operate efficiently.
Case Studies
Google has gathered examples of foldable / large-screen apps on the site below. It’s super useful, so definitely give it a look.
Large screen success stories | Android Developers
Summary
Lastly, here’s a roundup of the official information I could find on foldable / responsive design.
↑ The likely-relevant sections of Material Design v2 and v3, respectively. Sticking to these should cover most of what you need.
- Introducing Material Design Guidance for Large Screens - Material Design
- Start Here: 5 Exercises to Prepare Your App for Large Screens - Material Design
↑ More like blog posts than guidelines. Good for getting a rough overview.
↑ Google’s official tutorial Figma file.
- Build apps that support foldables | Android Developers
- Get started with large screens | Android Developers
↑ Developer guidelines, but they touch on expected behaviors, so it’s worth a quick skim.
- Introduction—Large screen UI | Samsung Developers
- Build apps for dual-screen and foldable devices - Dual-screen | Microsoft Docs
↑ Samsung and Microsoft, who develop folding smartphones themselves, have also published their own design guidelines.
Bonus
U-NEXT is a service that also supports e-books, but if you’re going to read a book on a foldable device, this↓ is a bit sad, isn’t it?
So we quietly shipped an update so you can read in a two-page spread, just like a real book.
Reference: Detective Conan ©Gosho Aoyama, ShogakukanU-NEXT updated yesterday to support foldable smartphones like the Galaxy Z Fold.
— Hirata / U-NEXT (@psephopaiktes) November 10, 2021
You can now read manga in a two-page spread, just like a real book. Surprisingly few smartphone apps can actually do this—U-NEXT is probably the first. pic.twitter.com/ADeYvSgKVs