Android: Créer un bouton bascule avec image et pas de texte

Question

est-il possible de créer un bouton bascule dans Android qui a une image mais pas de texte? Idéalement, il devrait ressembler à ceci:

Jai vu des postes similaires où la solution a été de changer le fond, mais je tiens à préserver l'Holo Lumière de la disposition et il vous suffit de changer le texte avec une image.

J'ai besoin d'être en mesure de programaticallly changer la source de l'image,

Aucune idées de comment je pourrais faire cela?

Si cela ne peut pas être fait, est-il un moyen pour moi de faire un bouton normal de l'activer ou le désactiver?

Answer 1

1. Puis-je remplacer la bascule de texte avec une image

   Non, nous ne pouvons pas, bien que nous ne pouvons cacher le texte par overiding le style par défaut du bouton à bascule, mais encore qui ne nous donne pas un bouton à bascule vous souhaitez que nous ne pouvons pas remplacer le texte par une image.

2. Comment puis-je faire un normal, le bouton à bascule

   Créer un fichier ic_toggle dans votre res/drawable le dossier

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

   Ici, @drawable/ic_slide_switch_on & @drawable/ic_slide_switch_off sont des images que vous créez.

   Ensuite, créez un autre fichier dans le même dossier, le nom 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>
   

   Maintenant, ajoutez à votre thème personnalisé, (si vous n'en avez pas créer un styles.xml fichier dans votre dossier res/values/le dossier)

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

   Cela crée un custom bouton à bascule pour vous.

3. Comment l'utiliser

   Utiliser le style personnalisé et d'arrière-plan de votre point de vue.

     <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

ToggleButton hérite TextView de sorte que vous pouvez définir un drawable pour être affiché à la des 4 frontières du texte. Vous pouvez l'utiliser pour afficher l'icône que vous souhaitez sur le dessus du texte et de masquer le texte

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

Le résultat par rapport à la régulière ToggleButton ressemble

Les secondes option est d'utiliser une ImageSpan de réellement remplacer le texte par une image. Regarde un peu mieux depuis l'icône est à la bonne position, mais ne peut pas être fait avec un layout xml directement.

Vous créez une plaine ToggleButton

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

Puis réglez le "texte" programmatially

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);

Le résultat, ici, dans le moyen - icône est placée légèrement plus faible puisqu'il prend la place du texte.

Answer 3

créez toggle_selector.xml dans res / drawable

 <?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>
 

appliquer le sélecteur à votre bouton bascule

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

Remarque: pour supprimer le texte que j'ai utilisé ci-dessous dans le code ci-dessus

 textOff=""
textOn=""
 

Answer 4

Je sais que c'est un peu tard, mais pour les personnes intéressées, j'ai créé un composant personnalisé qui est essentiellement un bouton à bascule d'image. Le dessin peut avoir des états ainsi que l'arrière-plan.

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