Android Button Drawable Tint

Question

Is it possible to tint the drawableLeft in an android button? I have a black drawable I'd like to tint white. I know how to achieve this with an image view (image on the left) but I want to do this with the default android button.

My source code:

<Button android:layout_height="wrap_content"
        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"
        android:drawableLeft="@drawable/ic_action_landscape"
        android:gravity="left|center_vertical"
        android:drawablePadding="8dp"
        />

Is there any way to tint the button? Or is there a custom view method to achieve this effect?

Answer 1

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.

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