Develop

Android design requirements

Updated: Nov 4, 2026

Overview

Android apps on Meta VR devices require design modifications to work with mixed reality input methods. Users interact through hand tracking and controllers, which affects navigation patterns, hit target sizing, and visual design.

Key differences from mobile Android include:

No system-provided back button across all input methods
Larger minimum hit target requirements (48dp x 48dp minimum)
Different color needs due to Meta VR device display characteristics
Typography legibility requirements for spatial viewing distances

The following requirements ensure your app functions correctly and provides appropriate usability on Meta VR devices. These changes address navigation, input handling, visual design, and accessibility.

Guidance	Details	Guidance Level
Add a back button to the interface if needed	Unlike Android mobile devices, a system back button is not available across all input modalities. Add a back button to your app’s interface when users need one.	Requirement

Inputs and hit targets

Guidance	Details	Guidance Level
Ensure adequate hit target sizes	Use hit targets of at least 48dp x 48dp. This size allows space for a user’s finger and hand tracking movement. Use at least 60dp x 60dp for primary controls.	Requirement
Use invisible hit slop	Add hit slop when an asset does not meet the minimum target size. The example image shows a small button that needs hit slop. Add hit slop to actionable icons as well.	Requirement
Leave enough space between components	Leave room for invisible hit slop around small components. Overlapping hit areas can make the wrong control respond.	Requirement
Space targets for Look and Pinch	On devices where Look and Pinch is the default input method, keep at least 16dp between the visually dominant parts of adjacent interactive elements, such as their icons or labels. The system scales your app window so that 16dp subtends about 1 degree. See Eyes best practices.	Recommended
Add hover states to all targets and inputs	Add hover and focus states to interactive elements to support multiple input modalities.	Requirement

On devices where Look and Pinch is the default input method, the system renders the hover effect on your app’s behalf, and your app does not receive hover events. Design your selection affordances to match the shape and style of that system hover effect so the transition from hover to selection looks continuous. See Privacy-preserving hover design for 2D apps.

Color

Guidance	Details	Guidance Level
Provide sufficient color contrast	Use a contrast ratio of at least 4.5:1 for regular text and 3:1 for headlines or non-text elements, such as button backgrounds.	Requirement
Test colors on a Meta VR device	Meta VR device color space can make colors look more saturated than they do on a phone or desktop. Test the app on a Meta VR device and adjust its colors when needed.	Recommended
Avoid using pure white (`#FFFFFF`) and black (`#000000`)	Pure white and black create harsh contrast in mixed reality. Use light and dark gray instead. Keep light backgrounds at `#DADADA` or darker to reduce eye strain.	Recommended

Typography

Guidance	Details	Guidance Level
Choose the correct font size	Use at least 14px for readable text. Use 18px or larger for more comfortable reading. Font design can affect the exact size needed.	Requirement
Choose a legible font	Choose a sans-serif font with a high x-height and large counters. These traits keep text clear at small sizes and while the view is scaled. Inter provides a native look and strong legibility.	Recommended
Choose an appropriate font weight	Use size and weight to create a clear hierarchy. Black, Bold, Medium, and Regular weights are more legible than Light and Thin weights. Increase the text size when using a light weight.	Recommended

Icons

Guidance	Details	Guidance Level
Use simple, recognizable icons	Simplify icons for greater clarity and legibility even at small sizes. Avoid using complex icons with delicate, thin stroke weights. Use icons designed for Meta Horizon OS to achieve a native look and feel.	Recommended
Provide icons at appropriate sizes	Design icons on a 192x192 pixel source grid for use on a 24x24 pixel display grid. The larger source grid keeps icons sharp on higher-resolution devices.	Recommended

For a Jetpack Compose implementation of these styles, use the Meta VR UI Set SDK. It includes Meta Horizon OS typography, icons, semantic colors, and components with 48 dp minimum interaction targets.

Streaming media requirements
Make your existing app compatible with Meta VR devices: address unsupported dependencies and permissions, and use one codebase across Meta VR devices and other Android platforms.

Design guidelines

Design for Meta Quest
Styles
Color: Color guidelines for immersive experiences.
Icons and images: Guidelines for icons and images.
Inputs and hit targets: Input and hit target styling guidelines.
Layouts: Layout guidelines for immersive experiences.
Typography: Typography guidelines for immersive experiences.
Inputs
Controllers: Design and UX best practices for using controllers.
Peripherals: Design and UX best practices for using peripherals.
Input modalities: Explore different input modalities.
Input mappings: Explore how input mappings bridge modalities and interaction types.
Input hierarchy: Understand the input hierarchy.
Ray casting: Learn about indirect interaction through ray casting.
Touch: Learn about direct interaction through touch.
Grab: Learn about grab interactions for object manipulation.
Layout
Icons and images: Guidelines for icons and images.
Typography: Guidelines for typography.
Panels: Best practices for using panels components.
Windows: Best practices for using windows components.
Tooltips: Tooltips components best practices.
Cards: Overview of the types of cards components.
Dialogs: Understand dialogs components and best practices.