How Android 13 support apps on different screen?
Whether you're working on an existing app or creating a new one from scratch, there are an increasing number of devices your app can run on, with screen sizes ranging from the smallest phones to foldables to the largest tablets and laptops.
The first step is design. Designing for large screens starts with think about how the user holds and uses the device. Think about comfort, capability, efficiency, and immersion. So expand and reorganize your UI purposefully. Consider combining content and how you navigate through it. To help you organize the content and actions in your app, Google providing starting points for common use cases. These are a series of large-screen layouts that Google call canonical layouts.
Google has three of them-- this detail layout, which uses two columns, whether for a list or a group of items, and the other one for a detailed view. Supporting panel, where the screen is divided between a focus panel and a supporting panel. And the feed, which uses tiles to allow discovery. You also need to find the right threshold at which to change your UI. So we've defined new breakpoint values that help you classify devices into predefined size classes-- compact, medium, and expanded. For more design considerations, check out "Designing Apps for Large Screens."
Jetpack WindowManager 1.1 will provide window size classes, APIs to provide these predefined window sizes which you can use to adapt your UI based on the available space. To build adaptive UIs without doing an entire rewrite, Google showcase a number of APIs and when to use them. If you're using multiple activities, use activity embedding to easily place activities side by side. To combine fragments, check out SlidingPaneLayout. To adapt your navigation UI, see how the NavRail can help. And, for drag and drop, use the new Jetpack drop helper utility class. To test your app, use the resizable emulator and the new Android Desktop Emulator. Check out "Update your app for the larger screen" for more information.
When building for large screens, consider how your users will interact with your app. They may use a keyboard, a mouse, a trackpad, or perhaps a stylus. Google have updated design guidance helping you to understand input considerations when designing for a variety of devices. When it comes to implementation, both Views and Compose 1.2 support clicks and scrolls. Google have peripherals out of the box. But there are several use cases you need to pay a little attention to. Does your layout look good with a virtual and a physical keyboard? Do your users expect some text to be selectable? Is it? Once you have the basics covered, consider improving the usability of your app even more. Implement keyboard shortcuts specific to your app or allow users to navigate using the arrow keys or Tab. Ensure that each interactive element is focusable and navigated to in the right order, but also that elements that don't need to be flexible, aren't. For extra polish, consider giving interactive elements hover states. And, finally, see how your app works with a stylus. "Input for all screens" shows you how to implement all of these use cases and ensure your users get the best experience.
Source: Google IO