Tag Archives: Large Screens

Kakaonavi increased foldable adoption by 24.5% after optimizing its app for large screens

Posted by the Android team

Kakaonavi prides itself on providing fast, accurate routes while offering several other helpful features, including directions to the nearest EV charging stations, car wash order services, navigation data, maintenance reminders, and more. As Korea’s top ranking driving assistant, Kakaonavi wants to make the daily driving experience as easy as possible for its users. Recently, that meant making its services consistent across devices.

With an increasing number of people using large screen and foldable Android devices, Kakaonavi saw a need to evolve its application to optimize the driving experience across all screen shapes and sizes. To do this, the Kakaonavi team focused on establishing a high-quality user experience for large screens by using Android’s latest software features.

Meeting the growing demand for large screens and foldables

Before updating its app, Kakaonavi’s user experience wasn’t tailored for large screens and foldables. The different sizes of devices caused the UI to be displayed improperly on them, which affected the user experience because screen ratio and resolution have a significant impact on usability.

Kakaonavi also recognized that many of its users preferred foldables because they’re easier to position in vehicles, allowing drivers to prop their device on a dashboard or center console. “The reason we decided to focus on foldables is due to the flexible display options provided by them,” said Jaesun Lee, Android developer at Kakaonavi. “Drivers can view the map however they prefer depending on how they fold or unfold the device inside their vehicle.”

Additionally, some drivers, including professionals like truck drivers and taxi drivers, use Kakaonavi with three to four other apps simultaneously through Android OS’s split-screen mode. At the time, the Kakaonavi team had only established this type of multi-window supportfor devices with standard resolutions, leading to some of its users experiencing UI issues when trying to run multiple applications at once.

Cohesive experiences across form factors

Developers at Kakaonavi addressed these issues by creating a common UI for large screen and foldable devices. They needed to ensure the UI was consistent whether the device was folded or unfolded, or in portrait or landscape mode. The UI also had to work efficiently while users ran multiple apps on their device’s main display. Because the ability to display map and location information on a larger screen is one of the benefits of these devices, creating consistency across layouts was essential to Kakaonavi’s success.

Using ConstraintLayout, which lets developers create large, complex layouts with a flatter app structure, the Kakaonavi team displayed a uniform, responsive UI regardless of the screen size or ratio. To handle configuration changes that are common on these devices, such as resizing windows or orientation changes, Kakaonavi's developers overrode onConfigurationChanged().

Overriding onConfigurationChanged() ensured the app ran smoothly on all screen sizes and during view mode changes by preventing the system from recreating UI elements triggered by folding and unfolding a device or opening multiple windows. Manually configuring these changes to preserve UI elements, rather than automatically deleting and recreating them, drastically improved the app’s UI performance for these new form factors.

“Since the map and UI state are updated frequently by GPS, we decided that the app would perform better by responding only to changes in screen orientation and screen size with onConfigurationChanged(), rather than restoring the previous state by restarting the Activity,” said Jaesun.

The Kakaonavi team also used multi-resume to enhance the app’s multi-window support for large screens and foldables. Multi-resume lets its users keep multiple applications in an active state while on screen, making multitasking more convenient and reliable.

Positive results and expanding opportunities

The number of people using large screen and foldable devices has grown significantly and will continue to grow as more of these devices become available. Currently, there are more than 270 million large screen Android devices in use, including tablets, foldables, and Chrome OS devices.

Kakaonavi has seen this same trend in devices used by its consumers. Since the brand began optimizing its application for large screens in January 2022, its number of monthly active users who use the app on foldables has increased by 24.5%, and the company has received positive feedback from drivers using tablets and foldables as their main source of navigation. As of today, Kakaonavi is optimized for all available tablets and foldables.

The Kakaonavi team is excited by the opportunities these new form factors will bring by giving its users more ways to interact with the app. Looking ahead, the brand plans to further optimize its UI with Jetpack Compose and is already considering how to further tailor its multi-window support to large screens and foldables.

“There will be more devices with various screen sizes and ratios in the future,” said Jaesun. “That’s why we believe it’s important to always provide an optimized UI and meet the needs of consumers’ frequently changing screens.”

Optimize your app for all form factors

Learn how you can optimize your application for large screens and upcoming form factors.

Source: Android Developers Blog

Android developers: a big thank you for a great 2022!

Posted by Maru Ahues Bouza, Director, Android Developer Relations

This past year was a special one for the Android community, from the release of Android 13, a big investment in tablets and large screens, the latest in wearable technology to all of the investments in Modern Android Development! It was terrific to see many of you for the first time again in-person at Android Dev Summit and other events around the world.From the experiences you build for users to feedback you provide us to make your tools better, we wanted to say a very special holiday thank you!

We put together a highlights recap, and a commemorative poster celebrating 2022 - download it to bring some holiday cheer to your workspace, wherever you may be this season.

Have a festive holiday season and we look forward to continuing our work with you in the new year.

Source: Android Developers Blog

Introducing Camera Viewfinder

Posted by Francesco Romano, Developer Relations Engineer, AndroidOver the years, Android devices have evolved to include a variety of sizes, shapes, and displays, among other features. Since the beginning, however, taking pictures with your phone has been one of the most important use cases. Today, camera capabilities are still one of the top reasons consumers purchase a phone.

As a developer, you want to leverage camera capabilities in your app, so you decide to adopt the Android Camera Framework. The first use case you want to implement is the Preview use case, which shows the output of the camera sensor on the screen.

So you go ahead and create a CaptureSession using a surface as big as the screen size. As long as the screen has the same aspect ratio as the camera sensor output and the device stays in its natural portrait orientation, everything should be fine.

But what happens when you resize the window, unfold your device, or change the display or orientation? Well, in most cases, the preview may appear stretched, upside down, or incorrectly rotated. And if you are in a multi-window environment, your app may even crash.

Why does this happen? Because of the implicit assumptions you made while creating the CaptureSession.

Historically, your app could live in the same window for its whole life cycle, but with the availability of new form factors such as foldable devices, and new display modes such as multi-window and multi-display, you can't assume this will be true anymore.

In particular, let's see some of the most important considerations when developing an app targeting various form factors:

Let's examine some common pitfalls to avoid when developing an app targeting various form factors:

Don't assume your app will live in a portrait-shaped window. Requesting a fixed orientation is still supported in Android 13, but now device manufacturers may have the option of overriding an app request for a preferred orientation.
Don't assume any fixed dimension or aspect ratio for your app. Even if you set resizableActivity = "false", your app could still be used in multi-window mode on large screens (>=600dp).
Don't assume a fixed relationship between the orientation of the screen and the camera. The Android Compatibility Definition Document specifies that a camera image sensor "MUST be oriented so that the long dimension of the camera aligns with the screen's long dimension." Starting with API level 32, camera clients that query the orientation on foldable devices can receive a value that dynamically changes depending on the device/fold state.
Don't assume the size of the inset can't change. The new taskbar is reported to applications as an inset, and when used with gesture navigation, the taskbar can be hidden and shown dynamically.
Don't assume your app has exclusive access to the camera. While your app is in a multi-window state, other apps can obtain access to shared resources like camera and microphone.

While CameraX already handles most of the cases above, implementing a preview that works in different scenarios with Camera2 APIs can be complex, as we describe in the Support resizable surfaces in your camera app Codelab.

Wouldn’t it be great to have a simple component that takes care of those details and lets you focus on your specific app logic?

Say no more…

Introducing CameraViewfinder

CameraViewfinder is a new artifact from the Jetpack library that allows you to quickly implement camera previews with minimal effort. It internally uses either a TextureView or SurfaceView to display the camera feed, and applies the required transformations on them to correctly display the viewfinder. This involves correcting their aspect ratio, scale, and rotation. It is fully compatible with your existing Camera2 codebase and continuously tested on several devices.

Let’s see how to use it.

First, add the dependency in your app-level build.gradle file:

implementation "androidx.camera:camera-viewfinder:1.3.0-alpha01"

Sync your project. Now you should be able to directly use the CameraViewfinder as any other View. For example, you can add it to your layout file:

<androidx.camera.viewfinder.CameraViewfinder
android:id="@+id/view_finder"
app:scaleType="fitCenter"
app:implementationMode="performance"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

As you can see, CameraViewfinder has the same controls available on PreviewView, so you can choose different Implementation modes and scaling types.

Now that the component is part of the layout, you can still create a CameraCaptureSession, but instead of providing a TextureView or SurfaceView as target surfaces, use the result of requestSurfaceAsync().

fun startCamera(){
val previewResolution = Size(width, height)
val viewfinderSurfaceRequest =
ViewfinderSurfaceRequest(previewResolution, characteristics)
val surfaceListenableFuture =
cameraViewfinder.requestSurfaceAsync(viewfinderSurfaceRequest)

Futures.addCallback(surfaceListenableFuture, object : FutureCallback<Surface> {
override fun onSuccess(surface: Surface) {
//create a CaptureSession using this surface as usual
}
override fun onFailure(t: Throwable) { /* something went wrong */}
}, ContextCompat.getMainExecutor(context))
}

Bonus: optimized layouts for foldable devices

CameraViewFinder is ready-to-use across resizable surfaces, configuration changes, rotations, and multi-window modes, and it has been tested on many foldable devices.

But if you want to implement optimized layouts for foldable and dual screen devices, you can combine CameraViewFinder with the Jetpack WindowManager library to provide unique experiences for your users.

For example, you can choose to avoid showing full screen preview if there is a hinge in the middle of the screen, or if the device is in “book” or “tabletop” mode. In those scenarios, you can have the viewfinder in one portion of the screen and the controls on the other side, or you can use part of the screen to show the last pictures taken. Imagination is the limit!

The sample app is already optimized for foldable devices and you can find the code to handle posture changes here. Have a look!

Source: Android Developers Blog

“Reach” Your Users on Large Screens

Posted by Diana Wong, Product Manager, Android Large screen devices like foldables and tablets mean your users have more screen to interact with. But they also can make it more difficult for those users to reach certain parts of their screen. Reachability, or what parts of the screen users can comfortably reach without stretching or adjusting their grip, is an important factor in user experience and accessibility and can help you decide where to place your app’s UI elements.

UI Elements on Large Screens

Large screens, such as tablets and foldables, are not always held and engaged with the same way as a smaller device like a phone. In the image below, you can see an example of how easily users can reach each area of a tablet with a width greater than nine inches.

The green area is easy for the majority of users to reach, the yellow and orange areas are only reachable for some users, and the red area is most difficult for users to reach. Within the red area, a user may need to adjust their grip or stretch to reach UI elements. It is important to consider how reachable each of your UI elements are to provide your users with the most optimal experiences.

Reachability isn’t “one size fits all”

Reachability can be impacted by a number of factors. First, device size can change what areas are reachable; larger devices mean it will be more difficult for users to reach the center of the screen. Another factor impacting reachability is the task a user is executing as users may hold their device in different ways for tasks like taking a photo versus using the keyboard. Hand size, measured from base of the wrist to the tip of the middle finger, can also affect how much of the device a user can reach. For example, take a look at the hand size data below. For tablets with a diagonal size greater than nine inches, users with hands larger than the US average can reach significantly more of the screen than users with hands smaller than average.

Hand size data showing differences in reachability between users with large hands and users with small hands

Additionally, how users hold their device changes depending on device orientation. As shown in the images below, devices used in portrait mode versus landscape impact the areas a user can comfortably reach.

Hand size data showing differences in reachability between users who hold their devices in landscape mode versus those who hold their devices in portrait mode

Finally, mostly due to screen size, foldable devices show some slightly different reachability patterns. Because they often have smaller screens than tablets, it is easier to reach the center of the device. However, the general pattern holds when it comes to reachability. When unfolded, the average user cannot reach the top 25% of the screen on a foldable device.

The DOs and DON’Ts of Large Screen Reachability

Reachability may vary by user, but there are some guidelines that can help your users’ large screen app experience. We have found that placing UI elements in the corners can be less than optimal. UI elements that are too close to the edges are going to be more likely to interact with user grip.Additionally, our reachability data shows that elements too close to the corners or edges of the device can be more difficult to reach, especially when a user is holding the device with both hands.

Now that you’ve learned all about reachability and the factors that impact it, here’s what you need to remember when building or updated an app for large screens:

DO: Limit interactions on the top 25% of the screen

The upper quarter of the screen can be hard to reach without changing one's grip.

DONT: Place critical and frequently used elements close to the screen's bottom edge and corners

Placing essential interactive elements too close to the bottom edge of the screen makes it more difficult for some users, particularly those with larger hands, to reach.

You can learn more about designing your app for large screens in our new gallery page or by checking out the Material Design guidance for large screens and foldables.

Source: Android Developers Blog

Beta 1 Update for 12L feature drop!

Posted by Maru Ahues Bouza, Director, Android Developer Relations

Image showing different kinda of large screens

At Android Dev Summit in October we highlighted the growth we’re seeing in large screen devices like tablets, foldables, and Chromebooks. We talked about how we’re making it easier to build great app experiences for these devices through new Jetpack APIs, tools, and guidance. We also introduced a developer preview of 12L, a feature drop for Android 12 that’s purpose-built for large screens.

With 12L, we’ve optimized and polished the system UI for large screens, made multitasking more powerful and intuitive, and improved compatibility support so apps look better right out of the box. 12L also includes a handful of new APIs for developers, such as for spatial audio and improved drag-and-drop for accessibility.

Today we’re releasing the first Beta of 12L for your testing and feedback as you get your apps ready for the feature drop coming early next year. You can try the new large screens features by setting up an Android emulator in Android Studio. 12L is for phones, too, and you can now enroll here to get 12L Beta 1 on supported Pixel devices. If you are still enrolled in the Android 12 Beta program, you’ll get the 12L update automatically. Through a partnership with Lenovo, you can also try 12L on the Lenovo Tab P12 Pro tablet, see the Lenovo site for details on available builds and support.

What’s in 12L Beta 1?

Today’s Beta 1 build includes improvements to functionality and user experience as well as the latest bug fixes, optimizations, and the December 2021 security patches. For developers, we’ve finalized the APIs early, so Beta 1 also includes the official 12L APIs (API level 32), updated build tools, and system images for testing. These give you everything you need to test your apps with the 12L features.

With 12L, we’ve focused on refining the UI on large screen devices, across notifications, quick settings, lockscreen, overview, home screen, and more. For example, on screens above 600dp, the notification shade, lockscreen, and other system surfaces use a new two-column layout to take advantage of the screen area.

Two-column layouts show more and are easier to use

Multitasking is also more powerful and intuitive - 12L includes a new taskbar on large screens that lets users instantly switch to favorite apps on the fly or drag-and-drop apps into split-screen mode. Remember, on Android 12 and later, users can launch any app into split screen mode, regardless whether the app is resizable. Make sure to test your apps in split screen mode!

GIF showing the drag and drop in split screen mode

Drag and drop apps into split-screen mode

Last, we’ve improved compatibility mode with visual and stability improvements to offer a better letterboxing experience for users and help apps look better by default. If your app is not yet optimized for large screens, make sure to test your app with the new letterboxing.

More APIs and tools to help you build for large screens

As you optimize your apps for large screens, here are some of our latest APIs and tools that can make it easier to build a great experience for users.

Material patterns for large screens - Our new Material Design guidance can help you plan how to scale your app’s UI across all screens.
Jetpack Compose for adaptive UI - Jetpack Compose makes it very easy to handle UI changes across different screen sizes or components. Check out the Build adaptive layouts in Compose guide for the basics of what you need to know.
Window Size Classes for managing your UI - Window Size Classes are opinionated viewport breakpoints to help you more easily design, develop and test resizable application layouts. Watch for these coming soon in Jetpack WindowManager 1.1.
Activity embedding - With Activity embedding APIs you can take advantage of the extra display area on large screens by showing multiple activities at once, such as for the List-Detail pattern, and it requires little or no refactoring of your app. Available in Jetpack WindowManager 1.0 Beta 03 and later.
Visual linting in Android Studio - In Android Studio Chipmunk, try the new visual linting tool that proactively surfaces UI warnings and suggestions in Layout Validation, to help identify potential issues on large screens.
Resizable emulator - This new emulator configuration comes with Android Studio Chipmunk and lets you quickly toggle between the four reference devices - phone, foldable, tablet, and desktop for easier testing.

Make sure to check out all of our large screens developer resources for details on these and other APIs and tools.

Get started with 12L on a device!

With the 12L feature drop coming to devices early next year, now is a great time to optimize your apps for large screens. For developers, we highly recommend checking out how your apps work in split screen mode with windows of various sizes. If you haven’t optimized your app yet, see how it looks in different orientations and try the new compatibility mode changes if they apply.

The easiest way to get started with the large screen features is using the Android Emulator in a foldable or tablet configuration - see the complete setup instructions here.

Now you can also flash 12L onto a large screen device. Through a partnership with Lenovo, you can try 12L preview builds on the Lenovo Tab P12 Pro. Currently Lenovo is offering a Developer Preview 1 build, with updates coming in the weeks ahead. Visit Lenovo's 12L preview site for complete information on available builds and support.

12L is coming to phones, too, and although you won’t see the large screen features on smaller screens, we welcome you to try out the latest improvements in this feature drop. Just enroll your supported Pixel device here to get the latest 12L Beta update over-the-air. If you are still enrolled in the Android 12 Beta program, you’ll automatically receive the update 12L.

For details on 12L and the release timeline, visit the 12L developer site. You can report issues and requests here, and as always, we appreciate your feedback!

Source: Android Developers Blog

12L and new Android APIs and tools for large screens

Posted by Dave Burke, VP of Engineering

There are over a quarter billion large screen devices running Android across tablets, foldables, and ChromeOS devices. In just the last 12 months we’ve seen nearly 100 million new Android tablet activations–a 20% year-over-year growth, while ChromeOS, now the fastest growing desktop platform, grew by 92%. We’ve also seen Foldable devices on the rise, with year on year growth of over 265%! All told, there are over 250 million active large screen devices running Android. With all of the momentum, we’re continuing to invest in making Android an even better OS on these devices, for users and developers.

So today at Android Dev Summit, we announced a feature drop for Android 12 that is purpose-built for large screens, we’re calling it 12L, along with new APIs, tools, and guidance to make it easier to build for large screens. We also talked about changes we’re making to Google Play to help users discover your large-screen optimized apps more easily. Read on to see what’s new for large screens on Android!

Previewing 12L: A feature drop for large screens

Today we're bringing you a developer preview of 12L, our upcoming feature drop that makes Android 12 even better on large screens. With the preview, you can try the new large screen features, optimize your apps, and let us know your feedback.

In 12L we’ve refined the UI on large screens across notifications, quick settings, lockscreen, overview, home screen, and more. For example, on screens above 600dp, the notification shade, lockscreen, and other system surfaces use a new two-column layout to take advantage of the screen area. System apps are also optimized.

image shows a phone with two-column layouts

Two-column layouts show more and are easier to use

We’ve also made multitasking more powerful and intuitive - 12L includes a new taskbar on large screens that lets users instantly switch to favorite apps on the fly. The taskbar also makes split-screen mode more discoverable than ever - just drag-and-drop from the taskbar to run an app in split-screen mode. To make split-screen mode a better experience in Android 12 and later, we’re helping users by automatically enabling all apps to enter split screen mode, regardless whether 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

Last, we’ve improved compatibility mode with visual and stability improvements to offer a better letterboxing experience for users and help apps look better by default. We’ve made letterboxing easily customizable by device manufacturers, who can now set custom letterbox colors or treatments, adjust the position of the inset window, apply custom rounded corners, and more.

We plan to release the 12L feature drop early next year, in time for the next wave of Android 12 tablets and foldables. We’re already working with our OEM partners to bring these features to their large screen devices - watch for the developer preview of 12L coming soon to the Lenovo P12 Pro. With the features coming to devices in the few months ahead, now is a great time to optimize your apps for large screens.

For developers, we highly recommend checking out how your apps work in split screen mode with windows of various sizes. If you haven’t optimized your app yet, see how it looks in different orientations and try the new compatibility mode changes if they apply. Along with the large screen features, 12L also includes a handful of new APIs for developers, along with a new API level. We’ve been careful not to introduce any breaking changes for your apps, so we won’t require apps to target 12L to meet Google Play requirements.

To get started with 12L, download the 12L Android Emulator system images and tools from the latest preview release of Android Studio. Review the features and changes to learn about areas to test in your apps, and see preview overview for the timeline and release details. You can report issues and requests here, and as always, we appreciate your feedback!

12L is for phones, too, but since most of the new features won’t be visible on smaller screens, for now we’re keeping the focus on tablets, foldables, and ChromeOS devices. Later in the preview we plan to open up Android Beta enrollments for Pixel devices. For details, visit developer.android.com/12L.

Making it easier to build for large screens

It's time to start designing fully adaptive apps to fit any screen, and now we're making it even easier. To help you get ready for these changes in the OS and Play, along with the developer preview we're releasing updates to our APIs, tools and guidance.

Design with large screen patterns in mind

The first step to supporting adaptive UI is designing your app to behave nicely on both a small and a larger screen. We’ve been working on new Material Design guidance that will help you scale your app’s UI across all screens. The guidance covers common layout patterns prevalent in the ecosystem that will help inspire and kick-start your efforts.

Adaptive UI patterns in the Material Design guidelines

Build responsive UIs with new navigation components

To provide the best possible navigation experience to your users, you should provide a navigation UI that is tailored to the Window Size Class of the user’s device. The recommended navigation patterns include using a navigation bar for compact screens and a navigation rail for medium-width device classes and larger (600dp+). For expanded-width devices, there are several ideas on larger screen layouts within our newly released Material Design guidance such as a List/Detail structure that can be implemented, using SlidingPaneLayout. Check out our guidance on how to implement navigation for adaptive UIs in Views and Compose.

While updating the navigation pattern and using a SlidingPaneLayout is a great way to apply a large screen optimized layout to an existing application with fragments, we know many of you have applications based on multiple activities. For those apps, the new activity embedding APIs released in Jetpack WindowManager 1.0 beta 03 make it easy to support new UI paradigms, such as a TwoPane view. We’re working on updating SlidingPaneLayout to support those APIs - look for an update in the coming months.

Use Compose to make it easier to respond to screen changes

Jetpack Compose makes it easier to build for large screens and diverse layouts. If you’re starting to adopt Compose, it’s a great time to optimize for large screens along the way.

Compose is a declarative UI toolkit; all UI is described in code, and it is easy to make decisions at runtime of how it should adapt to the available size. This makes Compose especially great for developing adaptive UI, as it is very easy to handle UI changes across different screen sizes or components. The Build adaptive layouts in Compose guide covers the basics of what you need to know.

Use WindowManager APIs to build responsive UIs

The Jetpack WindowManger library provides a backward-compatible way to work with windows in your app and build responsive UI for all devices. Here’s what’s new.

Activity embedding

Activity embedding lets you take advantage of the extra display area of large screens by showing multiple activities at once, such as for the List-Detail pattern, and it requires little or no refactoring of your app. You determine how your app displays its activities—side by side or stacked—by creating an XML configuration file or making Jetpack WindowManager API calls. The system handles the rest, determining the presentation based on the configuration you’ve created.

Activity embedding works seamlessly on foldable devices, stacking and unstacking activities as the device folds and unfolds. If your app uses multiple activities, activity embedding can enhance your user experience on large screen devices. Try the activity embedding APIs in Jetpack WindowManager 1.0 Beta 03 and later releases. More here.

Activity embedding with Jetpack WindowManager

Use Window size classes to help detect the size of your window

Window Size Classes are a set of opinionated viewport breakpoints for you to design, develop and test resizable application layouts against. The Window Size Class breakpoints have been split into three categories: compact, medium, and expanded. They have been designed specifically to balance layout simplicity with the flexibility to optimize your app for the most unique use cases, while representing a large proportion of devices in the ecosystem. The WindowSizeClass APIs will be coming soon in Jetpack WindowManager 1.1 and will make it easier to build responsive UIs. More here.

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

Window Size Classes in Jetpack WindowManager

Make your app fold-aware

WindowManager also provides a common API surface for different window features, like folds and hinges. When your app is fold aware, the content in the window can be adapted to avoid folds and hinges, or to take advantage of them and use them as natural separators. Learn how you can make your app fold aware in this guide.

Building and testing for large screens with Android Studio

Reference Devices

Since Android apps should be built to respond and adapt to all devices and categories, we’re introducing Reference Devices across Android Studio in many tools where you design, develop and test UI and layout. The four reference devices represent phones, large foldable inner displays, tablets, and desktops. We’ve designed these after analyzing market data to represent either popular devices or rapidly growing segments. They also enable you to ensure your app works across popular breakpoint combinations with the new WindowSizeClass breakpoints, to ensure your app covers as many use cases as possible.

Reference Device definitions

Layout validation

If you’re not sure where to get started adapting your UI for large screens, the first thing you can do is use new tools to identify potential issues impacting large screen devices. In Android Studio Chipmunk, we’re working on a new visual linting tool to proactively surface UI warnings and suggestions in Layout Validation, including which reference devices are impacted.

Layout validation tool with Reference Device classes

Resizable emulator

To test your app at runtime, we can use the new resizable emulator configuration that comes with Android Studio Chipmunk. The resizable emulator lets you quickly toggle between the four reference devices - phone, foldable, tablet, and desktop. This makes it easier to validate your layout at design time and test the behavior at runtime, both using the same reference devices. To create a new Resizable emulator, use the Device Manager in Android Studio to create a new Virtual Device and select the Resizable device definition with the Android 12L (Sv2) system image.

Resizable Android Emulator

Changes to Google Play on large screens

To make it easier for people to find the best app experiences on their tablets, foldables, and ChromeOS devices, we're making changes in Play to highlight apps that are optimized for their devices.

We’re adding new checks to assess each app’s quality against our large screen app quality guidelines to ensure that we surface the best possible apps on those devices. For apps that are not optimized for large screens, we’ll start warning large screen users with a notice on the app’s Play Store listing page.

We'll also be introducing large screen specific app ratings, as announced earlier this year, so users will be able to rate how your app works on their large screen devices. These changes are coming next year, so we're giving you advanced notice to get your apps ready!

Also, make sure to check out our post that highlights how we are evolving our business model to address developer needs in Google Play.

Learn more!

To help you get started with building for large screens and foldables, no matter whether you’re using Views or Compose, we’ve got you covered! We’re launching new and updated guidance on how to support different screen sizes both in a new and in an existing app, how to implement navigation for both Views and Compose, how to take advantage of foldable devices and more. Check them out in the large screens guides section for Views support or in the Compose guides section.

Nothing speaks louder than code - we updated the following samples to support responsive UIs:

For some hands-on work, check out our Support foldable and dual-screen devices with Jetpack WindowManager updated codelab.

Source: Android Developers Blog

Android @ Google I/O: Recapping building across devices

Posted by The Android Team

At Google I/O this year, we talked about how your app can take advantage of Android's different screens, both large and small. But if you missed the show, here are the top things you should know:

Tablets, Foldables, and Large Screens

It's more important than ever to design your app to work well on large screens — including tablets, foldables, and Chrome OS laptops. There are already over 250 million large screen Android devices in use today. Meanwhile, new foldable devices are making it easier for users to multitask, and opening up new experiences like tabletop mode for hands-free activities. See this example of Disney+ using tabletop mode on the Samsung Galaxy Z Fold2.

Fortunately, it's also easier than ever to design apps which seamlessly scale to adapt to any device size — including dynamically resizing on Chrome OS and foldable devices, taking advantage of Jetpack Compose or ConstraintLayout to build responsive layouts. We also studied how people interact with large screens, like where their fingers are placed, and we’re giving you APIs and Tools to make that experience easier:

SlidingPaneLayout 1.2.0 helps your content resize automatically to more space
Vertical navigation rails provide a more ergonomic experience on large screens
Constraint Layout 2.1 and MotionLayout help updating fold and transition states
Max widths on components avoid those terrible stretch UIs on larger activities
Jetpack WindowManager makes it easy to take advantage of new hardware features, like hinges and folds

We’ve also made updates to the Android platform, Chrome OS, and Jetpack WindowManager, so apps just work better by default. For example, many UI elements now have default Max Width values to make sure they look better on large screens, while changes to the Display API ensure that existing apps continue to render correctly on foldables even if they aren't using WindowManager to query window metrics.

Learn more about how we are helping you build for large screens with these I/O sessions:

For even more details, check out the what's new in foldables, tablets, and large screens article, or read the case study on how Google Duo sees increased engagement and improved ratings.

Wear OS

We announced our biggest update yet to the Wear platform, with new features, APIs and tools to help developers create beautiful, high quality wearable experiences.

There are new Jetpack APIs to help you streamline your development. The Tiles library gives users fast, predictable access to the information and actions they rely on most. Another notable addition is the Ongoing Activities API, which enables you to let your users return to your app after they’ve navigated away (to start some other task such as music playback). Both of these libraries are currently in alpha.

We also released a new set of APIs for health and fitness that act as an intermediary to the sensors and related algorithms on the device to provide apps with high-quality data related to activity, exercise, and health. The alpha of the Health Services platform is available to use today.

Download Android Studio Arctic Fox Beta to try out a developer preview of the new Wear system image and start preparing your apps for the new platform. Check out the I/O sessions below to learn more about these announcements:

You can also read more details on the latest changes to Wear, as well as learn about how Spotify is building on Wear.

Android TV

Android TV OS now has over 80 million monthly active devices, with 80% growth in the US and is at the heart of the Google TV experience launched last fall. Meanwhile, Google TV itself can be found on streaming devices like the Chromecast with Google TV, smart TVs from Sony, and as an app on Android devices — including tablets.

This year at I/O, we announced several new tools and features to make developing for Android TV OS easier:

Cast Connect with Stream Transfer allows moving existing audio and video streams between cast devices, while Stream Expansion allows playing audio on multiple devices simultaneously.
We are now making our first Google TV Emulator available alongside the Android TV emulator, both running on Android 11.
Firebase Test Lab is adding Android TV support, letting you test your app in the cloud across hundreds or thousands of virtual devices. Physical Devices will be coming soon.
We are making the Android 12 Beta 1 available for TV on ADT-3 today.

These releases make it easier to build and test applications across a range of device configurations, while bringing the latest Android 12, Googler Assistant, and Cast features to the TV. To learn more, watch the What's new in Android TV and Google TV session from I/O.

Android for Cars

Android Auto allows applications to connect with the infotainment displays built into many modern vehicles. To make this even easier we recently made the Android for Cars App Library available as part of Jetpack. This library allows navigation, EV charging, and parking apps to integrate directly with compatible cars.

We plan to expand to more app categories in the future, so if you’re expressing interest in bringing your app to Android Auto please fill out this interest form. You can also get started with the Android for Cars App Library today, by visiting g.co/androidforcars. Watch the What’s new with Android for Cars session from I/O for even more detail, or the accompanying What's new with Android for Cars blog post.

Source: Android Developers Blog

What’s new for Android developers at Google I/O

Cross-posted on the Android Developers blog by Karen Ng, Director, Product Management & Jacob Lehrbaum, Director of Developer Relations, Android & Play

As Android developers, we are all driven by building experiences that delight people around the world. And with people depending on your apps more than ever, expectations are higher and your jobs as developers aren’t getting easier. Today, at Google I/O, we covered a few ways that we’re trying to help out, whether it be through Android 12 - one of the biggest design changes ever, Jetpack, Jetpack Compose, Android Studio, and Kotlin to help you build beautiful high quality apps. We’re also helping when it comes to extending your apps wherever your users go, like through wearables and larger-screened devices. You can watch the full Developer Keynote, but here are a few highlights:

Android 12: one of the biggest design updates ever.

The first Beta of Android 12 just started rolling out, and it’s packed with lots of cool stuff. From new user safety features like permissions for bluetooth and approximate location, enhancements to performance like expedited jobs and start up animations, to delightful experiences with more interactive widgets and stretch overscrolling, this release is one of the biggest design updates to Android ever. You can read more about what’s in Android 12 Beta 1 here, so you can start preparing your apps for the consumer release coming out later this year. Download the Beta and try it with your apps today!

Jetpack Compose: get ready for 1.0 in July!

For the last few years, we’ve been hard at work modernizing the Android development experience, listening to your feedback to keep the openness–a hallmark of Android, but becoming more opinionated about the right way to do things. You can see this throughout, from Android Studio, a performant IDE that can keep up with you, to Kotlin, a programming language that enables you to do more with less code, to Jetpack libraries that solve the hardest problems on mobile with backward compatibility.

The next step in this offering is Jetpack Compose - our modern UI toolkit to easily build beautiful apps for all Android devices. We announced Compose here at Google I/O two years ago and since then have been building it in the open, listening to your feedback to make sure we got it right. With the Compose Beta earlier this year, developers around the world have created some truly beautiful, innovative experiences in half the time, and the response to the #AndroidDevChallenge blew our socks off!

With the forthcoming update of Material You (which you can read more about here), we’ll be adding new Material components as well as further support for building for large screens, making it fast and easy to build a gorgeous UI. We’re pressure testing the final bits in Compose and will release 1.0 Stable in July—so get ready!

Android Studio Arctic Fox: Design, Devices, & Developer Productivity!

Android Studio Arctic Fox (2020.3.1) Beta, the latest release of the official powerful Android IDE, is out today to help you build quality apps easier and faster. We have delivered and updated the suite of tools to empower three major themes: accelerate your UI design, extend your app to new devices, and boost your developer productivity. With this latest release you can create modern UIs with Compose tooling, see test results across multiple devices, and optimize debugging databases and background tasks with the App Inspector. We’re also making your apps more accessible with the Accessibility Scanner and more performant with Memory Profiler. And for faster build speeds, we have the Android Gradle plugin 7.0, new DSL, and variant APIs. You can learn more about the Android Studio updates here.

Kotlin: the most used language by professional Android devs

Kotlin is now the most used primary language by professional Android developers according to our recent surveys; in fact, over 1.2M apps in the Play Store use Kotlin, including 80% of the top 1000 apps. And here at Google, we love it too: 70+ Google apps like Drive, Home, Maps and Play use Kotlin. And with a brand-new native solution to annotation processing for Kotlin built from the ground up, Kotlin Symbol Processing is available today, a powerful and yet simple API for parsing Kotlin code directly, showing speeds up to 2x faster with libraries like Room.

Android Jetpack: write features, not boilerplate

With Android Jetpack, we built a suite of libraries to help reduce boilerplate code so you can focus on the code you care about. Over 84% of the top 10,000 apps are now using a Jetpack library. And today, we’re unpacking some new releases for Jetpack, including Jetpack Macrobenchmark (Alpha) to capture large interactions that affect your app startup and jank before your app is released, as well as a new Kotlin Coroutines API for persisting data more efficiently via Jetpack DataStore (Beta). You can read about all the updates in Android Jetpack here.

Now is the time: a big step for Wear

The best thing about modern Android development is that these tools have been purpose built to help make it easy for you to build for the next era of Android, which is all about enabling devices connected to your phone–TVs, cars, watches, tablets–to work better together.

Starting today, we take a huge step forward with wearables. First, we introduced a unified platform built jointly with Samsung, combining the best of Wear and Tizen. Second, we shared a new consumer experience with revamped Google apps. And third, a world-class health and fitness service from Fitbit is coming to the platform. As an Android developer, it means you’ll have more reach, and you’ll be able to use all of your existing skills, tools, and APIs that make your mobile apps great, to build for a single wearables platform used by people all over the world.

Whether it’s new Jetpack APIs for Wear tailored for small screens and designed to optimize battery life, to the Jetpack Tiles API, so you can create a custom Tile for all the devices in the Wear ecosystem, there are a number of new features to help you build on Wear. And with a new set of APIs for Health and Fitness, created in collaboration with Samsung, data collection from sensors and metrics computation is streamlined, consistent, and accurate–like heart rate to calories to daily distance–from one trusted source. All this comes together in new tooling, with the release of Android Studio Arctic Fox Beta, like easier pairing to test apps, and even a virtual heart rate sensor in the emulator. And when your app is ready, users will have a much easier time discovering the world of Wear apps on Google Play, with some big updates to discoverability. You can read more about all of the Wear updates here.

Tapping the momentum of larger screens, like tablets, Chrome OS and foldables

When it comes to larger screens -- tablets, foldables, and Chrome OS laptops-- there is huge momentum. People are increasingly relying on large screen devices to stay connected with family and friends, go to school, or work remotely. In fact, there are over 250 million active large screen Android devices. Last year, Chrome OS grew +92% year over year–5 times the rate of the PC market, making Chrome OS the fastest growing and the second-most popular desktop OS. To help you take advantage of this momentum, we’re giving you APIs and tools to make optimizing that experience easier: like having your content resize automatically to more space by using SlidingpaneLayout 1.2.0 and a new vertical navigation rail component, Max widths on components to avoid stretched UIs, as well as updates to the platform, Chrome OS, and Jetpack windowmanager, so apps work better by default. You can learn more here.

Google Duo's optimized experience for foldable devices

This is just a taste of some of the new ways we’re making it easier for you to build high quality Android apps. Later today, we’ll be releasing more than 20 technical sessions on Android and Play, covering a wide range of topics such as background tasks, privacy, and Machine Learning on Android, or the top 12 tips to get you ready for Android 12. If building for cars, TVs, and wearables is your thing, we got that covered, too. You can find all these sessions - and more - on the I/O website. Beyond the sessions and news, there’s a number of fun ways to virtually connect with Googlers and other developers at this year’s Google I/O. You can check out the Android dome in I/O Adventure, where you can see new blog posts, videos, codelabs, and more. Maybe even test out your Jetpack Compose skills or take a virtual tour of the cars inside our dome!

Source: Google Developers Blog

What’s new in foldables, tablets, and large screens

Posted by Oscar Wahltinez, Developer Relations Engineer, Google

Users are seeing more value in larger screens, and the benefits of doing more with a single device. Apps designed for large screen devices increase those benefits even further.

The ability to fold a screen offers better ergonomics for large devices. When folded, you can fit a tablet-sized screen in your pocket — unlocking utility that was previously unavailable on a portable device. Thinking about our app ecosystem, we’re excited because this is a hardware shift that is driving new expectations around what you can do from a handheld device. We see the demand for larger screens extending to tablets too, which have greatly increased in popularity, given the similar app experience.

Technological breakthroughs and our understanding of ergonomics have played a role in device form factors.

In this blog post, we'll explain what you should do to prepare your apps for large screens, and how recent updates have made developing your app easier. But first, let’s talk about what we're seeing with large screens — and why you should optimize your app.

Why large screens

There are many ways to use foldable devices, including a number of postures illustrated here.

Over the past year, we’ve seen device makers release exciting new foldable and tablet devices. Demand has increased as users are doing more than ever from these devices. Altogether, developers can reach more than 250 million active foldables, tablets, and Chromebooks by building for Android large screen devices today. Sales of tablet devices grew 16% in 2020 with analysts expecting more than 400 million Android tablets by 2023, and foldables are redefining what’s possible on premium devices. Android apps can also run on ChromeOS, which is now the second most popular desktop OS.

Large screen ready

Larger screens are changing how users interact with their device. These devices allow you to edit slide decks while looking at notes, look up restaurant recommendations while planning a night out, or watch a video while chatting with friends. Let’s talk about base-level support — features an app must support to be “large screen ready”. There are three main areas of focus when it comes to large screen readiness:

Designing for large screens
Multitasking
Input modes

They’re summarized below, but make sure to check out our large screen app quality guidelines for the full details.

Design for large screens

The first step is to ensure that your app is designed for large screens. To make this easier, we’ve defined specific window size breakpoints and device classes for you to optimize for. Add tablet layouts for displays where the shortest dimension is >600dp, and ensure your apps go edge-to-edge. Developers should also plan for their app to be used in both portrait and landscape modes, since larger screens are more likely to be used in landscape. We’ve got material adaptive components that we’ll be talking about to help developers make better use of the increased space.

Since foldable and large screen devices have a variable window size, adaptive layouts work better than splitting experiences based on screen size.

Multitasking

Going into split screen (or multi-window mode) and gestures like drag and drop are starting to become natural interactions that users expect to work seamlessly in their large screen devices. Your apps should handle multitasking seamlessly by being resizable. Handling folding and unfolding events and planning for your app to be in multi-window mode prevents your app from becoming letterboxed.

Drag and drop can be a natural interaction in large screen layouts, even within the same app.

By enabling multiple instance support, users can run multiple copies of your app side-by-side. The let’s users compare two products, reference notes while writing a document or maybe keeping your calendar in view as you are planning an event.

Input modes

Since many people use larger screens for productivity, tablets should support basic keyboard, mouse and stylus usage.

Users of Android apps on ChromeOS devices often have a keyboard; apps should ensure that standard keyboard navigation and shortcuts are available to provide improved accessibility.

Component updates

Several UI components across Jetpack and Material Design libraries have been updated to help you build a flexible user experience to scale your phone's UI to a larger screen.

SlidingPaneLayout

One of the most common adaptive layouts to optimize your app for large screens is implementing a list-detail UI. For example, a messaging app that lists messages on one side with the message detail on the other.

SlidingPaneLayout automatically adapts to configuration changes to provide a good user experience across different layout sizes.

UIs that would be one top of each other on a smaller screen can now easily lay out side-by-side. For this, you can use the updated version of the SlidingPaneLayout library — updated to support a two-pane style layout, SlidingPaneLayout uses the width of the two panes to determine how to lay out the UI. It does that by automatically determining if it can lay out side-by-side based on the content width and available space. For example, if the list pane is measured to have a minimum width of 200dp and the detail pane needs 400dp, then the SlidingPaneLayout automatically shows the two panes side by side if it has at least 600dp of width available.

SlidingPaneLayout is used in our sample application IOSched.

We have updated the library to recognize and adapt to folds and hinges . For example, if you are on a device with hinges that blocks part of the screen, it will automatically place your content on either side.

We have also introduced lock modes,which allow control over the swipe behavior when panes overlap (programmatically switching is also supported). For example, to prevent users from swiping to an empty pane you may want them to have to click on a list item to load information about that pane, but allow them to swipe back to the list. On a foldable device or tablet that has room to show both views side by side, the lock modes are ignored.

NavRail

A vertical Navigation Rail is functionally equivalent to Bottom navigation, and provides a more ergonomic navigation experience on larger screens. As you scale your UI, NavRail supports better reachability, since larger screens tend to be held by the side, whereas on the phone users are probably holding the device from the bottom.

NavRail automatically changes the location of the navigation menu depending on configuration changes.

For example, NavRail can help if vertical scrolling is key to your app. In those cases, a bottom navigation bar decreases the amount of content that’s visible, especially when tablet devices are being used in landscape orientation.

Other Components

We've also made updates across multiple other components. One of the biggest pitfalls when apps move to a larger screen is when UIs are stretched edge-to-edge across the whole screen. To help prevent this, we’ve added default Max Width values to certain Material Components where this commonly happens, for example:

Buttons
TextFields
Sheets

We will add more components to this list in the future. These changes provide opinionated defaults to help your apps adapt and look better out of the box on large screen devices. Find more information about using size constraints with components in the Material Design guidelines.

Most foreground UI elements should have a maximum width value.

WindowManager Jetpack library

Beyond component updates to help you scale your UI, we also have the WindowManager Jetpack library to help you build better experiences on these devices. This library is now available in alpha and it provides a common API surface for supporting different device types, starting with foldables and tablets.

You can use WindowManager to detect display features such as folds or hinges. It also gives information about how the display feature affects your app, so you can create an optimal experience. For example, reacting to the foldable device state changes when the device is folded into tabletop mode while the user is watching a video.

Applications should seamlessly adapt to a growing number of device configurations.

WindowManager also provides a couple of convenience methods to retrieve the current and maximum WindowMetrics information in a backward compatible way, starting from API level 14.

Platform changes

Display API deprecations

Your app needs to determine the screen or display size in order to render content appropriately for each device. With the introduction of the WindowMetrics API, a number of methods related to display size have been deprecated. For a backwards-compatible replacement, you should use the Window Manager Jetpack library.

Exclusive resources

Android 10 introduced the possibility to have multiple resumed apps running at the same time, with a single “top resumed” application. Most applications benefit from this change without the need of updates. The most notable exception is if your application uses an exclusive resource like the microphone or the camera. See our previous blog post for more details.

Case studies

Optimizing your app for large screens can improve the experience for your users, as well as deliver on business results. We’re seeing an increased number of apps take advantage of the opportunities with large screens on Google Play. As an example, Google Duo implemented tablet and foldable support to enhance their user experience, and saw an increase in app ratings and user engagement.

Google Duo's optimized experience for foldable devices, such as the Samsung Galaxy Z Fold2

In addition to Google Duo's enhanced user experience, we've modernized many additional apps to use adaptive layouts so they can take advantage of large screens and foldable devices:

Chrome added improved tab navigation for larger screens
YouTube redesigned its UI to improve usability in foldable devices
Google Photos displays more UI elements, like a search bar, in larger screens
Google Calendar provides a more ergonomic UI in larger screens

Learn more

To learn more about foldables and large screen devices, see the following resources:

Source: Android Developers Blog

What’s new for Android developers at Google I/O

Posted by Karen Ng, Director, Product Management & Jacob Lehrbaum, Director of Developer Relations, Android & Play

Android 12: one of the biggest design updates ever.

Jetpack Compose: get ready for 1.0 in July!

Android Studio Arctic Fox: Design, Devices, & Developer Productivity!

Kotlin: the most used language by professional Android devs

Android Jetpack: write features, not boilerplate

Now is the time: a big step for Wear

Tapping the momentum of larger screens, like tablets, Chrome OS and foldables

Google Duo's optimized experience for foldable devices