12L and new Android APIs and instruments for giant screens


Posted by Dave Burke, VP of Engineering

There are over 1 / 4 billion giant display screen units operating Android throughout tablets, foldables, and ChromeOS units. In simply the final 12 months we’ve seen practically 100 million new Android pill activations–a 20% year-over-year progress, whereas ChromeOS, now the quickest rising desktop platform, grew by 92%. We’ve additionally seen Foldable units on the rise, with 12 months on 12 months progress of over 265%! All advised, there are over 250 million energetic giant display screen units operating Android. With the entire momentum, we’re persevering with to put money into making Android an excellent higher OS on these units, for customers and builders.

So immediately at Android Dev Summit, we introduced a function drop for Android 12 that’s purpose-built for giant screens, we’re calling it 12L, together with new APIs, instruments, and steering to make it simpler to construct for giant screens. We additionally talked about adjustments we’re making to Google Play to assist customers uncover your large-screen optimized apps extra simply. Learn on to see what’s new for giant screens on Android!

Previewing 12L: A function drop for giant screens

Right now we’re bringing you a developer preview of 12L, our upcoming function drop that makes Android 12 even higher on giant screens. With the preview, you may strive the brand new giant display screen options, optimize your apps, and tell us your suggestions.

In 12L we’ve refined the UI on giant screens throughout notifications, fast settings, lockscreen, overview, house display screen, and extra. For instance, on screens above 600dp, the notification shade, lockscreen, and different system surfaces use a brand new two-column structure to make the most of the display screen space. System apps are additionally optimized.

image shows a phone with two-column layouts

Two-column layouts present extra and are simpler to make use of

We’ve additionally made multitasking extra highly effective and intuitive – 12L features a new taskbar on giant screens that lets customers immediately change to favourite apps on the fly. The taskbar additionally makes split-screen mode extra discoverable than ever – simply drag-and-drop from the taskbar to run an app in split-screen mode. To make split-screen mode a greater expertise in Android 12 and later, we’re serving to customers by mechanically enabling all apps to enter cut up display screen mode, regardless whether or not the apps are resizable.

GIF image shows maps and web brower on the screen at the same time

Drag and drop apps into split-screen mode

Final, we’ve improved compatibility mode with visible and stability enhancements to supply a greater letterboxing expertise for customers and assist apps look higher by default. We’ve made letterboxing simply customizable by system producers, who can now set customized letterbox colours or therapies, modify the place of the inset window, apply customized rounded corners, and extra.

We plan to launch the 12L function drop early subsequent 12 months, in time for the following wave of Android 12 tablets and foldables. We’re already working with our OEM companions to carry these options to their giant display screen units – look ahead to the developer preview of 12L coming quickly to the Lenovo P12 Professional. With the options coming to units within the few months forward, now is a superb time to optimize your apps for giant screens.

For builders, we extremely advocate testing how your apps work in cut up display screen mode with home windows of assorted sizes. Should you haven’t optimized your app but, see the way it seems to be in numerous orientations and check out the brand new compatibility mode adjustments in the event that they apply. Together with the big display screen options, 12L additionally features a handful of latest APIs for builders, together with a brand new API degree. We’ve been cautious to not introduce any breaking adjustments in your apps, so we received’t require apps to focus on 12L to satisfy Google Play necessities.

To get began with 12L, obtain the 12L Android Emulator system photos and instruments from the newest preview launch of Android Studio. Overview the options and adjustments to study areas to check in your apps, and see preview overview for the timeline and launch particulars. You’ll be able to report points and requests right here, and as all the time, we recognize your suggestions!

12L is for telephones, too, however since a lot of the new options received’t be seen on smaller screens, for now we’re protecting the give attention to tablets, foldables, and ChromeOS units. Later within the preview we plan to open up Android Beta enrollments for Pixel units. For particulars, go to developer.android.com/12L.

Making it simpler to construct for giant screens

It is time to begin designing absolutely adaptive apps to suit any display screen, and now we’re making it even simpler. That will help you prepare for these adjustments within the OS and Play, together with the developer preview we’re releasing updates to our APIs, instruments and steering.

Design with giant display screen patterns in thoughts

Step one to supporting adaptive UI is designing your app to behave properly on each a small and a bigger display screen. We’ve been engaged on new Materials Design steering that can enable you scale your app’s UI throughout all screens. The steering covers widespread structure patterns prevalent within the ecosystem that can assist encourage and kick-start your efforts.

Image shows four Adaptive UI patterns in the Material Design guidelines

Adaptive UI patterns within the Materials Design tips

Construct responsive UIs with new navigation parts

To supply the very best navigation expertise to your customers, you need to present a navigation UI that’s tailor-made to the Window Dimension Class of the person’s system. The really useful navigation patterns embody utilizing a navigation bar for compact screens and a navigation rail for medium-width system courses and bigger (600dp+). For expanded-width units, there are a number of concepts on bigger display screen layouts inside our newly launched Materials Design steering reminiscent of a Record/Element construction that may be carried out, utilizing SlidingPaneLayout. Try our steering on the right way to implement navigation for adaptive UIs in Views and Compose.

Whereas updating the navigation sample and utilizing a SlidingPaneLayout is an effective way to use a big display screen optimized structure to an current utility with fragments, we all know lots of you’ve gotten purposes based mostly on a number of actions. For these apps, the brand new exercise embedding APIs launched in Jetpack WindowManager 1.0 beta 03 make it straightforward to assist new UI paradigms, reminiscent of a TwoPane view. We’re engaged on updating SlidingPaneLayout to assist these APIs – search for an replace within the coming months.

Use Compose to make it simpler to answer display screen adjustments

Jetpack Compose makes it simpler to construct for giant screens and various layouts. Should you’re beginning to undertake Compose, it’s a good time to optimize for giant screens alongside the way in which.

Compose is a declarative UI toolkit; all UI is described in code, and it’s straightforward to make choices at runtime of the way it ought to adapt to the out there dimension. This makes Compose particularly nice for creating adaptive UI, as it is extremely straightforward to deal with UI adjustments throughout totally different display screen sizes or parts. The Construct adaptive layouts in Compose information covers the fundamentals of what it is advisable to know.

Use WindowManager APIs to construct responsive UIs

The Jetpack WindowManger library gives a backward-compatible option to work with home windows in your app and construct responsive UI for all units. Right here’s what’s new.

Exercise embedding

Exercise embedding permits you to make the most of the additional show space of huge screens by exhibiting a number of actions without delay, reminiscent of for the Record-Element sample, and it requires little or no refactoring of your app. You identify how your app shows its actions—facet by facet or stacked—by creating an XML configuration file or making Jetpack WindowManager API calls. The system handles the remaining, figuring out the presentation based mostly on the configuration you’ve created.

Exercise embedding works seamlessly on foldable units, stacking and unstacking actions because the system folds and unfolds. In case your app makes use of a number of actions, exercise embedding can improve your person expertise on giant display screen units. Strive the exercise embedding APIs in Jetpack WindowManager 1.0 Beta 03 and later releases. Extra right here.

GIF shows activity embedding with Jetpack WindowManager

Exercise embedding with Jetpack WindowManager

Use Window dimension courses to assist detect the dimensions of your window

Window Dimension Courses are a set of opinionated viewport breakpoints so that you can design, develop and take a look at resizable utility layouts in opposition to. The Window Dimension Class breakpoints have been cut up into three classes: compact, medium, and expanded. They’ve been designed particularly to steadiness structure simplicity with the pliability to optimize your app for probably the most distinctive use instances, whereas representing a big proportion of units within the ecosystem. The WindowSizeClass APIs will probably be coming quickly in Jetpack WindowManager 1.1 and can make it simpler to construct responsive UIs. Extra right here.

Image compares the width of Window Size Classes by showing compact, medium, and expanded views

Window Dimension Courses in Jetpack WindowManager

Make your app fold-aware

WindowManager additionally gives a typical API floor for various window options, like folds and hinges. When your app is fold conscious, the content material within the window will be tailored to keep away from folds and hinges, or to make the most of them and use them as pure separators. Be taught how one can make your app fold conscious in this information.

Constructing and testing for giant screens with Android Studio

Reference Units

Since Android apps must be constructed to reply and adapt to all units and classes, we’re introducing Reference Units throughout Android Studio in lots of instruments the place you design, develop and take a look at UI and structure. The 4 reference units signify telephones, giant foldable internal shows, tablets, and desktops. We’ve designed these after analyzing market information to signify both fashionable units or quickly rising segments. In addition they allow you to make sure your app works throughout fashionable breakpoint mixtures with the brand new WindowSizeClass breakpoints, to make sure your app covers as many use instances as doable.

Image shows reference device definitions for a tablet, phone, foldable, and desktop sizes

Reference Gadget definitions

Format validation

Should you’re undecided the place to get began adapting your UI for giant screens, the very first thing you are able to do is use new instruments to establish potential points impacting giant display screen units. In Android Studio Chipmunk, we’re engaged on a brand new visible linting software to proactively floor UI warnings and recommendations in Format Validation, together with which reference units are impacted.

Image shows layout validation panel. The panel shows phone, foldable, tablet, and desktop sizes

Format validation software with Reference Gadget courses

Resizable emulator

To check your app at runtime, we will use the brand new resizable emulator configuration that comes with Android Studio Chipmunk. The resizable emulator permits you to rapidly toggle between the 4 reference units – cellphone, foldable, pill, and desktop. This makes it simpler to validate your structure at design time and take a look at the conduct at runtime, each utilizing the identical reference units. To create a brand new Resizable emulator, use the Gadget Supervisor in Android Studio to create a brand new Digital Gadget and choose the Resizable system definition with the Android 12L (Sv2) system picture.

GIF shows the processs to create a new Resizable emulator

Resizable Android Emulator

Adjustments to Google Play on giant screens

To make it simpler for folks to seek out the most effective app experiences on their tablets, foldables, and ChromeOS units, we’re making adjustments in Play to spotlight apps which are optimized for his or her units.

We’re including new checks to evaluate every app’s high quality in opposition to our giant display screen app high quality tips to make sure that we floor the very best apps on these units. For apps that aren’t optimized for giant screens, we’ll begin warning giant display screen customers with a discover on the app’s Play Retailer itemizing web page.

We’ll even be introducing giant display screen particular app scores, as introduced earlier this 12 months, so customers will have the ability to fee how your app works on their giant display screen units. These adjustments are coming subsequent 12 months, so we’re providing you with superior discover to get your apps prepared!

Additionally, ensure that to take a look at our submit that highlights how we’re evolving our enterprise mannequin to handle developer wants in Google Play.

Be taught extra!

That will help you get began with constructing for giant screens and foldables, irrespective of whether or not you’re utilizing Views or Compose, we’ve obtained you coated! We’re launching new and up to date steering on the right way to assist totally different display screen sizes each in a brand new and in an current app, the right way to implement navigation for each Views and Compose, the right way to make the most of foldable units and extra. Verify them out within the giant screens guides part for Views assist or within the Compose guides part.

Nothing speaks louder than code – we up to date the next samples to assist responsive UIs:

For some hands-on work, take a look at our Help foldable and dual-screen units with Jetpack WindowManager up to date codelab.