Widget not tinted on Lollipop

Question

I'm using appcompat v21.0.3 for my app. I did everything like it is written here: android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html

But on Lollipop (and on older devices of course), some widget are not tinted with my accent color. For example:

SwitchCompat is tinted:
ListPreference is NOT tinted
ProgressDialog is NOT tinted

Here's my code:

build.gradle

...
compile 'com.android.support:appcompat-v7:21.0.+'
...

AndroidManifest.xml

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/CET"
        android:hardwareAccelerated="true"
        tools:replace="label">

themes.xml

<resources>

    <style name="CET" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
    </style>

</resources>

colors.xml

<resources>

    <!-- App branding color -->
    <color name="primary">#a32b30</color>

    <!-- Darker variant for status bar and contextual app bars -->
    <color name="primary_dark">#000000</color>

    <!-- Theme UI constrols like checkboxes and text fields -->
    <color name="accent">#a32b30</color>

</resources>

Does someone have an idea?

UPDATE : as of june 2015, still doesn't work but I ended up using https://github.com/afollestad/material-dialogs. Works really nice for dialogs, including ListPreferences.

score 30 · Answer 1 · edited Aug 10 '16 at 13:14

Follow the below guide

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"

P.S. 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.

Source

Thank you for this detailed answer, but it doesn't help: ProgressDialog should be tinted on Lollipop and it isn't, whatever values I use (I tried to add every value (colorControlNormal, ...) it doesn't change: some elements are green. — Stéphane, Jan 21 '15 at 10:54
Try doing this on one specific element (button) for test `android:buttonTint="@color/colorAccent"` `android:button="@drawable/abc_btn_check_material"` — Murtaza Khursheed Hussain, Jan 21 '15 at 11:00
I will try that to check, but the problem is not on widgets I use myself, but on widgets I don't have access to: a standard ProgressDialog, and and ListPreference used in a PreferenceFragment. So I can't add this element on these... — Stéphane, Jan 21 '15 at 19:30

score 12 · Answer 2 · answered Jan 23 '15 at 05:22

You should generally use your own progress bar instead of a dialog and then you could make a tinted version that works on both L and pre-L like so:

public class TintedProgressBar extends ProgressBar {
    public TintedProgressBar(Context context) {
        super(context);
        init();
    }

    public TintedProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public TintedProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void init() {
        getIndeterminateDrawable().setColorFilter(getResources().getColor(R.color.primary), PorterDuff.Mode.SRC_IN);
        getProgressDrawable().setColorFilter(getResources().getColor(R.color.primary), PorterDuff.Mode.SRC_IN);
    }
}

If you really wanted to change the color in the dialog you could find the nested progress bar probably at dialog.findViewById(android.R.id.progess)

score 5 · Answer 3 · answered Jul 10 '15 at 09:08

To changing color of Progress Dialog drawable, I've used following workaround: I've created AppCompat alert dialog base style

    <style name="CustomAppCompatAlertDialogStyle"    parent="Theme.AppCompat.Light.Dialog.Alert">
            <item name="colorAccent">@color/defaultColor</item>
            <item name="android:indeterminateTint">?attr/colorAccent</item>
            <item name="android:indeterminateTintMode">src_in</item>
    </style>

And then apply these theme to Progress Dialog:

mProgressDialog = new ProgressDialog(this, R.style.CustomAppCompatAlertDialogStyle);

score 3 · Answer 4 · edited May 23 '17 at 11:53

It only answers part of your question, but the progress bar style from the appcompat library doesn't pick up the accent color on lollipop yet, even outside of ProgressDialog.

You'll need to set it up yourself, for example with this style:

<style name="TintedProgressBar" parent="Widget.AppCompat.ProgressBar">
    <item name="android:indeterminate">true</item>
    <item name="android:indeterminateTint">?attr/colorAccent</item>
    <item name="android:indeterminateTintMode">src_in</item>
</style>

that you can then apply to a ProgressBar or a ContentLoadingProgressBar. (note that a parent element the progress bar is inflated in will obviously have to apply the theme defining the colorAccent attribute ; otherwise use a direct color resource)

If you want to integrate the progress bar in a dialog, since I don't think ProgressDialog supports customization of its progress bar beyond the type and drawable, you may have to set up an AlertDialog with a progress bar applying the above theme, or simply go with a custom dialog I guess you can refer to this answer to apply the above progress-bar-related attributes to a dialog.

score 1 · Answer 5 · answered Jan 14 '15 at 09:39

Try attribute colorControlActivated:

themes.xml

<style name="CET" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="colorControlActivated">#a32b30</item>
</style>

score 0 · Answer 6 · edited May 23 '17 at 12:00

0

As far as I know, anything in a Dialog is not automatically tinted in Lollipop (yet). Checkout material-dialogs, a library to do this automatically for you (but it only supports API 14+).

Checkout answers from a similar question: Android v21 Theme.Appcompat color accent is ignored, no padding on dialogs

edited May 23 '17 at 12:00

Community

1
1

answered Jan 23 '15 at 04:26

hidro

12,333
6
53
53

So to have tinted dialog on Lollipop I must NOT use AppCompat? – Stéphane Jan 23 '15 at 08:04
Use AppCompat if you need to support lower level APIs, if only Lollipop then no need. The library I refer to is independent of AppCompat, I think you can use them together. – hidro Jan 23 '15 at 08:07

Widget not tinted on Lollipop

6 Answers6