How to change background color of button with image in Android

Question

In my Android app I have button with arrow image on the right side. On my SettingsActivity you can change the color of app (change the color of buttons and TextViews).

I changed the color of TextViews fine, but when I changed the color of buttons, the image (arrow on the right side) is gone.

Thats my code now. It change color and delete the imge.

loginButton = (Button) findViewById(R.id.btnLogin);
loginButton.setTextColor(color);

I find this on some post. But this only works for ImgageView, not for button.

loginButton = (Button) findViewById(R.id.btnLogin);
GradientDrawable bgShape = (GradientDrawable)loginButton.getBackground();
bgShape.setColor(getResources().getColor(Color.BLACK));
text.setTextColor(color);

I also tryed to change the color like this. But this does not change the color at all.

Drawable button = context.getResources().getDrawable(R.drawable.button); 
button.setColorFilter(new 
PorterDuffColorFilter(0xffff00,Mode.MULTIPLY));

The last thing which I hope should work is to define new drawable for every color. But this is really awful... I also think, that the problem is not only with the image. I think this solution overrides all the drawable file...

Is there anyone who knows how to change the color of drawable and keep the image on the button?

EDIT: Just trying... I can move all colors to colors.xml file. And change the path of color to all drawable files. Like

<resource>
   Color 1
   Color 2
   Color 3
   ...
</resource>

But than how can drawable files decide which color it should use?

EDIT2: Button layout:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    style="@style/bgGrey">
    <RelativeLayout
        android:layout_height="0dip"
        android:layout_weight="30"
        android:layout_width="fill_parent"
    >
    <TextView
        ...
    />
    </RelativeLayout>
    <LinearLayout
    ...>
        <TextView
        .../>
        <EditText
        .../>
        <TextView
        .../>
        <EditText
        .../>
        <Button
            android:id="@+id/btnLogin"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/password"
            android:gravity="center|left"
            android:paddingLeft="15dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/login_button_background"
            android:text="Login" />

    </LinearLayout>
</LinearLayout>

Button drawable, background.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector   xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/layer"></item>
</selector>

layer.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"  >
    <item android:left="0dp" android:top="5dp" android:bottom="5dp" android:right="0dp" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <solid android:color="#ffb500"/>
        </shape>
    </item>
    <item android:left="350dp" android:top="5dp" android:bottom="5dp" android:right="5dp" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <solid android:color="#ffb500"/>
        </shape>
    </item>
    <item android:right="15dp" >
        <bitmap android:src="@drawable/btn_right" android:gravity="right" android:tileMode="disabled" />
    </item>
</layer-list>

Answer 1

An alternative approach can be: Remove the arrow from the background and set it as Compound Drawable .

As Button extends TextView , you can set drawables to the top, bottom, left or right.

In the XML, just set the property drawableRight to an arrow, or via JAVA code:

 button.setCompoundDrawablesWithIntrinsicBounds (idLeft, idTop, idRight, idBottom)

So to set a right arrow:

 button.setCompoundDrawablesWithIntrinsicBounds (0, 0, R.drawable.your_arrow, 0);

This way, the background is independent from the arrow, and it will be easier to modify it without creating complex versions or selectors.

There are methods and properties to adjust the drawable padding so you can place it more or less where you need it.