You can achieve coloring the drawableleft on a button with this method:

Step 1: Create a drawable resource file with bitmap as parent element as shown below and name it as ic_action_landscape.xml under the drawable folder

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@android:drawable/ic_btn_speak_now"
    android:tint="@color/white" />

Step 2: Create your Button control in your layout as below

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/md_light_green_500"
        android:drawableLeft="@drawable/ic_action_landscape"
        android:drawablePadding="8dp"
        android:fontFamily="sans-serif"
        android:gravity="left|center_vertical"
        android:stateListAnimator="@null"
        android:text="@string/drawer_quizzes"
        android:textColor="#fff"
        android:textSize="12dp" />

The button gets the drawable from the ic_action_landscape.xml from the drawable folder instead of @android:drawable or drawable png(s).

Method 2:
Step 1:
You can even add the icon as a Action Bar and Tab icons with Foreground as Image that can be imported from a custom location or a Clipart

Step 2:
Under Theme dropdown select Custom

Step 3:
Then select the color as #FFFFFF in the Foreground color selection. Method 2 Pictorial representation

Finally finish the wizard to add the image, then add the drawable as an image.

Pictorial representation for answer to the question


You can either use drawable filter or if your API>=M then you can simply

textView.compoundDrawableTintList = ColorStateList.valueOf(Color.WHITE)

or in XML,

android:drawableTint="@color/white"

I know there are lots of answers already, but non of them made me happy since I didn't want to have different drawables for different styles of elements.

So my solution was to set color filter in constructor like this:

int textColor = getTextColors().getColorForState(EMPTY_STATE_SET, Color.WHITE);
Drawable[] drawables = getCompoundDrawablesRelative();
for (Drawable drawable : drawables) {
    if (drawable != null) {
        drawable.setColorFilter(textColor, PorterDuff.Mode.SRC_ATOP);
    }
}

I used text color because this was what I need, but it can be replaced with custom attribute to be more dinamic.


I was able to accomplish this same exact thing using a MaterialButton (from the material support library, which most people are probably using already). MaterialButton has an attribute named icon which can be placed left/center/right (default left). It also has an attribute called iconTint which will tint the icon.

Gradle:

implementation "com.google.android.material:material:1.1.0-alpha09"

View:

<com.google.android.material.button.MaterialButton
    android:layout_width="0dp"
    android:layout_weight="1"
    android:text="@string/drawer_quizzes"
    android:backgroundTint="@color/md_light_green_500"
    android:stateListAnimator="@null"
    android:textColor="#fff"
    android:textSize="12dp"
    android:fontFamily="sans-serif"
    app:icon="@drawable/ic_action_landscape"
    app:iconTint="@color/white"
    android:gravity="left|center_vertical"
    android:drawablePadding="8dp"
    />