Skip to content

Instantly share code, notes, and snippets.

@seanKenkeremath
Last active November 17, 2023 12:40
Show Gist options
  • Save seanKenkeremath/c945c39cdf92af138395 to your computer and use it in GitHub Desktop.
Save seanKenkeremath/c945c39cdf92af138395 to your computer and use it in GitHub Desktop.
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.
@osrl
Copy link

osrl commented Aug 17, 2015

Also colorControlHighlight can be added to EditText

@nathanmkaya
Copy link

Thanks For This

@caroltr
Copy link

caroltr commented Sep 7, 2015

Great!!

@jungletian
Copy link

tks , very helpful

@mypoor
Copy link

mypoor commented Oct 6, 2017

This means a lot to me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment