List of updates for foldable devices, tablet devices, and large-screen devices

/ Oscar Wahltinez, Developer Relations Engineer, Google

Users are seeing more value in large screens, and they are also discovering the benefits of doing more with one device. Applications designed for large screens can undoubtedly provide users with more assistance.

https://www.bilibili.com/video/BV1r44y1r7Q2/?aid=973269690&cid=344653929&page=1

△ Overview of foldable devices, tablets and large screens

The foldable screen also provides better ergonomics for large equipment. After folding, you can put the screen as big as a tablet in your pocket, which was not possible with previous portable devices. Considering our application ecosystem, we are very excited about this. The changes in hardware are making people have more expectations for handheld devices. We see that users' demand for large screens has also extended to tablet computers. Given the similar application experience of the two, the popularity of tablet computers has also increased substantially.

△ Breakthroughs in technology and changes in people's ergonomic needs have led to changes in the form of equipment

This article will walk you through how to prepare for large-screen devices and how our recent update will simplify the application development process. But first, let’s talk about the big screen itself and why you should optimize your application specifically for the big screen.

support large-screen devices

△ There are many uses of foldable equipment, here is just a part of them

In the past year, device manufacturers have released a large number of exciting new foldable devices and tablet devices. Users can do more things with these devices than ever before, and related demands have also increased. Today, with Android large-screen devices, developers can cover more than 250 million active foldable devices, tablets and Chromebooks. In 2020, sales of tablet devices increased by 16%. Analysts predict that there will be more than 400 million Android tablets on the market by 2023. In addition, foldable devices are also redefining high-end devices. Android applications can also run on Chrome OS, and Chrome OS is now the world’s second largest desktop operating system, .

for large-screen devices

Larger screens are changing the way users interact with devices. You can edit your slides while reading your notes, check out restaurant recommendations while planning your evening trip, or watch videos while chatting with friends. Let's talk about basic support, that is, the functions that must be supported to make the application "big screen ready". When it comes to big screen readiness, there are three key issues:

• Designed for the big screen
• Multitasking
• Input mode

Let us introduce them one by one below. However, this article is still only a general discussion, please be sure to check the large-screen application quality guide further understand the details of this knowledge.

for large screens

The first step is to make sure your app is designed for large screens. In order to simplify this process, we have defined specific window size breakpoints and device categories for you to optimize. If the shortest size of the display device is greater than 600dp, please add a tablet layout to the application and ensure that the application achieves a edge-to-edge full-screen experience. Developers should also allow apps to support portrait and landscape modes, because larger screens are more likely to be used in landscape mode. Later we will introduce Material adaptive components to help you make better use of the larger screen space.

△ Since the window size of foldable and large-screen devices is variable, using adaptive layout is better than dividing the experience according to the screen size

Multitasking

On large-screen devices, users will expect the application to support interactive modes such as split-screen (or multi-window mode) and drag-and-drop by default. Your application should allow for resizing windows to seamlessly support multitasking. Please handle the folding and unfolding events correctly, and allow your application to support multi-window mode to avoid black borders in the application window area.

△ In the large screen layout, drag and drop is a natural interaction, even in the same application

△ By using the multi-instance function, users can run multiple copies of the application side by side. Users can compare two products side by side, refer to notes when writing documents, or keep the calendar visible when planning events

Input mode

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

△ Users who use Android applications on Chrome OS devices usually configure a physical keyboard; the application should support standard keyboard navigation and shortcut keys to provide a more comprehensive accessibility experience

component update

We have updated many UI components in the Jetpack and Material Design libraries to help you build a flexible user experience and extend the mobile UI to larger screens.

SlidingPaneLayout

When optimizing applications for large screens, one of the most common adaptive layouts is the list-detail UI. For example, an SMS application displays a list of messages on one side and details of the messages on the other side.

△ SlidingPaneLayout will automatically adapt to configuration changes, providing a good user experience under different layout sizes

UIs that have to be stacked on a smaller screen can easily be laid out side by side on a large screen. For this, you can use the updated SlidingPaneLayout library. This library now supports dual-pane layouts, and SlidingPaneLayout will use the width of the two panes to determine how to lay out the UI. The specific method is to automatically determine whether the side-by-side layout is possible according to the width of the content and the available space. For example, if the minimum width of the list pane is 200dp and the detail pane needs 400dp, then when the total window width is 600dp or more, SlidingPaneLayout will automatically display the two panes side by side.

△ SlidingPaneLayout is used in our sample application IOSched

We have updated the library to recognize and adapt folding and hinge . If you are using a device with a hinge, and the hinge blocks part of the screen, it will automatically place the content on both sides of the hinge.

We also introduced a lock mode, allowing you to control the sliding operation when the panes overlap (program switching is also supported). For example, to prevent users from swiping into an empty pane, you might make users have to click on a list item to load the information in that pane, but allow users to swipe to return to the list. On a foldable device or tablet, if there is room to display two views side by side, the lock mode will be ignored.

NavRail

vertical navigation bar is functionally equivalent to bottom navigation, and provides a more ergonomic navigation experience on the large screen. When you extend the user interface to a large screen, using NavRail will be more convenient for finger clicks, because users usually hold both sides of the large screen. On a mobile phone, the user may hold the bottom of the device.

△ NavRail will automatically change the position of the navigation menu according to the configuration change

If your application emphasizes vertical scrolling, then NavRail is very suitable. Because in this case, using the bottom navigation bar will cause occlusion, thereby reducing the amount of visible content, especially when the tablet device is used in landscape orientation.

Other components

We have also updated several other components. When the application is adapted to a larger screen, the biggest hidden danger is that the UI is stretched to the edge of the entire screen. In order to prevent this from happening, we have added a default maximum width value for some Material components that often happen to this situation, including:

• Buttons
• TextFields (text boxes)
• Sheets

We will add more components to the above list in the future. These changes make your app look better on large-screen devices by providing the right default size. You can find more information about component size limitations Material Design Guide

△ Most UI elements should have a maximum width value

WindowManager Jetpack library

In addition to updating components to help you extend the UI, we also provide WindowManager Jetpack library to help you build a better experience on large screen devices. This library has been released in alpha version, it provides a set of common API interface to support different device types, including folding devices and tablets.

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

△ The application should seamlessly adapt to more and more device configurations

WindowManager also provides several convenient methods to retrieve the current and largest WindowMetrics information in a backward compatible (starting from API level 14).

Platform changes

shows the obsolescence of API

Your app needs to determine the screen or display size in order to render content appropriately for each device. With WindowMetrics API , some methods related to display size have been abandoned. You should use Window Manager Jetpack library as a backward compatible alternative.

Exclusive resource

Android 10 provides the function of restoring multiple applications at the same time, and has a single "top-level restore" application. Most apps do not need to be updated to benefit from this change. The most obvious exception is when your application uses exclusive resources, such as microphones or cameras. More details in this regard, please refer to our before Bowen .

case sharing

Optimizing applications for large screens can not only improve the user experience, but also reap commercial results. We see more and more applications on Google Play are seizing the opportunities brought by the big screen. For example, Google Duo supports tablets and foldable devices to improve user experience. After that, its app ratings and user stickiness have increased.

△ Google Duo optimizes the experience for foldable devices

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

• Chrome browser improves tab navigation for large screens;
• YouTube has redesigned its user interface to improve usability on foldable devices;
• Google Photos will display more interface elements on the big screen, such as the search bar;
• Google Calendar provides a more ergonomic user interface on the big screen.

Learn more

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

• Adaptive layout for tablets, large-screen devices and foldable devices
• Build an application for foldable devices
• Large screen application quality guide
• Material Design blog post: Large screen design

Your product feedback and questions are very important to us, welcome to submit feedback to us through the QR code below. Your question may appear in the next FAQ and be answered. thank you for your support!