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

Navigation
1

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

  • 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

Onewaytodothis,howeverinLollipop,Android5.+issettingahueinadrawablebitmap,likethis:

<?xmlversion="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'd like to find a solution without using any lib . Is it possible to set a color for the image added with android:drawableLeft under these conditions? If anyone can help, thank you!

    
asked by anonymous 26.08.2016 / 16:03

1 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 are doing is: first we draw the drawable from the left of the button. This can be done with the getCompoundDrawables function. It returns an array of four positions. The% with the left% is that of the 0 position. After that, we make Drawable in it to prevent the color change from affecting all other uses of the same image. Then we use mutate() to "package" our DrawableCompat.wrap() into another that allows us to use Drawable . Finally, we put back the already colored Drawable in the setTint .

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

    
26.08.2016 / 18:26
Lightbox - Image Gallery Sensitive data in persistence.xml