Change the tint of drawable in xml selector

Question

I have a button with the background defined in xml. I would like to tint the button based on the current state it is in - ie - pressed, focussed, normal.

Here is my xml file below. Also, my colored_tint_dark, and colored_tint are both translucent colors that I am trying to draw over the drawable image that I call from the resources folder. Here is the problem. When the UI first loads, the image has the appropriate tint on it, but after pressed, the pressed state doesn't show any tint, then the normal state won't show any tint.

<?xml version="1.0" encoding="utf-8"?>

<item android:state_pressed="true" android:drawable="@drawable/rounded_grayscale_pinstripe_button">
    <shape>
        <gradient
            android:endColor="@color/colored_tint"
            android:startColor="@color/colored_tint"
            android:angle="270" />
        <stroke
            android:width="0dp"
            android:color="@color/colored_tint" />
        <corners
            android:radius="0dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

<item android:state_focused="true" android:drawable="@drawable/rounded_grayscale_pinstripe_button">
    <shape>
        <gradient
            android:endColor="@color/colored_tint"
            android:startColor="@color/colored_tint"
            android:angle="270" />
        <stroke
            android:width="0dp"
            android:color="@color/colored_tint" />
        <corners
            android:radius="0dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

<item android:drawable="@drawable/rounded_grayscale_pinstripe_button">        
    <shape>
        <gradient
            android:endColor="@color/colored_tint_dark"
            android:startColor="@color/colored_tint_dark"
            android:angle="270" />
        <stroke
            android:width="0dp"
            android:color="@color/colored_tint_dark" />
        <corners
            android:radius="0dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

I know that there are solutions to this in java, but I am specifically looking for a solution in xml. Thanks.

score 33 · Answer 1 · answered Mar 17 '16 at 10:15

33

Create a selector tint_menu_item.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_pressed="true" />
    <item android:color="@color/white" android:state_activated="true" />
    <item android:color="@color/green" />
</selector>

(In my example, image is white when selected, and green when not selected)

Then in your xml, you can add tint attribute to ImageView:

<ImageView
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:tint="@color/tint_menu_item"
    android:src="@drawable/ic_menu_home" />

You can also use this selector on a TextView using textColor attibute:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/tint_menu_item" />

answered Mar 17 '16 at 10:15

Anne-Claire

872
8
16

1

HI, I have issue with tint selector on Api 18 and lower [link](http://stackoverflow.com/questions/38673196/crash-during-inflating-view-with-vector-drawable-tint-color-selector) Do you have suggestions what the problem can be? – Alex Aug 02 '16 at 16:53
1

android:tint attribute does not work on all apis. To resolve this you can create you .png file with the right color directly and then remove the android:tint attribute from your ImageView – Anne-Claire Aug 23 '16 at 14:27
Where do I put tint_menu_item.xml? – rraallvv Feb 05 '17 at 16:00
Create a new folder "color" inside "res" (next to 'values' folder, 'drawable' folder, etc). Then put your tint_menu_item.xml inside it. – Anne-Claire Feb 06 '17 at 15:16

score 1 · Answer 2 · edited May 23 '17 at 12:10

1

Have you tried with a selector?

You can find some examples HERE

edited May 23 '17 at 12:10

Community

1
1

answered Aug 30 '12 at 11:08

Alvarop

79
1
3

score 0 · Answer 3 · answered May 17 '20 at 10:59

let's say you have an appCpmpatImageView and add this **app**:tint="@drawable/custom_tint" to the compat image view and your custom tint selector is like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/grey" android:state_pressed="true" />
    <item android:color="@color/silver" android:state_focused="true" />
    <!-- default tint -->
    <item android:color="@color/white" />
</selector>

so your appCompat ImageView will use each color as a tint in different situations.

Change the tint of drawable in xml selector

3 Answers3

Linked