FAQ | Frequently Asked Questions for Building Apps for Large Screen Devices

Recently, we published a series of articles on building applications on foldable and large-screen devices:

• Application design specification on folding screen, understand?
• It's time to adapt perfect input for all kinds of devices Support
• Android and Chrome OS update for larger screen devices

We have received a lot of feedback from developers in the background and the community and other channels, and we have also briefly collected and sorted out some common problems of developers, and organized them into this article on building applications for foldable and large-screen devices. If you have any other questions during the build process, please let us know by leaving a message.

Q: What new opportunities, new products and usage scenarios exist in the large screen market segment?

: to the International Data Corporation (IDC) report, there are about 100 million newly activated Android tablet devices in 2020, which is a staggering number. At the same time, there are more than 250 million large-screen devices equipped with the Android system activated today. This is a huge market, and of course there are huge opportunities. Today, as the use of foldable screens increases, development around foldable devices is more diverse, and opportunities for extending applications beyond mobile phones also increase.

A product like the LumaFusion, where Chromebooks play a vital role when it comes to entering the education market. Because users need to perform a lot of operations on the screen when editing videos, the larger screen size brings more screen space for users. In short, using this product on a large screen is the most ideal use case.

From a design point of view, foldable devices transform applications from regular mobile phone screens to larger screens, which brings more opportunities for designers to play, which is indeed a good way to introduce different functions and display various elements Chances are, that doesn't mean filling a bigger screen with more content, a bigger screen usually means a more immersive experience for the user. In addition, it also greatly increases the opportunities for multitasking. Users can use the multi-window mode to perform multiple tasks at the same time, so we have new opportunities to consider, for example, the form, interaction, and state switching of multiple applications when they are adjacent to each other. Wait, these are good entry points.

: What optimizations should developers make for large screens, and what issues need to be considered?

: First of all, it is a change of thinking. In the past, developing applications for candy bar phones, and now switching to developing applications for devices of various shapes and sizes, developers need to change their thinking to consider how the interface will work on devices of various sizes. Run, because the market importance of large-screen devices is beyond doubt.

Data shows that multitasking on foldable devices has increased by a factor of 7 because of the larger screen space, and it is necessary for developers to balance the simplicity and flexibility of the layout to optimize the application. For example, developers are using new window size categories and Viewport breakpoints can be thought of as 3 width based breakpoints if you want to optimize the layout of the breakpoints. In addition, developers need to consider the form of foldable devices, such as advanced layout support.

In terms of multitasking, the large screen provides users with more space to perform multiple operations. If the user uses the application on a folded device, developers should consider optimizing when the user unfolds the device to ensure that the application has good continuity and good Interface display effect and appearance. Mobile phones used to be in portrait mode. When switching to large-screen devices, landscape mode becomes very important. In order to better adapt to the large screen, first optimize to ensure that the application looks good in landscape mode. If you've done this, the next thing you should do is make sure that the app can run in multi-window mode and that the app's size can be dynamically resized.

In terms of navigation optimization, in the past, when optimizing some navigation components in the vertical screen mode of a candy bar phone, the navigation components were almost always docked at the bottom of the screen. In foldable devices or larger devices, the situation is different. In fact, most of the users The time is to hold the device with both hands, which means that navigation components are best placed on the edges and sides of the device, not the bottom. In addition, it is recommended that developers should consider the band effect when optimizing navigation items. In portrait, it makes sense for a large number of components or elements to occupy the edge of the device, but in landscape, where the user is holding the device with both hands most of the time, elements that span the two edges can take up a lot of space and be very conspicuous. Give the user a feeling - the interface is clunky, so try to avoid edge docking and consider other ways to place components and elements.

For more details, see:

• Build an Android interface for any screen size
• Application design specification on folding screen, understand?
• MAD Skills Series Navigation Component Series Article
• supports different screen sizes

: For developers, how to optimize the application interface on various screen sizes in the easiest way?

: There are several solutions to choose from, depending on your application's current reality and future plans. For example, if you now have an application based on many activities, you can display multiple activities side by side at the same time with the help of Activity Embedding provided in the 12L feature. This is a great way to optimize your app interface without having to rewrite all your layout code and your entire app.

Jetpack Compose is also a good option if you are considering rewriting part of the interface or the entire app. Jetpack Compose it easier to build adaptive interfaces initially, and to maintain and perform other similar operations more easily in future development cycles. In addition, compatibility mode can be used, but compatibility mode does not provide the ideal experience for the user. So it is strongly recommended that you prefer to use Jetpack Compose .

For more guides to easily optimize your app, see:

• Update for large screen devices in Android and Chrome OS
• Material Website
• Supports foldable and dual-screen devices with WindowManager162131551905f1

: Should developers use bottom navigation on tablets or foldables?

: a design point of view, we recommend replacing the bottom navigation component with the Navigation Rail , which has similar functionality to the bottom navigation component and contains multiple main destinations . We think it's easier to use the navigation component on the side, especially for users who frequently switch interfaces within the app through the navigation bar. Secondary navigation is also very important, in mobile devices you can use tabs (Tab) or segmented buttons (Segmented Button) to achieve secondary navigation, these methods also work on foldable devices, so you can use them with Navigation Rail is used in combination.

From an implementation perspective, you can do it in a variety of ways, such as using View or using Compose. For View-based applications, you can use resource-limited layouts to form narrow layouts through bottom navigation—such as the App Bar or Navigation Menu—or Navigation Rail Create wider layouts. Based on our window size category and guidelines, for smaller layouts, the bottom navigation menu is recommended, for medium and larger expanded layouts, it is recommended that you consider the Navigation Rail , as users with this type of device are more Operate equipment with both hands rather than one.

To learn more, see:

• Getting Started Navigation Component16213155190736

Q: What are the two types of tablet and desktop devices to be aware of when building applications for large screens? What are the caveats of a detachable tablet like the Chromebook Duet?

: the perspective of different screen sizes, tablet devices need to consider the Medium height and Expanded width in landscape mode, the breakpoints are 480dp+ and 840dp+ respectively, and desktop devices need to be considered Expanded height and expanded width, breakpoints are 900dp+ and 840dp+ respectively. For more screen size related sizes, please refer to the following table:

At the same time, when considering a detachable device, another issue to consider will be support for device input, a detachable device means that it can connect other input devices, such as keyboards, styluses, mice, etc., so You should also consider optimizing your input device support further, you can learn more in our recent article " It's Time to Fit Perfect Input Support for Various Devices ".

Both layout and input are important, especially when you start thinking about larger screen devices, to create a adaptive layout that fits different screen sizes, the best way is to use ConstraintLayout as the base layout in your interface . With ConstraintLayout, you can specify the position and size of each view based on the spatial relationship between the views in the layout. This allows all views to move and stretch together when the screen size changes. While ConstraintLayout doesn't handle all layout scenarios, you should always avoid hardcoding layout sizes, no matter what layout you use.

To learn more, see:

• Window size category

: How should developers adapt to the folding form of foldable devices, such as desktop mode?

: the help of this question, we would like to first mention the various forms of foldable devices, which are fully folded, half-folded, and fully unfolded. When the device is in a half-folded state, the device may also be in two folded states, one is desktop mode (horizontal folding side), similar to placing a half-folded mobile phone on a table; the other is book mode (vertical folding) side), similar to holding a half-folded mobile phone in your hand, like reading a book. When the device is in a half-folded state, it is not easy to click on the part near the folded edge, so you should avoid designing interactions in this area, but this is also a good topic, you can study what interesting elements can be placed in these occluded areas. .

When it comes to the folding form, you need to pay attention to the transition of components. Various components will be used on larger devices and larger screens. Especially in desktop mode, you need to pay special attention to the interface. For example, in this mode, key operations or most operations This is done on the bottom screen, while most content components will actually be placed on the other screen; in the folded desktop mode, the user appears to be operating a laptop, touching the screen and the phone may appear different. Steady shaking; the camera position in this mode may also block the content of the screen behind, although the content will be rendered, but not visible because it is blocked. These are very important things to consider, how to operate ergonomically in different folded configurations.

As you all know, foldable devices are emerging one after another, and we have launched the Jetpack WindowManager library to help developers adapt their apps to take full advantage of foldable devices to provide users with a new experience. To learn more, see the articles " Explained | Building Responsive UIs for Foldable Devices " and Codelab: Supporting Foldable and Dual Screen Devices with Jetpack WindowManager We invite developers to try WindowManager, and hope You can give us your feedback so we can improve it further and push out a stable version as soon as possible.

To learn more, see:

• The folded state of the foldable device

: What are the pros and cons of 12L Activity Embedding compared to other methods of building large-screen applications? Which is preferred if building from scratch?

: you want to build your app from scratch, it is highly recommended that you prioritize using Jetpack Compose . Jetpack Compose is a toolkit for building native Android interfaces that makes it easier to design and build your app's interface and make better apps faster.

If your app is based on many activities and you want to render it better on the big screen, it is recommended that you use Activity Embedding . Activity Embedding just allows you to display multiple activities side by side without refactoring the application architecture, it is very simple to use. If you use Fragment or you may already use Compose in an Activity application, then do not use Activity Embedding. At this time, we recommend that you check the construction interface of all applications. For specific implementation methods, please refer to the recent article " for any screen size Build Android Interface ".

: When developers resize the window on Chrome OS, how to smoothly convert the application components to the new size?

Answer: Please pay attention to Material's official document , we may arrange a special chapter to explain this type of problem in the future. For now, we've included some guidelines for the topic Motion for foldables, as there are a lot of transition scenarios that will be encountered in these devices, and these also apply to Chrome OS. One important note about component transitions: When users transition their device from one state to another, usually at least one element must remain on the interface to help them locate an element or know if an element has changed.

In terms of technical implementation, it is not easy to manually implement these conversion effects and have smooth interaction in different device forms. You can build it with the help of our interface toolkit for Android Jetpack Compose .

To learn more, see:

• Use Material Design components to implement Material animations

You are welcome here to submit feedback to us, or share your favorite content and found problems. Your feedback is very important to us, thank you for your support!