Chrome for Android's UI needs to adapt to touch-first and click-first experiences. For example, text and icons may need to be scaled down for click-first experiences compared to touch-first experiences. This is achieved through a combination of different techniques, but there are some pitfalls to avoid.
Creating “density-adaptive” UI (UI that adapts to touch-first and click-first experiences) involves using the right resources, such as styles and dimensions.
At the lowest level are dimension theme attributes. These attributes are adjusted for the current density by applying theme overlays to the Activity theme (see here in ChromeBaseAppCompatActivity#applyThemeOverlays). //ui/android/java/res/values/attrs.xml contains these attributes. For example, ?attr/minInteractTargetSize defines the minimum touch target size for touch-first experiences, 48dp, and the minimum click target size, 36dp, for click-first experiences. Try to keep these attributes as generic as possible. If a UI surface requires a lot of special casing, it may be better to create specific <declare-styleable>s and handle them locally.
Any Context that is used to inflate UI components that use these attributes needs to have the attributes defined in its theme. Typically, these attributes are defined in base app themes in //components/browser_ui/theme/android/templates/res/values/themes.xml.
Warning: Resources that are defined in //ui/android can be shared with WebView, and there is no guarantee that the WebView's Context will have these attributes defined, which can lead to crashes. One way to work around this is to use a FillInContextThemeWrapper to provide default values for the custom attributes (see an example here).
There are “density-adaptive” text styles available to use in multiple locations, depending on where they are needed. See TextAppearance.DensityAdaptive.ListMenuItem in //ui/android and TextAppearance.DensityAdaptive.TextLarge in //components/browser_ui/. Your text styles can inherit from these styles, e,g. to create text styles with different colors.
You can use the currently available “density-adaptive” attributes and styles to make sure your UI adapts to touch-first and click-first experiences. Also feel free to follow the given examples to create new attributes or text styles as needed.