quitar - Android: crea un botón de alternar con imagen y sin texto

manual de programacion android pdf

Question

¿Es posible crear un botón para alternar en Android que tenga una imagen pero no texto? Idealmente se vería así:

He visto publicaciones similares donde la respuesta fue cambiar el fondo, pero quiero preservar el diseño de Holo Light y simplemente cambiar el texto con una imagen.

Necesito poder cambiar programáticamente la fuente de la imagen,

¿Alguna idea de cómo podría hacer esto?

Si esto no se puede hacer, ¿hay alguna manera de activar y desactivar un botón normal?

Answer 1

1. ¿Puedo reemplazar el texto de alternar con una imagen?

   No, no podemos, aunque podemos ocultar el texto sobrescribiendo el estilo predeterminado del botón de alternar, pero eso no nos dará un botón para alternar, ya que no podemos reemplazar el texto con una imagen.

2. ¿Cómo puedo hacer un botón de alternar normal?

   Crea un archivo ic_toggle en tu carpeta res/drawable

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

   Aquí @drawable/ic_slide_switch_on y @drawable/ic_slide_switch_off son imágenes que creas.

   A continuación, cree otro archivo en la misma carpeta, asígnele el nombre ic_toggle_bg

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
       <item android:id="@+android:id/background"  
             android:drawable="@android:color/transparent" />
   
       <item android:id="@+android:id/toggle"
             android:drawable="@drawable/ic_toggle" />
   
   </layer-list>

   Ahora agregue a su tema personalizado, (si no tiene uno, cree un archivo de styles.xml en su carpeta res/values/ )

   <style name="Widget.Button.Toggle" parent="android:Widget">
      <item name="android:background">@drawable/ic_toggle_bg</item>
      <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
   </style>
   
   <style name="toggleButton"  parent="@android:Theme.Black">
      <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>
      <item name="android:textOn"></item>
      <item name="android:textOff"></item>
   </style>

   Esto crea un botón de alternar personalizado para usted.

3. Cómo usarlo

   Use el estilo personalizado y el fondo en su vista.

     <ToggleButton
           android:id="@+id/toggleButton"
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:layout_gravity="right"
           style="@style/toggleButton"
           android:background="@drawable/ic_toggle_bg"/>

Answer 2

Sé que esto es un poco tarde, sin embargo, para cualquier persona interesada, he creado un componente personalizado que básicamente es un botón de imagen de alternar, el dibujable puede tener estados y el fondo

https://gist.github.com/akshaydashrath/9662072

Answer 3

crear toggle_selector.xml en res / dibujable

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

aplicar el selector a su botón de alternar

<ToggleButton
            android:id="@+id/chkState"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/toggle_selector"
            android:textOff=""
            android:textOn=""/>

Nota: para eliminar el texto que utilicé siguiendo el código anterior

textOff=""
textOn=""

Answer 4

ToggleButton hereda de TextView para que pueda configurar los TextView para que se muestren en los 4 bordes del texto. Puede usar eso para mostrar el icono que desea sobre el texto y esconder el texto real

<ToggleButton
    android:id="@+id/toggleButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@android:drawable/ic_menu_info_details"
    android:gravity="center"
    android:textOff=""
    android:textOn=""
    android:textSize="0dp" />

El resultado en comparación con ToggleButton regular parece

La opción de segundos es usar un ImageSpan para reemplazar el texto con una imagen. Se ve un poco mejor, ya que el icono está en la posición correcta, pero no se puede hacer directamente con el diseño xml.

Usted crea un ToggleButton simple

<ToggleButton
    android:id="@+id/toggleButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="false" />

Luego configure el "texto" programmatialmente

ToggleButton button = (ToggleButton) findViewById(R.id.toggleButton3);
ImageSpan imageSpan = new ImageSpan(this, android.R.drawable.ic_menu_info_details);
SpannableString content = new SpannableString("X");
content.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
button.setText(content);
button.setTextOn(content);
button.setTextOff(content);

El resultado aquí en el medio - icono se coloca ligeramente más bajo ya que ocupa el lugar del texto.