donglua
11/15/2015 - 9:39 AM

How base colors in Lollipop apply to different UI elements

How base colors in Lollipop apply to different UI elements

Unless specified otherwise, all of the below tinting applies to both Lollipop and pre-Lollipop using AppCompat v21. To use the support version of these attributes, remove the android namespace.  For instance, "android:colorControlNormal" becomes "colorControlNormal".  These attributes will be propagated to their corresponding attributes within the android namespace for devices running Lollipop.  Any exceptions to this will be noted by including the "android:" prefix.

All Clickable Views:
-----------
* ripple effect (Lollipop only) -- "colorControlHighlight"

Status Bar:
------------
* background (Lollipop only) - "colorPrimaryDark"

Navigation Bar:
----------------
* background (Lollipop only) - "android:navigationBarColor"

EditText:
----------
* underline (unfocused) -- "colorControlNormal"
* underline overlay (focus) -- "colorAccent"
* cursor -- "colorAccent"
* text color -- "android:textColorPrimary"

CheckBox:
----------
* box unchecked -- "colorControlNormal"
* box checked -- "colorAccent"

RadioButton:
-------------
* unselected -- "colorControlNormal"
* selected -- "colorAccent"
* ripple effect (Lollipop only) -- "colorControlHighlight"

SwitchCompat:
-------------
* thumb switch off -- "colorSwitchThumbNormal"
* thumb switch on -- "colorAccent"
* track overlay (when switched on) -- "colorAccent"

Spinner:
---------
* indicator (not pressed) -- "colorControlNormal"
* indicator (pressed) -- "colorAccent"
* selected entry text color (Lollipop only) -- "android:textColorPrimary"

ActionBar:
-----------
* background -- "colorPrimary"
* title color -- "android:textColorPrimary"
* overflow icon -- "android:textColorPrimary"
* up button -- "android:textColorPrimary"
* action icons -- "android:textColorPrimary" †
* overflow menu background -- "android:colorBackground"
* overflow text color -- "android:textColorPrimary"

Toolbar (Theme Overlay should be used):
----------------------------------------
* background -- must be set manually in XML. Can do (android:background="?attr/colorPrimary")
* overflow icon -- "android:textColorPrimary"
* navigation icon -- "android:textColorPrimary" †
* action icons -- "android:textColorPrimary" †
* overflow menu background -- "android:colorBackground"
* overflow text color -- "android:textColorPrimary"


† tinting by default only works with whitelisted stock action icons (see TintManager source code).  For instance, the back arrow icon "abc_ic_ab_back_mtrl_am_alpha" is tinted, but copying that exact file and renaming it will result in the icon not being tinted while taking a random image and renaming it to "abc_ic_ab_back_mtrl_am_alpha" will result in it being tinted. Tinting can be done in XML in Lollipop by creating a <bitmap> xml file in drawable and applying the "android:tint" attribute. This icon can be used in both Lollipop and pre-Lollipop, but it will only be tinted in Lollipop.  Tinting of action icons can also be done programmatically using a ColorFilter.