Toggle button using two image on different state

Question

I need to make a toggle button using two image instead of ON/OFF state.

At off state i set a background image.But the OFF text can not removed while i use background image.

And i can not set another image on ON state by clicking the toggle button :( I am new in android. I hope you guys help me get out of this problem

Bouchard

You can check: 1- #1533538 2- #6100534 – Muckraker

Note that if you only use images to toggle, you could have something like this: https://mcmap.net/q/205456/-checkable-imageview – Cohlier

Answer 1

Do this:

<ToggleButton 
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/check"   <!--check.xml-->
        android:layout_margin="10dp"
        android:textOn=""
        android:textOff=""
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:layout_centerVertical="true"/>

create check.xml in drawable folder

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

 </selector>

Seidler

Add two images(selected/unselected) in check.xml which will work as two different states of toggle button – Seidler

Did you have a problem with background being stretched? – Carious

No, not at all @MikeBevz. Why are you getting image stretched? – Seidler

@MikeBevz You are probably using image of wrong resolution...... try with some different resolution images! – Slush

When i set a background selector, the toggle buttons background is just transparent. Ive checked size, color etc and even applied other selectors that I know work. any ideas? – Indrawn

android:textOn="" android:textOff="" was what i was looking for – Icing

What is the reason of setting focusable and focusableInTouchMode to false? – Pennon

I was using a switch with a selector and the background looked normal. When I tried this approach, it stretched the background out. Any idea why? – Aram

Since it looks like others had this problem as well, I'm adding my solution here. Add android:background="@null" and android:drawableRight="@drawable/check". Usually I've found toggle buttons are right-justified. If you need it left-justified, use android:drawableLeft – Aram

Awesome man, android:textOn="" android:textOff="" is fabolous idea,Thanks – Discomfortable

@Aram But what if you want it center justified?... on all devices. So let's not get into margins and padding. – Medarda

Answer 2

AkashG's solution don't work for me. When I set up check.xml to background it's just stratched in vertical direction. To solve this problem you should set up check.xml to "android:button" property:

<ToggleButton 
    android:id="@+id/toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/check"   //check.xml
    android:background="@null"/>

check.xml:

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

Mendelssohn

ToggleButton has parent CompoundButton. And CompoundButton has android:button attribute: developer.android.com/reference/android/… – Mendelssohn

This should be the correct answer. The accepted answer results in stretched drawables. – Menu

If images have transparency, android:background="@android:color/transparent" can be used – Atomize

@Bamerza, no this doesn't apply to all cases either. If you try it with .svg you'll get stretched background. – Incus

What if I don't want to have text used, and only drawables? Still possible? – Cohlier

Answer 3

You can try something like this. Here on click of image button I toggle the imageview.

holder.imgitem.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            if(!onclick){
            mSparseBooleanArray.put((Integer) view.getTag(), true);
            holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_delete_overlay_com);
            onclick=true;}
            else if(onclick)
            {
                 mSparseBooleanArray.put((Integer) view.getTag(), false);
                  holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_selection_com);

            onclick=false;
            }
        }
    });

Kitchenmaid