Android devices come in a variety of form factors—phones, tablets, foldables, ChromeOS devices—which have a wide range of screen sizes. Android supports many display modes, including multi-window, multi-display, free-form, and picture-in-picture. Foldable devices can be in various states or postures, such as tabletop or book.
Consider different use cases for your app as you begin to design it. For example:
Large Screen devices give users more room to engage with your media app's content in different ways.
Users might multitask while watching a video in a multi-window configuration or take advantage of the larger screen to apply more complex edits after capturing an image.
Users might turn to a tablet to stay connected with video calls and see their friends and family in greater detail. Your app can display richer context about a title or scene in a custom playback overlay or offer more control options on-screen.
Carousels in a browsing view can feature more variety for greater visual appeal, or your media app can keep users engaged by offering a browsable feed side by side with playback.
Keep in mind that your media app has the same code running on a standard phone, a foldable, a tablet, and ChromeOS devices, so you should design for large screens from the very beginning of your app development. For more information and visual examples, see Large screen gallery.
Make your media app responsive by default
Avoid broken user experiences in your media app by making your app's layout adaptive across phones, tablets, foldables, and ChromeOS devices.
Your app should be responsive to account for different display sizes, orientations, and form factors. An adaptive layout changes based on the display space available to it. For more information, see Support different display sizes.
Design according to guidelines
Core app quality is the basis of all Android apps regardless of display size, device posture, or other device-specific considerations. Your app should meet these basic requirements before you start designing for a large screen. For more information, see Core app quality.
Your app should offer an excellent user experience regardless of device form factor, screen size, display mode, or posture, so design your app according to the following Tier 1, 2, and 3 guidelines.
The guidelines define a comprehensive set of quality requirements for most types of Android apps.
Tier 3:
At this basic level, your app still must adhere to the UI and graphics requirements. Your app is large screen ready, and users can complete critical task flows but with a less than optimal user experience.
The app layout might not be ideal, but it does run full screen, or full window in multi-window mode. It's not letterboxed and it doesn't run in compatibility mode. The app provides basic support for external input devices, including keyboard, mouse, and trackpad. For more information, see Large screen ready.
Tier 2:
Here, your app implements layout optimizations for all screen sizes and device configurations, along with enhanced support for external input devices. For details, see Large screen optimized.
Tier 1:
This is the best level of support and offers the user the most excellent experience with your app, as it specifies premium features and capabilities.
Where applicable, the app supports multitasking, foldable postures, drag, and stylus input. At this level, apps are highly differentiated, so pay close attention to the guidelines for such things as multi-tasking and foldable postures. To learn more, see Large screen differentiated.
Optimized layouts
Take advantage of the increased space of large screens without letterboxing (due to restricting orientation) or stretching. By optimizing your app's layout for media and social media, you expand your app's reach and create a better user experience across all large screen form factors—tablets, foldables, and ChromeOS devices—as well as support all phone sizes.
Navigation rail and drawer components provide out-of-the way navigation for UI convenience and control. The components also complement the canonical layouts (list-detail, feed, and supporting pane) by positioning primary navigation destinations within close reach while occupying a minimum of screen space.
Media layouts
Make your app more usable by implementing media-specific layouts for list-detail, feed, and supporting pane. For information on MDX, Flutter, and Compose layouts, see Layout resources.
List-detail: Designing your app with an interactive media browser lets users browse different media while watching or listening. Media titles are displayed side by side with a playing video or audio file. If the device orientation changes, a list-detail layout responds to preserve the app state. To learn more, see List-detail layouts.
Feed: A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content, such as a music feed or movie and TV kiosk in your app. For more information, see Feed layouts.
Supporting pane: With primary and secondary display areas, your app can embed a supporting pane for context, relevance, or reference, such as a scrolling list of similar titles, published reviews, or additional works by the same artists or actors. For further details, see Supporting pane layouts.
For a curated collection of media layouts, see Media gallery.
Social Media layouts
Large screens give social media users more work space to create, to multitask, to drag content between apps, and share it. With distinctive features and capabilities not possible on small screen devices, your large screen media app can take advantage of list-detail, feed, and supporting pane layouts.
List-detail: This is ideal for messaging apps, contact managers, or file browsers. For example, your app can display a list of conversations side by side with details to stay current on the latest messages. For more information, see List-detail layouts.
Feed: Common components in this style of layout are cards and lists. For example, create a collage of posts in a flexible grid format, or use size and position to draw attention to prominent posts. Users can quickly view large groups of content. For more information, see Feed layouts.
Supporting pane: Search and reference apps or a productivity app can benefit from this style of layout. It keeps content creation tools close at hand for the user. For example, your app can let users adjust settings, access color palettes, apply effects, and see the changes instantly. For more information, see Supporting pane layouts.
For a curated collection of social media layouts, see Social media gallery page.
Best practices for large screen media apps
Using best practices for large screens helps you avoid unnecessary reworking of your app. They also make your app more user friendly across more devices from the beginning, especially in regards to orientation, keyboard shortcuts, camera preview support, and foldable postures.
Orientation and resizing
If your media app declares orientation and resizing restrictions, Android activates a compatibility mode. Although compatibility mode ensures your app behaves acceptably, the usability is greatly decreased, and the user experience suffers.
For example, if your app is on a tablet, the tablet docks in landscape orientation. If your app is restricted to portrait, this causes letterboxing, which is not ideal for the end user. Your app should let people use their preferred orientation, so take advantage of the available size of a large screen in your design.
Any restrictions to orientation reduces the way users can interact with content or consume media, which limits the use of your app. Changing orientation can affect sizing to some degree but resizing won't necessarily change orientation.
Keyboard shortcuts
On a larger screen, keyboard shortcuts on physical keyboards, like start, stop, pause, rewind, and forward, are more likely to be used, making the user experience a consistent user experience with a keyboard.
Users expect these functions in their media apps. To lessen friction points for users, consider testing your app with a physical keyboard. This helps you to notice and include these important shortcuts in your app at the start of your design.
Camera preview support
With large screens, you can have more issues with stretching, cropping, and rotation. So, you can't assume the size of the camera preview is what the UI in your media app actually renders.
For example, if a user takes a picture with their tablet but on their tablet screen it renders upside down, this is a suboptimal experience. Include camera preview support for large screens.
For more information, see CameraX preview, or Camera2 preview.
Foldable postures
Designing your media app for large screens includes foldable postures. Your app, for example, can let a user have a tabletop configuration for media playback or use a rear display and dual screen mode for previews and capturing.
With foldable postures included in your development plan, your app is available to more devices and has a wider impact. You enlarge the media experience for the user in ways other devices cannot do without foldable postures. For more information, see Foldable postures.