Stay organized with collections
Save and categorize content based on your preferences.
Once you’ve determined the sequences of templates for your app task, you can
customize the content of each template and some of the styling for your
app.
To learn about customization options for specific templates, see
Templates.
Visual design customization
While the app library determines the template layouts and default styling, app
designers and vehicle OEMs both contribute to custom aspects of the visual
design.
Aspect of UI
What the library determines
What apps determine or customize
What vehicle OEMs can customize
Images and iconography
Iconography for standard elements, such as back button and loading
spinner
Adjustments to size, shape, button locations and proportions of
template elements in AAOS versions of app (or example, the exact sizing for
“large” and “small” images and icons in their vehicles)
Typography and text length
Font family and size in Android Auto version of app (see
Typography)
Longer and shorter
variants of text strings,
in some cases, to accommodate differing amounts of space on different car
screens
Font family and size in AAOS versions of app
Color
Default colors in Android Auto version of app (except those supplied by
apps, noted at right)
Colors of place-list markers, some text elements, and some background
colors (review the next section,
Color customization for more information).
Adjustments to default & app-supplied colors to as needed to blend with
vehicle UIs in AAOS versions of app
Color customization
Apps can provide colors for elements of certain templates, as noted in the
following list. For AAOS versions of your app, vehicle OEMs can make some
adjustments.
Apps can customize:
Text color in secondary line of list
rows
(car maker controls color of primary line for AAOS)
For most custom styling (other than the exceptions noted in the previous
section), apps have the following color options:
Provide up to 2 custom accent colors (with light and dark variants, to be
applied as appropriate by Android Auto, or by vehicle OEMs for AAOS versions
of apps)
Choose from 4 standard Android for Cars colors (current versions shown at
right; these may change in the future)
Standard colors
Sample accent colors
Judicious use of color helps to focus the intent of a design. Be cautious about
using colors when they don’t serve a function.
App customization examples
Vehicle OEM customization examples
These examples show additional style customizations a vehicle OEM might apply to
the AAOS version of an app. While the color of the routing card comes from the
app, vehicle OEMs customize the fonts, theming, and shapes for the routing card,
buttons, and ETA card. They can also adjust button width, as shown in
Customize buttons below.
Daytime navigation view
Nighttime navigation view
Customize button width, color, and shape
These examples highlight how OEMs can customize button width, color, and shape,
in the AAOS version of an app.
For the button the app designated as the
primary button,
OEMs can decide whether to use an app accent color or their own accent color.
They can also choose whether to put the primary button on the left or on the
right, to accommodate situations such as vehicles with right-hand drive.
[[["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."],[[["\u003cp\u003eAfter determining your app's template sequence, you can customize the content and some styling, with visual design aspects outlined in the document.\u003c/p\u003e\n"],["\u003cp\u003eApp developers and vehicle OEMs can customize the UI, including images, layout, typography, and color, to varying degrees depending on the element and AAOS version.\u003c/p\u003e\n"],["\u003cp\u003eApps have color customization options, including providing up to 2 custom accent colors and choosing from 4 standard Android for Cars colors, while ensuring sufficient contrast for legibility.\u003c/p\u003e\n"],["\u003cp\u003eVehicle OEMs can further customize the AAOS app versions, adjusting elements like the routing card, button width, color, and shape, to integrate with their vehicle's UI.\u003c/p\u003e\n"]]],[],null,["\u003cbr /\u003e\n\nOnce you've determined the sequences of templates for your app task, you can\ncustomize the content of each template and some of the styling for your\napp.\n\nTo learn about which aspects of the overall visual design you can customize, see\n[Visual design customization](#visual), which includes\n[App customization examples](#customization-examples). For AAOS versions of your\napp, be aware that vehicle OEMs can adjust the styling to fit their vehicles, as\nshown in [Vehicle OEM customization examples](#oem-customization).\n\nTo learn about customization options for specific templates, see\n[Templates](/cars/design/create-apps/apps-for-drivers/templates/overview).\n\nVisual design customization\n\nWhile the app library determines the template layouts and default styling, app\ndesigners and vehicle OEMs both contribute to custom aspects of the visual\ndesign.\n\n| Aspect of UI | What the library determines | What apps determine or customize | What vehicle OEMs can customize |\n|--------------------------------|----------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **Images and iconography** | Iconography for standard elements, such as back button and loading spinner | Apps provide all images and iconography (see [Material icons](https://fonts.google.com/icons?selected=Material+Icons) and [Google Play icon specifications](https://developer.android.com/distribute/google-play/resources/icon-design-specifications)), except as noted at left | |\n| **Layout, sizing and shapes** | Default layout, plus size and shapes of all elements (defaults are standard in Android Auto version of app) | - Whether images and icons are \"large\" or \"small\" - Whether [tabs](/cars/design/create-apps/apps-for-drivers/templates/tab-template) appear at the top of certain templates for switching views - Whether a second map displays in the cluster ([Navigation template](/cars/design/create-apps/apps-for-drivers/templates/navigation-template) only) | Adjustments to size, shape, button locations and proportions of template elements in AAOS versions of app (or example, the exact sizing for \"large\" and \"small\" images and icons in their vehicles) |\n| **Typography and text length** | Font family and size in Android Auto version of app (see [Typography](/cars/design/android-auto/design-system/typography)) | Longer and shorter [variants of text strings](https://developer.android.com/training/cars/apps#multi-text), in some cases, to accommodate differing amounts of space on different car screens | Font family and size in AAOS versions of app |\n| **Color** | Default colors in Android Auto version of app (except those supplied by apps, noted at right) | Colors of place-list markers, some text elements, and some background colors (review the next section, [Color customization](#color) for more information). | Adjustments to default \\& app-supplied colors to as needed to blend with vehicle UIs in AAOS versions of app |\n\nColor customization\n\nApps can provide colors for elements of certain templates, as noted in the\nfollowing list. For AAOS versions of your app, vehicle OEMs can make some\nadjustments.\n\nApps can customize:\n\n- **Text color** in secondary line of list [rows](/cars/design/create-apps/apps-for-drivers/components/row) (car maker controls color of primary line for AAOS)\n- **Button text color**\n- **Button background colors** (except on [action strip](/cars/design/create-apps/apps-for-drivers/components/action-strip) and [map action strip](/cars/design/create-apps/apps-for-drivers/components/map-action-strip))\n- **Place-list marker colors**\n- **Routing-card elements** : background color, images, and color of duration value in trip estimate (within [Navigation template requirements](/cars/design/create-apps/apps-for-drivers/templates/navigation-template#requirements))\n- **Turn-by-turn notifications** (background color)\n\n| **Note:** When customizing text color, you can choose from 4 standard colors or up to 2 custom accents. You can choose any color for the other items in the list above.\n\nExamples of customized template components are shown in\n[App customization examples](#app-customization) and\n[Vehicle OEM customization examples](#oem-customization).\n\nChoose colors for your app\n\nFor most custom styling (other than the exceptions noted in the previous\nsection), apps have the following color options:\n\n- **Provide up to 2 custom accent colors** (with light and dark variants, to be applied as appropriate by Android Auto, or by vehicle OEMs for AAOS versions of apps)\n- **Choose from 4 standard Android for Cars colors** (current versions shown at right; these may change in the future)\n\n| Standard colors | Sample accent colors |\n|-----------------|----------------------|\n| | |\n\nJudicious use of color helps to focus the intent of a design. Be cautious about\nusing colors when they don't serve a function.\n| **Note:** For legibility while driving, make sure contrast between foreground and background colors meets [contrast requirements](/cars/design/android-auto/design-system/color#contrast) of 4.5:1.\n\nApp customization examples\n\nVehicle OEM customization examples\n\nThese examples show additional style customizations a vehicle OEM might apply to\nthe AAOS version of an app. While the color of the routing card comes from the\napp, vehicle OEMs customize the fonts, theming, and shapes for the routing card,\nbuttons, and ETA card. They can also adjust button width, as shown in\n[Customize buttons](#oem-buttons) below. \n**Daytime navigation view** \n**Nighttime navigation view**\n\n\u003cbr /\u003e\n\nCustomize button width, color, and shape\n\nThese examples highlight how OEMs can customize button width, color, and shape,\nin the AAOS version of an app.\n\nFor the button the app designated as the\n[primary button](/cars/design/create-apps/apps-for-drivers/components/button#primary),\nOEMs can decide whether to use an app accent color or their own accent color.\nThey can also choose whether to put the primary button on the left or on the\nright, to accommodate situations such as vehicles with right-hand drive.\n\n| Primary button on left, standard colors | Primary button on right, custom colors |\n|-----------------------------------------|----------------------------------------|\n| | |"]]
