Botão de alternância usando duas imagens em estados diferentes


101

Eu preciso fazer um botão de alternância usando duas imagens em vez do estado ON / OFF.

No estado desligado, defino uma imagem de fundo. Mas o texto desligado não pode ser removido enquanto eu uso a imagem de fundo.

E não consigo definir outra imagem no estado LIGADO clicando no botão de alternância :( Sou novo no Android. Espero que vocês me ajudem a sair desse problema


Respostas:


219

Faça isso:

<ToggleButton 
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/check"   <!--check.xml-->
        android:layout_margin="10dp"
        android:textOn=""
        android:textOff=""
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:layout_centerVertical="true"/>

crie check.xml na pasta drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/selected_image"
          android:state_checked="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/unselected_image"
        android:state_checked="false"/>

 </selector>

1
Adicione duas imagens (selecionadas / não selecionadas) em check.xml que funcionará como dois estados diferentes de botão de alternância
AkashG

19
Você teve um problema com o plano de fundo sendo esticado?
Mike Bevz,

2
android: textOn = "" android: textOff = "" era o que eu estava procurando
png

9
Como parece que outras pessoas também tiveram esse problema, estou adicionando minha solução aqui. Adicione android:background="@null"e android:drawableRight="@drawable/check". Normalmente, descobri que os botões de alternância são justificados à direita. Se precisar justificado à esquerda, useandroid:drawableLeft
Patrick

1
@Patrick Mas e se você quiser centralizado? ... em todos os dispositivos. Portanto, não vamos entrar em margens e preenchimento.
Martin Erlic

47

A solução da AkashG não funciona para mim. Quando eu configuro check.xml para o fundo, ele é apenas traçado na direção vertical. Para resolver este problema, você deve configurar check.xml para a propriedade "android: button":

<ToggleButton 
    android:id="@+id/toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/check"   //check.xml
    android:background="@null"/>

check.xml:

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/selected_image"
          android:state_checked="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/unselected_image"
          android:state_checked="false"/>
    </selector>

10
ToggleButton tem o pai CompoundButton. E CompoundButton tem android: atributo de botão: developer.android.com/reference/android/…
MistaGreen

3
Esta deve ser a resposta correta. A resposta aceita resulta em drawables estendidos.
Bamerza

Se as imagens tiverem transparência, android:background="@android:color/transparent"pode ser usado
Pavel

@Bamerza, não, isso também não se aplica a todos os casos. Se você tentar com .svg, terá um fundo esticado.
Farid

2

Você pode tentar algo assim. Aqui, ao clicar no botão da imagem, alterno a visualização da imagem.

holder.imgitem.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            if(!onclick){
            mSparseBooleanArray.put((Integer) view.getTag(), true);
            holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_delete_overlay_com);
            onclick=true;}
            else if(onclick)
            {
                 mSparseBooleanArray.put((Integer) view.getTag(), false);
                  holder.imgoverlay.setImageResource(R.drawable.ipad_768x1024_editmode_selection_com);

            onclick=false;
            }
        }
    });
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.