8

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="   myemail@gmail.com  "
        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.

Raja Jawahar
  • 6,742
  • 9
  • 45
  • 56

4 Answers4

8

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

nshmura
  • 5,940
  • 3
  • 27
  • 46
  • Thanks for your reply however tint does not working with Drawable left but yes it work well with drawable. How can i change color of drawableLeft –  Aug 12 '16 at 23:40
  • I updated my answer. Above code changes color of drawableLeft. Please change first line to your tint color, and use the above code. – nshmura Aug 12 '16 at 23:46
  • I know this is an old post, but when I was using `setCompoundDrawablesWithIntrinsicBounds` the text was showing under the icon. With your fix, it does change the vector icon's color, but it (icon) shows on the left. Is it possible to show it on the bottom? – James Poulose Apr 18 '21 at 01:49
7

to set icon color use

android:drawableTint="@color/colorPrimary"
kashlo
  • 2,313
  • 1
  • 28
  • 39
2

You can use this as well for XML

app:drawableTint="@android:color/white"
OhhhThatVarun
  • 3,981
  • 2
  • 26
  • 49
0

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

Hossein Farrokhi
  • 89
  • 2
  • 11