Change toggleButton color

Question

How to change the color of toggleButton in listView?

This is how I deigned my toggleButton

<ToggleButton
            android:id="@+id/donePic"
            android:layout_width="30dp"
            android:layout_marginLeft="270dp"
            android:layout_height="30dp"
            android:background="@drawable/selector"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:textOff=""
            android:textOn=""/>

selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use tic -->
    <item android:drawable="@mipmap/done"
        android:state_checked="true" >
        <solid
            android:color="@color/red" />
    </item>
    <!-- When not selected, use un tic-->
    <item android:drawable="@mipmap/done"
        android:state_checked="false">
        <solid
            android:color="@color/green" />
    </item>

</selector>

MyActivity

public View getView(int position, View convertView, ViewGroup parent) { // inside adapter class
        ViewHolder holder;   
        ToggleButton toggle;
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.item_to_do, null);
            toggle =(ToggleButton)convertView.findViewById(R.id.donePic);
            toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    if (isChecked) {
                        Log.e("A","a");
                    } else {
                        // The toggle is disabled
                    }
                }
            });
            convertView.setTag(holder);
        }
        holder = (ViewHolder) convertView.getTag();
        return convertView;
    }

It displays log when toggleButton is clicked, but the color still remain white(its original color). How can I change the color of toggleButton ?

Updated

I have updated my code, but the color still remains white ! I want to use the done.png and I have placed it to res/drawable/done.png.

selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use tic -->
    <item android:drawable="@drawable/toggle_on"
        android:state_checked="true" >
    </item>
    <!-- When not selected, use un tic-->
    <item android:drawable="@drawable/toggle_off"
        android:state_checked="false">
    </item>

</selector>

toggle_on

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

toggle_off

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

Boman

1 - This <item android:drawable="@mipmap/done" is the same for both selected and unselected states: it should be 2 different drawables. 2 - The mipmaps folder is to be used for the app icon only. – Frication

@Rotwang android:tint cannot be used in selector ? – Boman

the android:tint attribute does not work on all API Levels. – Frication

@Rotwang thanks for telling – Boman

Then what are the way to achieve this :( – Boman

Put the drawables in your drawable-*dpi folders, as usual. Use 2 different drawables for the 2 different states. – Frication

@Rotwang Siir I follow vrund's answer but where should I put this <item android:drawable="@mipmap/done"/> as I want to use this icon – Boman

... in the res/drawable-*dpi folder? Where * depends on the device density (l,m, h, xh,xxh, xxxh). – Frication

No, the done is an icon where I place it in res/mipmap-hdpi folder. I want to use it for 2 different states. I just want to change their color. – Boman

NO. mipmap-*dpi is only and exclusively to be used for your app icon. Not for all the other icons in your app. Make 2 drawables: done_on and done_off and refer those ones in your selector. – Frication

ok, I have moved the done to drawable-*dpi.Refer to vrund's answer, I also make two drawable folder....But where should I put <item android:drawable="@drawable/done so I can use the image? – Boman

Put your selector in res/drawable. It's a drawable, and doesn't depend on the density. – Frication

Let us continue this discussion in chat. – Boman

@Rotwang Sir please check my post again..Thanks – Boman

I want to use the done.png as I said, you should use 2 pngs. I'd name them done_on.png and done_off.png – Frication

OK,but how about the color? – Boman

Make them differ by some detail. I.e.: the color. Otherwise, if they are identical, you won't see any change. – Frication

Answer 1

try this way.

ToggleButton :

<ToggleButton 
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:textOn="On"
    android:textOff="Off"
    android:textSize="20sp"
    android:background="@drawable/toggle_day_bg_selector" />

toggle_day_bg_selector.xml

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

toggle_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    >
    <solid android:color="@color/red" />

</shape>

toggle_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="@color/green" />

</shape>

Hope this will help.

EDIT :

use this drawable files for showing images on ToggleButton

toggle_off.xml

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

    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval" >
            <solid android:color="@android:color/holo_green_dark" />
        </shape>
    </item>
    <item android:drawable="@drawable/ic_launcher">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval" >
            <solid android:color="@android:color/holo_green_dark" />
        </shape>
    </item>

</layer-list>

toggle_on.xml

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

    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval" >
            <solid android:color="@android:color/holo_red_dark" />
        </shape>
    </item>
    <item android:drawable="@drawable/ic_launcher">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval" >
            <solid android:color="@android:color/holo_red_dark" />
        </shape>
    </item>

</layer-list>

happy coding..

Antony

Will this give me a tick togglebutton ? – Boman

you can modify shape file as per you requirement. you can wrap <shape> inside <item android:drawable="@drawable/done"> inside layer-list. i am not sure about that. i have't tested it yet. – Antony

thanks for your answer. If I don't want to have shape, just the tick with different color, is it possible ? – Boman

ofc. but it will just overrode default shape of you togglebutton. – Antony