Style foundations
Stay organized with collections
Save and categorize content based on your preferences.
The styles for the two Android for Cars systems – Android Auto and Android Automotive OS (AAOS) – are based on the same interaction design and visual design principles. However, the style and layout details for these systems differ in some ways, based on the unique context for each system.
Here's an overview of the style-related differences between these systems. For details about styles and layouts for each, visit Android Auto design system and AAOS design system.
|
Android Auto |
AAOS |
Style context |
- Google builds and controls the UI
- UI is projected from phone onto car screens
- UI has same look and feel in all cars
- Style details reflect Google brand, with app branding accents
|
- Car makers build the UI based on AAOS
- UI is built into car infotainment systems
- UI is customized for each car model
- Style details reflect car-maker brand, with app branding accents
|
Purpose of style and layout guidelines |
- Explain the thinking behind the style choices in the UI
- Serve as a reference for any design choices app developers can make
|
- Explain the thinking behind style recommendations for car makers
- Provide detailed guidance for car makers creating custom layouts and styles for their UIs
- Serve as a reference for any design choices app developers can make
|
Key differences |
- Google colors
- Google Sans font for larger type sizes
- Google-determined layout that adapts across car types
|
- Car-maker colors
- Standard fonts for all type sizes (Roboto or Noto Sans)
- Custom layouts
|
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.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{"lastModified": "Last updated 2024-07-23 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 2024-07-23 UTC."]]