web-dev-qa-db-fra.com

Comment styliser un Android Switch?

Le widget de commutateur introduit dans l'API 14 est stylé par défaut avec le thème holo. Je veux un style légèrement différent, en changeant ses couleurs et sa forme pour des raisons de marque. Comment on s'y prend? Je sais que cela doit être possible, comme je l’ai déjà vu la différence entre ICSpar défaut _ et le thème Touchwiz de Samsung

enter image description here

Je suppose que je vais avoir besoin de dessins tirables d’états, et j’ai vu quelques styles dans http://developer.Android.com/reference/Android/R.styleable.html avec Switch_thumb et Switch_track qui ressemble à ce que je pourrais être après. Je ne sais tout simplement pas comment m'y prendre.

J'utilise ActionbarSherlock si cela fait une différence. Bien entendu, seuls les appareils fonctionnant sous API v14 ou ultérieure pourront utiliser un commutateur.

androidandroid-themestylingandroid-stylesandroid-switch
116
Glenn.nz

Vous pouvez définir les éléments dessinables utilisés pour l’arrière-plan et la partie commutateur de la manière suivante:

<Switch
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:thumb="@drawable/switch_thumb"
    Android:track="@drawable/switch_bg" />

Vous devez maintenant créer un sélecteur définissant les différents états du commutateur sélectionnable. Voici les copies des sources Android:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:drawable="@drawable/switch_thumb_disabled_holo_light" />
    <item Android:state_pressed="true"  Android:drawable="@drawable/switch_thumb_pressed_holo_light" />
    <item Android:state_checked="true"  Android:drawable="@drawable/switch_thumb_activated_holo_light" />
    <item                               Android:drawable="@drawable/switch_thumb_holo_light" />
</selector>

Ceci définit le pouce pouvant être dessiné, l’image déplacée sur l’arrière-plan. Il y a quatre ninepatch images utilisées pour le curseur:

La version désactivée (version xhdpi que Android utilise)The deactivated version
Le curseur enfoncé: The pressed slider
Le curseur activé (état activé):The activated slider
La version par défaut (état désactivé): enter image description here

Il existe également trois états différents pour l'arrière-plan qui sont définis dans le sélecteur suivant:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:drawable="@drawable/switch_bg_disabled_holo_dark" />
    <item Android:state_focused="true"  Android:drawable="@drawable/switch_bg_focused_holo_dark" />
    <item                               Android:drawable="@drawable/switch_bg_holo_dark" />
</selector>

La version désactivée: The deactivated version
La version ciblée: The focused version
Et la version par défaut:the default version

Pour avoir un bouton stylé, créez simplement ces deux sélecteurs, réglez-les sur votre vue Basculement, puis modifiez les sept images selon le style souhaité.

252
Janusz

C'est une réponse détaillée impressionnante de Janusz. Mais juste pour le bien des gens qui viennent sur cette page pour obtenir des réponses, le moyen le plus simple est d’arriver à http://Android-holo-colors.com/ (lien mort) lié à partir de Android Asset Studio

Une bonne description de tous les outils est à AndroidOnRocks.com (site hors connexion maintenant)

Cependant, je recommande vivement à tous de lire la réponse de Janusz, car elle permettra de mieux comprendre. Utilisez l'outil pour faire des choses très vite

50
kishu27

Vous pouvez personnaliser les styles de matériau en définissant différentes propriétés de couleur. Par exemple thème d'application personnalisé 

<style name="CustomAppTheme" parent="Theme.AppCompat">
    <item name="Android:textColorPrimaryDisableOnly">#00838f</item>
    <item name="colorAccent">#e91e63</item>
</style>

Thème du commutateur personnalisé 

<style name="MySwitch" parent="@style/Widget.AppCompat.CompoundButton.Switch">
    <item name="Android:textColorPrimaryDisableOnly">#b71c1c</item>
    <item name="Android:colorControlActivated">#1b5e20</item>
    <item name="Android:colorForeground">#f57f17</item>
    <item name="Android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

Vous pouvez personnaliser le changement de piste et le changement de pouce comme ci-dessous en définissant les éléments dessinables xml. Pour plus d'informations http://www.zoftino.com/Android-switch-button-and-custom-switch-examples

custom switch track and thumb

3
Arnav Rao

Un moyen alternatif et beaucoup plus facile consiste à utiliser des formes au lieu de 9 patchs. Il est déjà expliqué ici: https://stackoverflow.com/a/24725831/512011

1
netpork