CODEWITHSUNDEEP
androidandroid-layout
JoeHz
JoeHz

Reputation: 2196

Changing Color State on an "ImageToggle" Button

I currently have a set of ToggleButtons, enclosed by a RadioGroup, with each button referring to a selector that changes the color of the button state, and writing code to implement the radio-buttonesque behavior. This works great. (EDIT: I should mention that the selector is what the android:background element of the button is referred to)

The Selector is something like this 

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

Now I want a second set of buttons to have the exact same behavior. The catch is that this time, I want Images on some of them, not text.

There are lots of StackOverflow posts on how to change the Image based on the Button's state but I don't want to change the image based on the state. I want to change the color of the button based on the state (the images have transparent backgrounds).

I'm really trying to avoid modifying the button images themselves.

I believe the solution involves making a selector with a layer-list but this is new territory for me.

Upvotes: 0

Views: 269

Answers (3)

JoeHz
JoeHz

Reputation: 2196

What apparently one needs to do is create a layered drawable in the selector like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:drawable="@color/gold"
                  android:gravity="fill"/>
            <item android:drawable="@drawable/image"
                  android:gravity="fill"/>
        </layer-list>
    </item>

    <item android:state_checked="false">
        <layer-list>
            <item android:drawable="@color/white"
                  android:gravity="fill"/>
            <item android:drawable="@drawable/image"
                  android:gravity="fill"/>
        </layer-list>
    </item>
</selector>

The standard approach to variable state button selectors is what Priyank mentions above. Just the graphic must be transparent and declared like above, such that it will be layered with a background color to pull off the color state change

Upvotes: 0

paulina_glab
paulina_glab

Reputation: 2487

I think you are looking for tinting attributes - mentioned here.

In your case, try to set ColoStateList to android:tint attribute. In ColorStateList doc you have example that shows color selector - like drawable selector, but for colors.

(I'm not sure it's already support pre-Lollipop devices or you should do it programatically with PorterDuff filters for older versions.)

Upvotes: 0

Priyank Virani
Priyank Virani

Reputation: 77

Create a xml named colors.xml in res/values folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

In drawable folder, create a xml file my_btn_toggle.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@color/red"  />
    <item android:state_checked="true" android:drawable="@color/green"  />
</selector>

and in xml section define your toggle button:

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btntoggle"
    android:background="@drawable/my_btn_toggle"/>

Upvotes: 2

Related Questions