Chrome for Android UI

Ramping-up

Android has a number of developer guides that are helpful for getting ramped up on general Android development. We recommend reading the following as primers for developing UI:

Colors and text styles

Dynamic Color doc should be followed when working on UI. For colors that cannot/should not be made dynamic (as mentioned in the doc), Chrome for Android has a color palette defined in //ui/android/java/res/values/color_palette.xml and a set of reusable semantic colors defined in //ui/android/java/res/values/semantic_colors_adaptive.xml. The semantic colors from semantic_colors_adaptive.xml should be used to ensure colors adapt properly for dark mode and can be consistently and easily updated during product-wide visual refreshes.

For more information on selecting the right color, see Night Mode on Chrome Android.

Text should be styled with a pre-defined text appearance from //components/browser_ui/styles/android/java/res/values/styles.xml. If the text color cannot/should not be dynamic, pre-defined text styles from //ui/android/java/res/values-v17/styles.xml can be used. If leading (aka line height) is needed, use org.chromium.ui.widget.TextViewWithLeading with app:leading set to one of the pre-defined *_leading dimensions in //ui/android/java/res/values/dimens.xml.

Widgets

The Chromium code base contains a number of wrappers around Android classes (to smooth over bugs or save on binary size) and many UI widgets that provide Chrome-specific behavior and/or styling.

These can be found in //components/browser_ui/widget/android/, //ui/android/, and //chrome/android/java/src/org/chromium/chrome/browser/widget/. There is an ongoing effort to consolidate all widgets in //components/browser_ui/widget/android.

MVC

UI development should follow a modified Model-View-Controller pattern. MVC base classes live in //ui/android/java/src/org/chromium/ui/modelutil.

The following guides introduce MVC in Chrome for Android:

Styles and widgets shared with WebView

Styles and widgets in //ui/android/ may be used by WebView. UI shown in WebView is inflated using the host Activity as the Context, so Chromeβ€˜s custom theme attributes won’t be set and android theme attributes may or may not be set. When creating new styles/widgets or modifying styles/widgets used by WebView, either avoid theme attributes or define a fallback if the theme attribute cannot be resolved.

Note that limiting use of theme attributes to //chrome/android/ or other directories is not sufficient for Monochrome builds where Chrome and WebView are packaged in a single APK and therefore have a single set of resources. See https://crbug.com/361587111.