You can customize the Dialer UI to reflect your brand and to ensure a consistent look across their apps.
Customizing the Dialer involves the following three tasks:
| Task | Description |
|---|---|
Apply global styling across all views in the Dialer user interface |
|
Apply optional custom styling to UI elements that appear only in specific Dialer views |
|
Adjust, rearrange, or alter Dialer layouts, if needed, to better fit the car's interior or supported features |
For UX guidance, see the Dialer checklist.
Apply global styling
The first customization step is to apply global, brand-appropriate styling across all views in Dialer.
By styling colors, text appearance, and other global aspects of the Dialer UI to reflect their brand, car makers create a consistent user experience across their apps. (For examples of the Dialer interface, visit Dialer app This section explains what can be customized globally for Dialer, and it provides guidelines for making vehicle-optimized style choices.
What can be styled globally
Car makers can customize the following aspects of the UI across multiple Dialer views:
- Color palette
- Typography
- List-item sizing
- Avatar shape and size
- Icon appearance
- App bar appearance
- Button appearance
- Dialog appearance
When making changes to styling, keep in mind the following guidelines.
General style guidelines
Observe the same styling conventions for Dialer as for other apps in your UI, with design choices optimized for in-vehicle experiences.
What's required
Follow our general UX requirements, which covers:
- Contrast ratio
- Minimum type and touch-target sizes
- Dark theming
- Distance between touch targets
These requirements help create a vehicle-optimized, glanceable, and consistent UI.
Style Dialer views
The next step after applying global styling is to apply optional custom styling to specific Dialer views.
Some elements that occur only in specific views, such as the keypad buttons, might benefit from styling to fit your brand and car interiors. For examples of the Dialer interface, visit Dialer app.
What's customizable in specific views
Four of the Dialer views have view-specific elements for which car makers might want to provide custom styling.
| View | Customizable elements |
|---|---|
Recents |
Call history icons |
Dialpad |
Keypad buttons |
In-call status screen |
Control bar icons |
On-hold overlay |
Switch icon |
Car makers can override the styling of a global UI feature, such as text appearance, in any Dialer view for a specific reason.
When customizing Dialer-specific views, keep in mind the general styling guidelines provided for customizing global styles.
Modify layouts
Optionally, car makers cab modify Dialer layouts in certain circumstances.
Car makers can:
- Adjust layouts to better fit their screen dimensions
- Rearrange a layout's elements for a specific car or locale
- Alter a layout to disable a feature they don't support
Layout modifications that go beyond simple adjustments — particularly when they involve disabling a feature — should be undertaken with caution to ensure Dialer remains functional.
When making modifications that disable features or rearrange elements of a layout, adhere to the general style guidelines and ensure that remaining Dialer features work as expected.
Adjust layouts to fit screen dimensions
If the default versions of the Dialer layouts aren't optimal for a car's particular screen dimensions, car makers can adjust them.
Adjusting layouts to fit screen dimensions involves two steps:
- Setting overall screen height and width in resource overlays
- Ensuring that elements and touch targets in each Dialer view are appropriately separated and easily accessible
Consult the general style guidelines for additional style considerations that might affect layouts.
Rearrange layout elements
In some instances, car makers might want to rearrange layouts to fit a particular car's interior. For example, in cars that have their steering column on the right, a car maker might want to rearrange the layout for the Dialpad view to move the keypad to the right side of the screen instead of the left.
Consult the general style guidelines for additional style considerations that might affect layouts.
Alter layouts to disable features
If car makers choose to disable a Dialer feature by removing access to it in their layouts, they must ensure that remaining features aren't unintentionally affected. The app must continue to adhere to the layout modification guidelines in this section, as well as to user restrictions that are imposed based on the car's driving state such as blocked access to Settings while the user is driving.
Also, it's important to remove references to any disabled feature from all layouts that reference that feature. For example, car makers who don't want to support the Favorites contact view must not only disable the Favorites tab in the app bar; they must also hide or remove the Favorites toggle on the Contact details view.
UX requirements
Use this list to check that styling and layout customizations to Dialer meet all design requirements.
For full details about the MUST, SHOULD, and MAY guidelines in each area of customization, visit the links in the left column.
| When customizing | Check that |
|---|---|
Global or View-specific styling |
Custom styling:
|
(Dimensions, arrangements, or features) |
Modified layouts:
|