Botón de alternancia usando dos imágenes en diferentes estados

101

Necesito hacer un botón de alternancia usando dos imágenes en lugar del estado ON / OFF.

En el estado desactivado, configuro una imagen de fondo, pero el texto desactivado no se puede eliminar mientras uso la imagen de fondo.

Y no puedo configurar otra imagen en estado ON haciendo clic en el botón de alternar :( Soy nuevo en Android. Espero que me ayuden a salir de este problema

MBMJ
fuente

Respuestas:

219

Hacer esto:

<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"/>

crear check.xml en la carpeta dibujable

<?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>
AkashG
fuente
1
Agregue dos imágenes (seleccionadas / no seleccionadas) en check.xml que funcionarán como dos estados diferentes del botón de alternancia
AkashG
19
¿Tuviste algún problema con la extensión del fondo?
Mike Bevz
2
android: textOn = "" android: textOff = "" era lo que estaba buscando
png
9
Como parece que otros también tuvieron este problema, agrego mi solución aquí. Agregue android:background="@null"y android:drawableRight="@drawable/check". Por lo general, he encontrado que los botones de alternancia están justificados a la derecha. Si lo necesita justificado a la izquierda, useandroid:drawableLeft
Patrick
1
@Patrick Pero, ¿y si quieres que esté justificado en el centro? ... en todos los dispositivos. Así que no entremos en márgenes y relleno.
Martin Erlic
47

La solución de AkashG no me funciona. Cuando configuro check.xml en segundo plano, solo se coloca en dirección vertical. Para resolver este problema, debe configurar check.xml en la propiedad "android: button":

<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>
MistaGreen
fuente
10
ToggleButton tiene CompoundButton padre. Y CompoundButton tiene android: atributo de botón: developer.android.com/reference/android/…
MistaGreen
3
Esta debería ser la respuesta correcta. La respuesta aceptada resulta en dibujables estirados.
Bamerza
Si las imágenes tienen transparencia, android:background="@android:color/transparent"se pueden usar
Pavel
@Bamerza, no, esto tampoco se aplica a todos los casos. Si lo prueba con .svg, obtendrá un fondo estirado.
Farid
2

Puedes probar algo como esto. Aquí, al hacer clic en el botón de imagen, alterno la vista de imagen.

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;
            }
        }
    });
Srishti Roy
fuente