Assign a color to the added image with "android:drawableLeft"

Question

I have a due case that I am using three images for each of my buttons, as shown below the images:

• ic_palette_black_36dp
• ic_palette_red_36dp
• ic_palette_blue_36dp

Code:

<Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="First Button"
    android:drawableLeft="@drawable/ic_palette_black_36dp"
/>

<Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="First Button"
    android:drawableLeft="@drawable/ic_palette_red_36dp"
/>

<Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="First Button"
    android:drawableLeft="@drawable/ic_palette_blue_36dp"
/>

Screenshot

One way to do this, however in Lollipop, Android 5. + is by setting a tone in a drawable bitmap, in this way:

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

I’m using Android 2.3.3 Gingerbrend and Eclipse, so I would like to find a solution without using any lib. It is possible to set a color for the added image with the android:drawableLeft in these conditions? If anyone can help, thank you!

Answer 1

With the help of Appcompat, it is possible, yes.

Given the following provision...

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.pablo.tintdrawableleft.MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">


        <Button
            android:id="@+id/botao_preto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_restaurant_black_24dp"
            android:drawableStart="@drawable/ic_restaurant_black_24dp"
            android:drawablePadding="8dp"
            android:text="Botão preto"/>

        <Button
            android:id="@+id/botao_vermelho"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_restaurant_black_24dp"
            android:drawableStart="@drawable/ic_restaurant_black_24dp"
            android:drawablePadding="8dp"
            android:text="Botão vermelho"/>

        <Button
            android:id="@+id/botao_azul"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_restaurant_black_24dp"
            android:drawableStart="@drawable/ic_restaurant_black_24dp"
            android:drawablePadding="8dp"
            android:text="Botão azul"/>

    </LinearLayout>


</RelativeLayout>

... we can use the following function to get the result:

private void pintarDrawableLeft(Button botao, int recursoDeCor) {
    Drawable leftDrawable = DrawableCompat.wrap(botao.getCompoundDrawables()[0].mutate());
    DrawableCompat.setTint(leftDrawable, ResourcesCompat.getColor(getResources(), recursoDeCor, getTheme()));
    botao.setCompoundDrawables(leftDrawable, null, null, null);
}

What we’re doing is: first we take the drawable from the left of the button. This can be done with the function getCompoundDrawables. It returns an array of four positions. O Drawable from the left is from position 0. After that, we do mutate() in it to prevent the color change from affecting all other uses of the same image. Then we use DrawableCompat.wrap() to "package" our Drawable in another that allows the use of setTint. Finally, we put back the already colored Drawable in compoundDrawables.

Note: It is not working for some reason on API 16 (although it is working on 10 and 23). I will update as soon as I find a solution.