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

android togglebutton

— MBMJ
fuente

Puede consultar: 1- stackoverflow.com/questions/1533038/… 2- stackoverflow.com/questions/6100034/…

— Nermeen

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

Agregue dos imágenes (seleccionadas / no seleccionadas) en check.xml que funcionarán como dos estados diferentes del botón de alternancia

— AkashG

¿Tuviste algún problema con la extensión del fondo?

— Mike Bevz

android: textOn = "" android: textOff = "" era lo que estaba buscando

— png

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

@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

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

ToggleButton tiene CompoundButton padre. Y CompoundButton tiene android: atributo de botón: developer.android.com/reference/android/…

— MistaGreen

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

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