Forked from seanKenkeremath/Android Lollipop Widget Tinting Guide
Created
November 30, 2015 15:04
-
-
Save benju69/5038699e20760cf29c58 to your computer and use it in GitHub Desktop.
How base colors in Lollipop apply to different UI elements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment