Guidelines for custom screens
Stay organized with collections
Save and categorize content based on your preferences.
For most aspects of media apps used in Android Automotive OS, you do not need to design custom screens. The areas of exception are settings and sign-in. If you want users to access app settings, you need to design settings screens. Also, if your app requires sign-in, you need to provide a sign-in flow, which you can customize from the sample code in the Universal Android Music Player.
These general style guidelines apply to both custom settings screens and customized sign-in screens. They will help you to optimize your designs to be viewed on a car screen, while parked, at any time of day or night.
For additional guidelines specific to settings and sign-in, refer to Design settings and Adapt sign-in flow.
| Requirement level |
Guidelines |
| MUST |
App developers must:
- Provide a Close affordance to exit the settings screen and top-level sign-in screen
- Provide a Back affordance from any subsequent screens following the top-level screen
- Position the Close or Back affordance at the top left of the screen
- Maintain a contrast ratio of at least 4.5:1 between backgrounds and icons or text
- Use recommended type sizes of at least 32dp for primary text and 24dp for secondary text
- Keep touch targets above the recommended minimum size of 76 x 76dp
|
| SHOULD |
App developers should:
- Use a dark theme for all screens and overlays
- Include a logo or app icon on all screens
- When using an accent color, use the same one provided as a branding element
- Keep text strings within the recommended maximum text length of 120 characters
- Provide a distance of at least 24dp between touch targets where possible
|
| MAY |
App developers may:
- Decide whether to implement sign-in and settings functions as part of their app
|
Rationale:
Screens designed directly by media app developers should
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-07-23 UTC.
[null,null,["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eIn Android Automotive OS, media apps generally don't require custom screens except for settings and sign-in flows.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers must adhere to specific design requirements for custom settings and sign-in screens, such as contrast ratios, touch target sizes, and affordances.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers should follow guidelines including using dark themes, incorporating branding elements, and adhering to text length recommendations for optimal usability in vehicles.\u003c/p\u003e\n"],["\u003cp\u003eDetailed design specifications and resources are available in the linked documentation for design system and foundations.\u003c/p\u003e\n"]]],[],null,["# Guidelines for custom screens\n\n\u003cbr /\u003e\n\nFor most aspects of media apps used in Android Automotive OS, you do not need to design custom screens. The areas of exception are settings and sign-in. If you want users to access app settings, you need to design settings screens. Also, if your app requires sign-in, you need to provide a sign-in flow, which you can customize from the sample code in the [Universal Android Music Player](https://github.com/android/uamp/tree/master/automotive).\n\nThese general style guidelines apply to both custom settings screens and customized sign-in screens. They will help you to optimize your designs to be viewed on a car screen, while parked, at any time of day or night.\n\nFor additional guidelines specific to settings and sign-in, refer to [Design settings](/cars/design/automotive-os/apps/media/create-your-app/design-settings) and [Adapt sign-in flow](/cars/design/automotive-os/apps/media/create-your-app/adapt-signin-flow). \n[Design system\nGuidelines on color, typography, sizing, and more](/cars/design/automotive-os/design-system/overview) \n[Design foundations\nVisual- and interaction-design principles for in-vehicle user interfaces](/cars/design/design-foundations/overview)\n\n| Requirement level | Guidelines |\n|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **MUST** | App developers must: - Provide a Close affordance to exit the settings screen and top-level sign-in screen - Provide a Back affordance from any subsequent screens following the top-level screen - Position the Close or Back affordance at the top left of the screen - Maintain a [contrast ratio of at least 4.5:1](/cars/design/automotive-os/design-system/color#contrast) between backgrounds and icons or text - Use [recommended type sizes](/cars/design/design-foundations/visual-principles#make_content_easy_to_read) of at least 32dp for primary text and 24dp for secondary text - Keep touch targets above the [recommended minimum size](/cars/design/automotive-os/design-system/sizing#aligning_icons_and_touch_targets) of 76 x 76dp |\n| **SHOULD** | App developers should: - Use a [dark theme](/cars/design/automotive-os/design-system/color#palettes_and_gradients) for all screens and overlays - Include a logo or app icon on all screens - When using an accent color, use the same one provided as a [branding element](/cars/design/automotive-os/apps/media/create-your-app/provide-branding-elements) - Keep text strings within the [recommended maximum text length](/cars/design/design-foundations/visual-principles#make_content_easy_to_read) of 120 characters - Provide a distance of at least 24dp between touch targets where possible |\n| **MAY** | App developers may: - Decide whether to implement sign-in and settings functions as part of their app |\n\n**Rationale:**\n\nScreens designed directly by media app developers should\n\n- Support standard media app navigation patterns and design conventions.\n\n- Reflect design principles and visual foundations for Android Automotive OS."]]
