How to change color of CompoundDrawable on Button?

问题:

I am trying to figure out how to change the color of icon which is in drawable left of button.

Below is the XML code I am using :

  <Button
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_toRightOf="@+id/student_images"
        android:drawableLeft="@mipmap/ic_email_black_18dp"
        android:text="   [e-mail]  "
        android:layout_below="@+id/email"
        android:background="#00000000"
        android:layout_marginBottom="20dp"
        android:fontFamily="sans-serif"
        android:textColor="@color/gray_text_color"
        />

I have tried the android:tint but color of icon is not changing. I am stuck here.

回答1:

You can set tint programmatically like below:

int tintColor = ContextCompat.getColor(context, android.R.color.darker_gray);

Button button = (Button) findViewById(R.id.button);

Drawable drawable = ContextCompat.getDrawable(context, R.mipmap.ic_email_black_18dp);
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable.mutate(), tintColor);

drawable.setBounds( 0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

button.setCompoundDrawables(drawable, null, null, null);

Or you can use library Support Drawable Tints by snodnipper.
This library enables to set tint for drawableLeft of Button.
https://github.com/snodnipper/android-appcompat-issue198613

回答2:

to set icon color use

android:drawableTint="@color/colorPrimary"

回答3:

You can use this as well for XML

app:drawableTint="@android:color/white"

回答4:

I was searching for the problem that you have asked here, finally, I found a hack and not a solution in which I decided to have two drawables with my desired configuration and set them separately within the code when needed.

Imagine that I want to change the drawable color to gray to show that it has been deactivated. here is the drawable for the normal condition: ic_email_black_18dp.xml

<vector 
    android:height="18dp" 
    android:viewportHeight="24.0"
    android:viewportWidth="24.0" 
    android:width="18dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path 
    android:fillColor="#FF000000"  
    android:pathData="M20,4L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2zM20,8l-8,5 -8,-5L4,6l8,5 8,-5v2z"/>
</vector>

you just want to change the fillColor, so here is the new XML file:ic_email_gray_18dp.xml

<vector 
    android:height="18dp" 
    android:viewportHeight="24.0"
    android:viewportWidth="24.0" 
    android:width="18dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path 
    android:fillColor="#44000000"  
    android:pathData="M20,4L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2zM20,8l-8,5 -8,-5L4,6l8,5 8,-5v2z"/>
</vector>

now in your code, you can change the color of the drawable by totally substituting it with the new one:

        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {

                        //Everything else that this button is supposed to do

                        button.setCompoundDrawablesWithIntrinsicBounds(
                             R.drawable.ic_email_gray_18dp, //left
                             0, //top
                             0, //right
                             0 //bottom
                               );

            }
        });

This solution sounds promising as the duplicated file takes almost no space and more than that you can do more customizations on the different states of the icon without the need to do lots of unnecessary boilerplate code (when you need to change more than a single color in the icon, etc).