CODEWITHSUNDEEP
androidandroid-drawableandroid-icons
user6457240
user6457240

Reputation:

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="   [email protected]  "
        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.

Upvotes: 8

Views: 8041

Answers (4)

Hossein Farrokhi
Hossein Farrokhi

Reputation: 87

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).

Upvotes: 0

OhhhThatVarun
OhhhThatVarun

Reputation: 4321

You can use this as well for XML

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

Upvotes: 3

kashlo
kashlo

Reputation: 2618

to set icon color use

android:drawableTint="@color/colorPrimary"

Upvotes: 7

nshmura
nshmura

Reputation: 6000

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

Upvotes: 8

Related Questions