Customize Calendar UI

To create a cohesive brand experience across the infotainment system, car makers can customize the look and feel of the Calendar app:

Visual branding:

  • Colors: Define specific palettes for Day and Night modes.
    • Typography: Apply brand-specific typefaces and font weights.
    • Iconography: Use custom icon sets for event types and actions.

Layout and UI:

  • Styling: Customizing the appearance of the app bar, subheaders, and event cards.
  • Theming: Adjusting corner radii and elevation to match the vehicle's UI theme.

Interaction model:

  • Glanceable list: A vertical list showing event titles, times, and locations.
  • Minimal taps: Drivers can access key actions (Navigate/Call) directly from the list or a simplified detail view.
  • Drive state awareness: The app limits complex interactions (such as long descriptions) while the vehicle is in motion.

On this page:

  1. Apply custom styling across the Calendar user interface
  2. Modify layout to fit the car's interior
  3. Tailor UI text to reflect the car's brand
  4. Modify app behavior to customize Calendar features

Apply custom styling

Create a consistent user experience across all your car's apps. Style colors, text fonts and other aspects of the Calendar UI to reflect the car's brand.

Customize the following aspects of the Calendar UI:

  • Color palette
  • Accent colors
  • Typography
  • Icons
  • List-item sizing

When making changes to styling, be sure to follow our general UX requirements.

Modify layout

  • Adjust the layout to better fit in-car screen dimensions
  • Rearrange the layout elements for a specific car or locale

For the existing layout, see Anatomy.

Adjust layout to fit screen dimensions

There are two ways to adjust the layout to meet screen requirements:

  • Set overall screen height and width in resource overlays
  • Ensure that elements and touch targets in the Calendar view are appropriately separated and easily accessible

The Calendar spec provides a reference layout for Calendar. Use this layout as a reference point when making adjustments.

Rearrange layout elements

In some cases, the car maker might need to rearrange the Calendar layout to fit a car's interior, for example, to order some elements from right to left for a locale where the main language reads right-to-left.

Replace UI text

Modify Calendar UI text fonts to reflect the car's brand. For existing text, see Interaction model.

Design principles provides general guidelines for maximum text length and legibility.

Modify app behavior

Calendar is a reference app that depends on tight integration with a companion app or another standard calendar provider on a user's phone.

There is an option to edit the Calendar app's underlying Java code to modify or enhance the app's behavior and functionality. However, note that modifying Calendar code risks creating future release incompatibilities.