Como posso estilizar um Switch Android?

121

O widget de chave introduzido na API 14 é estilizado por padrão com o tema holo. Quero estilizá-lo um pouco diferente, mudando suas cores e forma um pouco por motivos de marca. Como alguém faz isso? Eu sei que deve ser possível, como já vi a diferença entre o ICS padrão e o tema touchwiz da Samsung

insira a descrição da imagem aqui

Suponho que vou precisar de alguns drawables de estado e já vi alguns estilos em http://developer.android.com/reference/android/R.styleable.html com Switch_thumb e Switch_track que se parecem com o que eu poderia estar depois . Só não sei como usá-los.

Estou usando o ActionbarSherlock se isso faz diferença. Somente dispositivos executando a API v14 ou superior poderão usar um comutador, é claro.

— Glenn.nz
fonte

258

Você pode definir os drawables que são usados para o plano de fundo e a parte do switcher como esta:

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

Agora você precisa criar um seletor que defina os diferentes estados da gaveta do comutador. Aqui estão as cópias das fontes do 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>

Isso define o polegar extraível, a imagem que é movida sobre o fundo. Existem quatro imagens de nove patches usadas para o controle deslizante:

A versão desativada (versão xhdpi que o Android está usando)
O controle deslizante pressionado:
O controle deslizante ativado (estado ativado):
A versão padrão (estado desativado): insira a descrição da imagem aqui

Também existem três estados diferentes para o plano de fundo que são definidos no seguinte seletor:

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

A versão desativada:
A versão focada:
E a versão padrão:

Para ter uma opção estilizada, basta criar esses dois seletores, defina-os em seu Modo de exibição de comutador e altere as sete imagens para o estilo desejado.

— Janusz
fonte

1

Agradecimentos muito detalhados, as imagens do controle deslizante de 9 patches que deixaram parte do polegar sair da pista foram especialmente úteis, pois eu não conseguia entender como elas estavam fazendo isso. (o controle deslizante padrão tem os bits de borda pontiaguda mover para além do fim da pista para fazer uma extremidade quadrada de um lado)

— Glenn.nz

2

Há mais um estado <item android: state_checked = "true"> que pode alterar a imagem da faixa quando a chave está no estado "ligado". portanto, se você deseja ativar ou desativar a faixa, use esse estado.

— Narangrajeev81

1

Como posso estilizar a cor do texto para o polegar? Eu não consigo encontrá-lo em qualquer lugar :(

— pojomx:

1

@ pojomx. Você encontrou alguma solução para a cor do texto - ou seja, a cor do texto ativada / desativada? Estou enfrentando o mesmo problema e preso no mesmo ponto.

— 31515

Para alterar a cor do texto => android: switchTextAppearance = "@ style / mySwitchTextSyle"

— Andrew

50

É uma resposta detalhada impressionante por Janusz. Mas apenas para ajudar as pessoas que estão acessando esta página para obter respostas, a maneira mais fácil é em http://android-holo-colors.com/ (link morto) vinculado do Android Asset Studio

Uma boa descrição de todas as ferramentas está no AndroidOnRocks.com (site offline agora)

No entanto, recomendo a todos que leiam a resposta de Janusz, pois isso tornará o entendimento mais claro. Use a ferramenta para fazer coisas rapidamente

— kishu27
fonte

6

Grande economia de tempo. 9 patches, drawables da lista de estados, etc. tudo em um clique!

— Steve

Esta resposta é tão útil que eu gostaria de vê-la postada como uma questão de "ferramenta para criar facilmente controles holo do Android por cores personalizadas" e resposta aceita. Os desenvolvedores precisam disso.

— Rachael

Tenho certeza de que teria sido uma ótima ferramenta ... todos os links estão mortos, infelizmente

— Razvan_TK9692 17/03

3

Você pode personalizar estilos de material definindo propriedades de cores diferentes. Por exemplo , tema de aplicativo customizado

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

Tema de mudança personalizado

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

Você pode personalizar a faixa de alternância e o polegar, como na imagem abaixo, definindo drawables xml. Para maiores informações http://www.zoftino.com/android-switch-button-and-custom-switch-examples

— Arnav Rao
fonte

1

Uma maneira alternativa e muito mais fácil é usar formas em vez de 9 patches. Já está explicado aqui: https://stackoverflow.com/a/24725831/512011

— netpork
fonte

idk, a ferramenta mencionada na resposta do kishu27 foi muito mais rápida apenas para mudar a cor, pois cria todos os arquivos para você. Eu acho que se você quiser personalizar a forma, além da cor, embora isso provavelmente seja mais rápido.

— JStephen

A ferramenta é realmente ótima, embora, francamente, eu não goste de uma idéia de que, se você quiser apenas mudar a cor de algo, precisará gerar um monte de imagens. Além disso, se você estiver usando formas, poderá ter cores diferentes para as posições de chave liga / desliga.

— Netpork

verdade, se você estiver indeciso como eu e ficar mudando a cor até encontrar um que você gosta, então isso é muito mais rápido, para minha sorte alguém é encarregado de escolher as cores :)

— JStephen