Adicionando botões de opção personalizados no android

131

Estou tentando obter o efeito radiobutton para botões regulares no android

Eu tenho um simples botão de opção do Android abaixo

insira a descrição da imagem aqui

O código para isso é :

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="RadioButton1" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton2" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton3" />
    </RadioGroup>


</RelativeLayout>

Como personalizá-lo como abaixo:

insira a descrição da imagem aqui

Obrigado !

[EDITAR] usando o código de uma das respostas

insira a descrição da imagem aqui

Mas o nome do botão é ofuscado pela opção de seleção como removê-lo?

{EDITAR} mais alterações

No final das alterações, pelo menos eu deveria saber qual botão selecionei dentre três botões de opção .... é possível obter como abaixo?

insira a descrição da imagem aqui

android  xml 
— Devrath
fonte
4
4 anos depois LOL - isso pode ser útil para você crosp.net/blog/android/…
— Alguém em algum lugar
1
@SomeoneSomewhere ..... Hahaha ... Obrigado ... é útil :) :)
— Devrath

Respostas:

246

Adicione um drawable de plano de fundo que faça referência a uma imagem ou a um seletor (como abaixo) e torne o botão transparente:

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:text="RadioButton1" />

Se você desejar que seus botões de opção tenham um recurso diferente quando marcado, crie um fundo de seleção:

res / drawable / yourbuttonbackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/b"
        android:state_checked="true"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/b" />
</selector>

No seletor acima, referenciamos dois desenháveis ae b, eis como os criamos:

res / drawable / a.xml - Estado selecionado

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#53aade" />
</shape>

res / drawable / b.xml - Estado regular

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#555555" />
</shape>

Mais sobre desenháveis ​​aqui: http://developer.android.com/guide/topics/resources/drawable-resource.html

— Evan Bashir
fonte
1
Ei, obrigado, eu tenho a funcionalidade concluída ... Mas o nome do botão está sendo substituído pela opção de seleção ... como remover isso ... mantendo a funcionalidade intacta .... Tudo o que estou tentando alcançar como eu mostrado na minha pergunta ... Mais instruções! [Nota: por favor, olhe a pergunta atualizada] #
— Devrath
2
@Unicorn Adicionar android:button="@android:color/transparent"para removê-lo.
— Evan Bashir
3
@ Unicorn Sim, eu entendo. Tudo o que você precisa fazer é criar um selecionador que eu afirmei na minha resposta. Você criaria dois drawables. Um para o estilo de botão normal e outro para o estilo de botão pressionado. Atualizarei minha resposta com o código desses desenháveis.
— Evan Bashir
1
Para ajustar o texto em vez de sobrepor, defina o botão que pode ser desenhado, não o plano de fundo e verifique se é um patch com 9 pontos de extensão e áreas de conteúdo indicadas para o texto.
— Lance Nanek
3
Comportamento normal de um RadioButton, você está procurando uma caixa de seleção?
— Vincent D.
49

Atualizei a resposta aceita e removi coisas desnecessárias.

Eu criei XML para a seguinte imagem.

insira a descrição da imagem aqui

Seu código XML para RadioButtonserá:

<RadioGroup
        android:id="@+id/daily_weekly_button_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="@dimen/_80sdp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:checked="true"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Daily"
            android:textColor="@color/radio_flat_text_selector" />

        <RadioButton
            android:id="@+id/radio1"
            android:gravity="center"
            android:layout_width="@dimen/_80sdp"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Weekly"
            android:textColor="@color/radio_flat_text_selector" />

</RadioGroup>

radio_flat_selector.xml para seletor de plano de fundo:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_flat_selected" android:state_checked="true" />
    <item android:drawable="@drawable/radio_flat_regular" />
</selector>

radio_flat_selected.xml para o botão selecionado:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="1dp"
        />
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

radio_flat_regular.xml para seletor regular:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1dp" />
    <solid android:color="#fff" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

Todo o código de 3 arquivos acima estará na drawable/pasta.

Agora também precisamos do TextSeletor de cores para alterar a cor do texto de acordo.

radio_flat_text_selector.xml para seletor de cores de texto

(Use a color/pasta para este arquivo.)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="false" />
    <item android:color="@color/colorWhite" android:state_checked="true" />
</selector>

Nota: Consultei muitas respostas para este tipo de solução, mas não encontrei uma boa solução, por isso a faço.

Espero que seja útil para você.

Obrigado.

— Pratik Butani
fonte
Chego muito perto do que quero com isso, mas também vejo o raio do canto entre os itens. Quando tenho três botões, entendo isso. Existe alguma maneira de garantir que o raio se aplique apenas ao próprio grupo? imgur.com/mP8dtKR
— AdamMc331
1
@ AdamMc331, você terá que criar 3 seletores, um para o botão no início da linha, um para os do meio e outro para o último, para poder ajustar e apenas ter um canto arredondado no arestas e também esconder uma delas com marcação negativa se você embrulhar o <forma> dentro de um <item> isso é dentro de um <-list layer>
— Benny
Como faço para criar cor / pasta? Você pode por favor me ajudar
— Kamrujjaman Joy
Sim, vai funcionar. Entre em contato se tiver algum problema.
— Pratik Butani 18/01
Eu tentei no android 4 e obtive este ibb.co/jyHVXHS com atividade Appcompat, mas funciona bem quando estendo com Activity
— kartoos khan 18/01
42

Use o mesmo formato de arquivo XML da resposta de Evan, mas um arquivo extraível é tudo o que você precisa para formatar.

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:button="@android:color/transparent"
    android:checked="true"
    android:text="RadioButton1" />

E seu arquivo extraível separado:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" >
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" />            
         </shape>
    </item>

    <item android:state_checked="true">
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" /> 
         </shape>
    </item>  

    <item>
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#cccccc" />
             <solid android:color="#ffffff" />            
         </shape>
    </item>
</selector>
— Seslyn
fonte
1
Obrigado por isso ... parece útil. Ainda trabalhando para experimentar. O nome do drawable, customButtonBackground, não pode ter letras maiúsculas - pelo menos é o que o Android Studio me diz.
— Larsh
10

Definir android:backgrounde android:buttondo RadioButton como a resposta aceita não funcionou para mim. A imagem desenhável estava sendo exibida como plano de fundo (embora o evento android:buttonestivesse sendo definido como transparente) no texto do botão de opção comoinsira a descrição da imagem aqui

android:background="@drawable/radiobuttonstyle"
    android:button="@android:color/transparent"

assim, deu radiobutton como radiobuttonstyle.xml personalizável

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Maintenance"
    android:id="@+id/radioButton1"
    android:button="@drawable/radiobuttonstyle"
      />

e radiobuttonstyle.xml são os seguintes

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/ic_radio_checked"></item>
  <item android:state_checked="false" android:drawable="@drawable/ic_radio_unchecked"></item>
</selector>

e depois desse botão de opção com estilo de botão personalizado funcionou.

insira a descrição da imagem aqui

— Annu
fonte
8

Você deve preencher o atributo "Button" da classe "CompoundButton" com um caminho extraível XML ( my_checkbox ). No drawable XML, você deve ter:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" android:drawable="@drawable/checkbox_not_checked" />
     <item android:state_checked="true" android:drawable="@drawable/checkbox_checked" />
     <item android:drawable="@drawable/checkbox_not_checked" /> <!-- default -->
</selector>

Não se esqueça de substituir my_checkbox pelo nome do arquivo da caixa de seleção drawable, checkbox_not_checked pelo seu drawable PNG, que é sua caixa de seleção quando não está marcada e checkbox_checked com sua imagem quando marcada.

Para o tamanho, atualize diretamente os parâmetros de layout.

— flchaux
fonte
1
Acredito que o OP gostaria do texto dentro do botão. Eu acho que a única maneira de fazer isso é aplicar o drawable ao android:backgroundvs the android:button; declarando android:buttoncomo transparente. Dessa forma, o texto pode ficar dentro do botão.
— quer
5

Para ocultar o botão de opção padrão, sugiro removê-lo em vez de torná-lo transparente, pois todo o feedback visual é tratado pelo plano de fundo desenhável:

android:button="@null"

Também seria melhor usar estilos, pois existem vários botões de opção:

<RadioButton style="@style/RadioButtonStyle" ... />

<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
    <item name="android:background">@drawable/customButtonBackground</item>
    <item name="android:button">@null</item>
</style>

Você precisará do Seslyn customButtonBackground também.

— McX
fonte
4

A melhor maneira de adicionar drawable personalizado é:

 <RadioButton
                                android:id="@+id/radiocar"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@android:color/transparent"
                                android:button="@drawable/yourbuttonbackground"
                                android:checked="true"
                                android:drawableRight="@mipmap/car"
                                android:paddingLeft="5dp"
                                android:paddingRight="5dp"
                                android:text="yourtexthere"/>

A sobreposição de sombra do drawable personalizado é removida aqui.

— Abhilasha Sharma
fonte
Obrigado @Abhilasha.
— varotariya vajsi
Eu escolhi essa opção também sobre essa background. Se você definir o fundo, você não pode adicionar texto para o RadioButton, e necessidade de colocar o seu próprio TextView
— voghDev
3

Maneira simples tente isso

  1. Crie um novo layout na pasta drawable e chame-o de custom_radiobutton (você também pode renomear)

     <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_checked="false" 
android:drawable="@drawable/your_radio_off_image_name" />
 <item android:state_checked="true" 
android:drawable="@drawable/your_radio_on_image_name" />
</selector>

  2. Use isso em sua atividade de layout

    <RadioButton
 android:id="@+id/radiobutton"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:button="@drawable/custom_radiobutton"/>
— Sunil
fonte
1

O código abaixo é um exemplo de botão de opção personalizado. siga as etapas abaixo.

  1. Arquivo XML.

                        <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.5">


                        <TextView
                            android:id="@+id/text_gender"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="left|center_vertical"
                            android:gravity="center"
                            android:text="@string/gender"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"

                            />

                        <TextView
                            android:id="@+id/text_male"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginLeft="10dp"
                            android:gravity="center"
                            android:text="@string/male"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <RadioButton
                            android:id="@+id/radio_Male"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginRight="4dp"
                            android:button="@drawable/custom_radio_button"
                            android:checked="true"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"

                            />
                    </FrameLayout>

                    <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.6">

                        <RadioButton
                            android:id="@+id/radio_Female"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="0dp"
                            android:button="@drawable/custom_female_button"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <TextView
                            android:id="@+id/text_female"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="left|center_vertical"
                            android:gravity="center"
                            android:text="@string/female"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <RadioButton
                            android:id="@+id/radio_Other"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="center_horizontal|bottom"
                            android:layout_marginRight="10dp"
                            android:button="@drawable/custom_other_button"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <TextView
                            android:id="@+id/text_other"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginRight="34dp"
                            android:gravity="center"
                            android:text="@string/other"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>
                    </FrameLayout>
                </LinearLayout>

    2. adicione o xml personalizado para os botões de opção

    2.1.outros drawable

    custom_other_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_other" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    2.2.desenho feminino

    custom_female_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_female" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    2.3 masculino drawable

    custom_radio_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_male" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    1. Saída: esta é a tela de saída
— sachin pangare
fonte
0

Sei que essa é uma resposta tardia, mas, olhando para developer.android.com, parece que o botão Alternar seria ideal para a sua situação.

Alternar imagem do botão http://developer.android.com/guide/topics/ui/controls/togglebutton.html

E é claro que você ainda pode usar as outras sugestões para ter um plano de fundo desenhável para obter uma aparência personalizada desejada.

<ToggleButton 
    android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:textOn="On"
    android:textOff="Off"
    />

Agora, se você deseja fazer a edição final e ter um efeito "halo" nos botões, use outro seletor personalizado para fazer isso.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" > <!-- selected -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="3px"
                android:color="@android:color/holo_blue_bright" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item> <!-- default -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="1px"
                android:color="@android:color/darker_gray" />
            <corners
                android:radius="5dp" />
        </shape>
    </item> 
</selector>
— Arthulia
fonte
Isso ainda permitiria o comportamento dos botões de opção, pois quando um botão é marcado, outros são desmarcados?
— Larsh
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.