By Oscar Wahltinez, Developer Relations Engineer, Google

Users are seeing more value in larger screens and discovering the benefits of doing more with one device. Apps designed for the big screen can certainly give users more power. Watch the foldable device, tablet and big-screen updates for more details.

Foldable screens also provide better ergonomics for larger devices. When folded, you can carry the tablet’s screen in your pocket, something previous portable devices couldn’t do. We’re very excited about this, given our app ecosystem, and the hardware shift is leading people to expect more from handheld devices. We’ve seen demand for larger screens extend to tablets, which are now hugely popular given the similar experience.

Technological breakthroughs and changes in ergonomics have led to changes in device form

This article will take you through how you should be prepared for large-screen devices and how our recent updates will simplify the application development process. But first, let’s talk about the big screen itself, and why you should optimize your app specifically for the big screen.

Why support larger devices

There are many ways to use foldable devices, but this is just one of them

Over the past year, device makers have released a slew of exciting new foldable and tablet devices. Users can do more with these devices than ever before, and demand is rising. Today, developers can reach more than 250 million active foldable devices, tablets, and Chromebooks with large Android screens. Sales of tablet devices grew 16 percent in 2020. Analysts predict there will be more than 400 million Android tablets on the market by 2023. Foldable devices are also redefining high-end devices. Android apps can also run on Chrome OS, which is now the world’s second-largest desktop operating system.

Get ready for big-screen devices

Larger screens are changing the way users interact with their devices. You can edit slides while reading notes, check restaurant recommendations while planning an evening out, or watch a video while chatting with friends. Let’s talk about basic support, the features that must be supported to make your app “big screen ready.” When it comes to big-screen readiness, there are three key topics:

  • Designed for the big screen
  • multitasking
  • The input mode

Let’s go through them one by one. This is just a general discussion, so be sure to check out the Quality Guide for large screen applications for more details.

Designed for the big screen

The first step is to make sure your app is designed for the big screen. To simplify this process, we have defined specific window size breakpoints and device categories for you to optimize. If the minimum display size is more than 600DP, add a tablet layout for your app and make sure your app has an edge-to-edge full-screen experience. Developers should also support portrait and landscape modes, as larger screens are more likely to be used in landscape mode. We’ll cover the Material adaptive component later to help you make better use of your larger screen space.

Since the window size of foldable and large-screen devices is variable, the experience is better when using adaptive layout than when splitting by screen size

multitasking

On larger devices, users by default expect apps to support split-screen (or multi-window mode) and interactive modes such as drag and drop. Your application should allow window resizing to seamlessly support multitasking. Handle collapses and expands properly, and have your application support multi-window mode to avoid black edges in the application window area.

Drag and drop is a natural interaction in large screen layouts, even within the same application

With the multi-instance function, users can run multiple copies of applications side by side. Users can compare two products side by side, refer to notes when writing documents, or keep calendars visible when planning events

The input mode

Since many people use large screens to boost productivity, tablets should support basic keyboard, mouse and stylus input.

Users who use Android apps on Chrome OS devices usually have a physical keyboard; Apps should support standard keyboard navigation and shortcuts to provide a more holistic and accessible experience

Component updates

We’ve updated many of the UI components in the Jetpack and Material Design libraries to help you build flexible user experiences and extend your mobile UI to larger screens.

SlidingPaneLayout

One of the most common adaptive layouts used when optimizing applications for large screens is the list-detail UI. For example, a messaging app displays a list of messages on one side and details on the other.

SlidingPaneLayout automatically ADAPTS to configuration changes, providing a good user experience in different layout sizes

UI that has to be stacked on a smaller screen can easily be laid out side-by-side on a larger screen. To do this, you can use the updated SlidingPaneLayout library. The library now supports a two-pane layout, and SlidingPaneLayout uses the width of the two panes to determine how to lay out the UI. This is done by automatically determining whether side-by-side layouts are possible based on the width of the content and the space available. For example, if the minimum width of the list pane is 200DP and the detail pane needs 400DP, SlidingPaneLayout will automatically display the two panes side by side when the total window width is 600DP or above.

△ SlidingPaneLayout used in our sample application IOSched

We have updated the library to recognize and adapt folds and hinges. If you are using a hinged device and the hinge blocks part of the screen, it will automatically place the content on either side of the hinge.

We also introduced a lock mode, which allows you to control sliding when panes overlap (programming switching is also supported). For example, to prevent the user from crossing into an empty pane, you might make the user have to click on a list item to load information for that pane, but allow the user to swipe back to the list. On a foldable device or tablet, the lock mode is ignored if there is room to show two views side by side.

NavRail

Vertical navigation bars are functionally equivalent to bottom navigation and provide a more ergonomic navigation experience on a large screen. When you extend the user interface to the larger screen, NavRail is more finger-friendly because users typically hold the larger screen on both sides. On a phone, the user might hold the bottom of the device.

▽ NavRail automatically changes the location of navigation menu according to configuration changes

If vertical scrolling is a big part of your application, NavRail is a good fit. In this case, using the bottom navigation bar creates occlusion and reduces the amount of visible content, especially when the tablet is used horizontally.

Other components

We have also updated several other components. One of the biggest pitfalls when adapting to larger screens is that the UI is stretched to the edge of the screen. To prevent this, we added default maximum width values for some Material components where this often happens, including:

  • Buttons
  • TextFields
  • “Sheets”

We will add more components to the above list in the future. These changes make your apps look great on larger devices by providing just the right default size. You can find more information about component size limits in the Material Design Design guide.

△ Most UI elements should have maximum width values

WindowManager Jetpack library

In addition to updating components to help you expand your UI, we also provide the WindowManager Jetpack library to help you build a better experience on larger screen devices. The library, now available in alpha, provides a common API interface to support different device types, including foldable devices and tablets.

You can use WindowManager to view display features, such as folding or hinges. It also provides information on how these features affect your application, so you can create the best possible experience. For example, you can respond to state changes on a foldable device when the user folds the device into desktop mode while watching a video.

The app should seamlessly adapt to an increasing number of device configurations

WindowManager also provides several convenient ways to retrieve current and maximum WindowMetrics information in a backward compatible manner (starting with API level 14).

Platform changes

Show API deprecation

Your application needs to determine the screen or display size to render the content appropriately for each device. With the introduction of the WindowMetrics API, some methods related to display size have been deprecated. You should use the Window Manager Jetpack library as an alternative to backward compatibility.

Exclusive resources

Android 10 offers the ability to recover multiple apps at once and has a single “top-level restore” app. Most applications benefit from this change without updating. The most obvious exception is when your application uses an exclusive resource, such as a microphone or camera. See our previous blog for more details on this.

Case sharing

Optimizing your app for the larger screen can not only improve the user experience, but also reap business results. We’re seeing more and more apps on Google Play taking advantage of the big screen. Google Duo, for example, saw app ratings and engagement increase after it implemented support for tablets and foldable devices to improve the user experience.

△ Google Duo optimizes the experience for foldable devices

In addition to Google Duo, we have modernized many other apps to support adaptive layouts to take advantage of large screens and foldable devices:

  • Chrome improves TAB navigation for larger screens;
  • YouTube redesigned its user interface to improve usability on foldable devices;
  • Google Photos will show more interface elements, such as the search bar, on the larger screen;
  • Google Calendar offers a more ergonomic user interface on the big screen.

To learn more

To learn more about foldable devices and large-screen devices, refer to the following resources:

  • Adaptive layout for tablets, large-screen devices, and foldable devices
  • Build applications for foldable devices
  • Quality guide for Large screen applications
  • Material Design Blog post: Large screen Design

Your feedback and questions about our products are very important to us. Please submit your feedback to us via the following QR code. Your questions may appear and be answered in the next FAQ. Thank you for your support!