Customization Guidelines

The Dialer implementation included in AOSP provides a base theme and structure you can adopt as is or modify.

In the table below, the descriptions of “SHOULD” and “MAY” are per the IETF standard defined in Key words for use in RFCs to Indicate Requirement Levels (RFC 2119), the same standard used in the Android 10 Compatibility Definition.

Dialer Customization
SHOULD
  • To reflect brand, use resource overlays to adjust the overall theme and styling of UI aspects, including:

    • Color palette
    • Dialog appearance
    • Drawables
    • Sizing
    • Text appearance
    • Widget appearance
  • Modify feature behavior controlled by config flags and configurable values, as needed.
  • Through the use of resource overlays, customize layouts to fit specific screen dimensions.
  • For future compatibility, leave the Java code intact.
MAY Modify the high-level UI structure of Dialer (for example, tab placement).

Dialer belongs to a suite of system applications (including Media, Notification Center, and App Launcher), all of which share common styles and assets that are defined at different levels in the AOSP structure:

  • framework/base/core
    All Android base styles are defined here. Specifically, all system application themes are based on Theme.DeviceDefault, the theme designed for use by OEMs to customize device default appearance.

  • packages/services/Car/car_product/overlay
    This folder contains overrides to Theme.DeviceDefault which are used to produce the AOSP look and feel of Android Automotive. OEMs might opt for excluding this overlay and use their own instead.

  • packages/apps/Car/car_lib/car_apps_common
    Common colors and styles shared among AOSP provided system applications. These elements can be customized by OEMs using overlays under path/to/overlay/packages/apps/car_lib/car_apps_common.

  • packages/apps/Car/Dialer
    Dialer uses its own theme, which extends from Theme.DeviceDefault (defined in framework/base). The layouts, colors, styles and other resources of Dialer can also be customized through the use of an overlay. Similar to car_lib mentioned above, the resource override can be located in path/to/overlay/packages/apps/Car/Dialer.

For more information on AOSP theming and overlays, see Customize the Build with Resource Overlays.

Dialer Global Configurable Values

The resources described below are used throughtout Dialer. To enable straightforward customizations, different views use resources redirected from the global values.

Avatar Corner

0.5 denotes a round avatar while 1 denotes a square avatar. When you update this value, the change affects all avatar shapes, including that for notifications.

  <dimen name="contact_avatar_corner_radius_percent" format="float">0.5</dimen>

Avatar Size

Used for list items on the Call History, Contacts, and Search pages as well as on the profile avatar on the Dialpad page.

  <dimen name="avatar_icon_size">76dp</dimen>

Control Bar Height

Ongoing Call control bar, Incoming Call control bar height, and Call button height:

  <dimen name="control_bar_height">96dp</dimen>

List Item Dimensions

Use this value to customize the height of items displayed in a list:

  <dimen name="list_item_height">116dp</dimen>

Toolbar

On the toolbar, you can customize the layout, menus, and tabs displayed.

Activity

To define which tabs are displayed on the toolbar, use TelecomActivity.

TelecomActivity

TelecomActivity

Figure 1. Toolbar as displayed in landscape and portrait modes

Layout

@layout/top_bar_with_tabs uses different layouts for landscape and portrait modes.

Item Parameter
Style @style/Widget.Dialer.Toolbar
Height @dimen/action_bar_height, action bar should use ?android:attr/actionBarSize or use this dimension directly.
ToolbarTitle @style/TextAppearance.Dialer.Widget.Toolbar.Title
DisplayOptions
  • @style/RootToolbarDisplayOptions, used for root fragments.
  • @style/HomeAsUpDisplayOptions, used for top fragments with back navigation. See the Search and Contact Details pages.

Logo @drawable/sized_logo
Navigation button
  • @drawable/ic_back_arrow
  • android:navigationButtonStyle=@style/Widget.Dialer.Navigation

To implement the AOSP appearance, create an ActionProvider to override the framework layout (it is not possible to add margin or padding between menu items). Supported customizations for the menu items are changing layout, overriding icons, and overriding visibility.

  • @layout/menu_action_item
  • android:actionButtonStyle->@style/Widget.Dialer.ActionButton
  • @menu/main_menu[visibility->android:visible="true/false"]

Tabs

Tab Pages

Configured by @array/tab_config. The @array/tabs_title is created for the setting item to set the start page and must map to the @array/tab_config, using the map below. The following maps are written in the com.android.car.dialer.ui.TelecomPageTab.

CALL_HISTORY CONTACTS FAVORITE DIAL_PAD
icon @drawable/ic_history @drawable/ic_contact @drawable/ic_favorite @drawable/ic_dialpad
title @string/call_history_title @string/contacts_title @string/favorites_title @string/dialpad_title

CarTabLayout attributes are described below.

Item Parameter
CarTabLayout_tabPaddingX The horizontal padding of item layout, the default is @dimen/car_tab_padding_x.
CarTabLayout_tabFlexibleLayout Match parent width and split evenly (or not). Default is false for landscape mode and true for portrait mode.
CarTabLayout_tabItemLayout Layout resource for tab item, default @layout/car_tab_item.
  • icon. @id/car_tab_icon
  • text. @id/car_tab_text
  • Override tab item layout. This must preserve the icon and text ids as defined since they are programmatically referred to in the code.
    • Override the @layout/car_tab_item directly.
    • Create a layout for the car tab item and set app:tabItemLayout to the layout created.

Styles

Use these values to customize the respective styles.

Item Parameter
@style/CarTabItemBackground Car tab item background.
@style/CarTabItemIcon Icon ImageView style:
  • android:width=android:height=@dimen/car_tab_icon_size
  • android:scaleType=fixXY
  • android:tint=@color/car_tab_item_selector
@style/CarTabItemText. Tab TextView style:
  • android:textAppearance=@style/TextAppearance.Body3
  • android:textColor=@color/car_tab_item_selector
  • android:textStyle=normal
  • android:textFontWeight=400 represents a regular font weight.
@style/CarTabSelectedTextTypeface Tab text selected font:
  • android:textStyle=normal
  • android:textFontWeight=500 represents a medium font weight.

Height

Theme attribute tabBarSize enables you to specify tabs of a different height on a toolbar displayed in portrait mode.

  • @dimen/tab_bar_height under Theme.Dialer.