UX
Stay organized with collections
Save and categorize content based on your preferences.
TIER 2 — Large screen optimized
To users, the user interface is the app. The UI determines the user experience,
which determines user satisfaction, app usage, app purchases, customer
retention.
Large screens offer expansive display space for innovative, accommodative UIs
that provide a UX small screens can't replicate.
Optimize your app for large screens by including the following UI elements:
- Navigation rail or navigation drawer
- Large touch targets
- Well-placed menus and dialogs
- Multipane layouts
Adaptive layouts
Create adaptive layouts that optimize your app's UI on screens large and small.
Design and build for multiple form factors simultaneously. Future-proof your app
for new device types.
Canonical layouts
Take advantage of proven large screen layouts to make your app UX exceptional.
Create a list‑detail, supporting pane, or feed layout to make more content
more manageable and more enjoyable.
Responsive UI
Format UI elements based on screen size. Constrain the width of buttons, cards,
and text fields that are full width on small screens to a functionally
appropriate size on large screens. Don't let dialog boxes and other modal
windows fill the entire screen. Position context menus and other
element‑related pop‑up displays adjacent to the element the user
selected, not centered on screen.
Activity embedding
Update your activity‑based legacy apps with multipane layouts on large
screens. No code refactoring required. Configure your layouts in XML or with a
few Jetpack WindowManager API calls.
Next steps
To learn about UI development for optimized UX, see the following developer
guides:
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-02-10 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-02-10 UTC."],[],[],null,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]
