Comment puis-je styliser un commutateur Android?

121

Le widget de commutation introduit dans l'API 14 est stylé par défaut avec le thème holo. Je veux lui donner un style légèrement différent, changer ses couleurs et sa forme un peu pour des raisons de marque. Comment s'y prend-on? Je sais que cela doit être possible, car j'ai vu la différence entre l'ICS par défaut et le thème touchwiz de Samsung

entrez la description de l'image ici

Je suppose que j'aurai besoin de certains tableaux d'état, et j'ai vu quelques styles dans http://developer.android.com/reference/android/R.styleable.html avec Switch_thumb et Switch_track qui ressemblent à ce que je pourrais être après . Je ne sais tout simplement pas comment les utiliser.

J'utilise ActionbarSherlock si cela fait une différence. Seuls les appareils exécutant l'API v14 ou supérieure pourront utiliser un commutateur, bien sûr.

— Glenn.nz
source

258

Vous pouvez définir les dessinables utilisés pour l'arrière-plan et la partie du sélecteur comme ceci:

<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 qui définit les différents états du mélangeur pouvant être dessiné. 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>

Cela définit le pouce dessiné, l'image qui est déplacée sur l'arrière-plan. Il y a quatre images à neuf patchs utilisées pour le curseur:

La version désactivée (version xhdpi utilisée par Android)
Le curseur enfoncé:
Le curseur activé (état activé):
La version par défaut (état désactivé): entrez la description de l'image ici

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:
La version focalisée:
Et la version par défaut:

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

— Janusz
source

1

Merci très détaillé, les images du curseur à 9 patchs qui laissent une partie du pouce sortir de la piste ont été particulièrement utiles car je ne pouvais pas comprendre comment ils faisaient cela. (le curseur par défaut fait bouger les bits du bord pointu au-delà de la fin de la piste pour former une extrémité carrée sur un côté)

— Glenn.nz

2

Il y a un autre état qui est <item android: state_checked = "true"> qui peut changer l'image de la piste lorsque le commutateur est à l'état "on". donc si vous voulez changer la piste sur "on" / "off", utilisez cet état.

— narangrajeev81

1

Comment puis-je styliser la couleur du texte pour le pouce? je ne le trouve nulle part :(

— pojomx

1

@ pojomx. Avez-vous trouvé une solution pour la couleur du texte - c'est-à-dire activer / désactiver la couleur du texte? Je suis confronté au même problème et coincé au même point.

— Smeet

Pour changer la couleur du texte => android: switchTextAppearance = "@ style / mySwitchTextSyle"

— Andrew

50

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 à http://android-holo-colors.com/ (lien mort) lié à Android Asset Studio

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

Cependant, je recommande vivement à tout le monde de lire la réponse de Janusz car cela rendra la compréhension plus claire. Utilisez l'outil pour faire des choses très rapidement

— kishu27
source

6

Grand gain de temps. 9-patches, liste d'états dessinables, etc. en un seul clic!

— Steve

Cette réponse est tellement pratique que j'aimerais la voir postée comme une question de "outil pour créer facilement des contrôles holo android par couleur personnalisée" et réponse acceptée. Les développeurs en ont besoin.

— Rachael

Je suis sûr que cela aurait été un excellent outil ... tous les liens sont malheureusement morts

— Razvan_TK9692

3

Vous pouvez personnaliser les styles de matériaux en définissant différentes propriétés de couleur. Par exemple, un 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 de 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 la piste de commutation et changer de pouce comme l'image ci-dessous en définissant des tableaux xml. Pour plus d'informations http://www.zoftino.com/android-switch-button-and-custom-switch-examples

— Arnav Rao
source

1

Une manière alternative et beaucoup plus simple consiste à utiliser des formes au lieu de 9 patchs. C'est déjà expliqué ici: https://stackoverflow.com/a/24725831/512011

— netpork
source

idk, l'outil mentionné dans la réponse de kishu27 était beaucoup plus rapide pour simplement changer la couleur car il crée tous les fichiers pour vous. Je suppose que si vous souhaitez personnaliser la forme en plus de la couleur, c'est probablement plus rapide.

— JStephen

L'outil est vraiment génial, même si, franchement, je n'aime pas l'idée que si vous voulez simplement changer la couleur de quelque chose, vous devez générer un tas d'images. De plus, si vous utilisez des formes, vous pouvez avoir différentes couleurs pour les positions des interrupteurs marche / arrêt.

— netpork

vrai, si vous êtes indécis comme moi et continuez à changer de couleur jusqu'à ce que vous trouviez celle que vous aimez, alors c'est beaucoup plus rapide, heureusement pour moi, quelqu'un d'autre est en charge de choisir les couleurs :)

— JStephen