Agregar botones de radio personalizados en Android

131

Estoy tratando de obtener el efecto de botón de radio para los botones normales en Android

Tengo un simple botón de radio de Android a continuación

ingrese la descripción de la imagen aquí

El código para esto es ::

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>

Cómo personalizarlo como a continuación ::

ingrese la descripción de la imagen aquí

Gracias !

[EDITAR] usando el código de una de las respuestas

ingrese la descripción de la imagen aquí

Pero el nombre del botón está eclipsado por la opción de selección ¿cómo eliminarlo?

{EDITAR} más cambios

Al final, todos los cambios deberían, al menos, saber qué botón he seleccionado de entre tres botones de radio ... ¿es posible obtener lo siguiente?

ingrese la descripción de la imagen aquí

android  xml 
— Devrath
fuente
44
4 años después LOL - esto podría ser útil para usted crosp.net/blog/android/…
— Alguien en algún lugar
1
@SomeoneSomewhere ..... Jajaja ... Gracias ... Es útil :) :)
— Devrath

Respuestas:

246

Agregue un fondo dibujable que haga referencia a una imagen o un selector (como se muestra a continuación) y haga que el botón sea 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" />

Si desea que sus botones de radio tengan un recurso diferente cuando está marcado, cree un fondo de selector que se pueda dibujar:

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>

En el selector de arriba, hacemos referencia a dos elementos dibujables ay basí es como los creamos:

res / drawable / a.xml - Estado seleccionado

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

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

Más información sobre los dibujos aquí: http://developer.android.com/guide/topics/resources/drawable-resource.html

— Evan Bashir
fuente
1
Oye, gracias, hice la funcionalidad ... Pero la opción de selección sobrescribe el nombre del botón ..... cómo eliminarlo ... manteniendo la funcionalidad intacta ... Todo lo que estoy tratando de lograr mientras se muestra en mi pregunta ... ¡Más instrucciones! [Nota :: mire la pregunta actualizada]
— Devrath
2
@Unicorn Agregar android:button="@android:color/transparent"para eliminarlo.
— Evan Bashir
3
@Unicorn Sí, lo entiendo. Todo lo que necesitas hacer es crear un selector que se pueda dibujar como dije en mi respuesta. Crearías dos elementos dibujables. Uno para el estilo de botón normal y otro para el estilo de botón presionado. Actualizaré mi respuesta con el código para estos elementos dibujables.
— Evan Bashir
1
Para ajustar el texto en lugar de superponerlo, configure el botón dibujable, no el fondo, y asegúrese de que sea un parche de 9 con puntos de estiramiento y áreas de contenido indicadas para ajustarse al texto.
— Lance Nanek
3
Comportamiento normal para un RadioButton, ¿estás buscando la casilla de verificación?
— Vincent D.
49

He actualizado la respuesta aceptada y eliminado cosas innecesarias.

He creado XML para la siguiente imagen.

ingrese la descripción de la imagen aquí

Su 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 selector de fondo:

<?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 el botón seleccionado:

<?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 selector 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 el código de archivo 3 anterior estará en la drawable/carpeta.

Ahora también necesitamos TextSelector de color para cambiar el color del texto en consecuencia.

radio_flat_text_selector.xml para selector de color de texto

(Use la color/carpeta para este archivo).

<?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: Revisé muchas respuestas para este tipo de solución, pero no encontré una buena solución, así que la hice.

Espero que te sea útil.

Gracias.

— Pratik Butani
fuente
Con esto me acerco mucho a lo que quiero, pero también veo el radio de la esquina entre los elementos. Cuando tengo tres botones, obtengo esto. ¿Hay alguna manera de asegurarse de que el radio solo se aplique al grupo en sí? imgur.com/mP8dtKR
— AdamMc331
1
@ AdamMc331, tendrá que crear 3 selectores, uno para el botón al comienzo de la fila, uno para los del medio y otro para el último, donde podrá ajustar y simplemente redondear una de las bordes, y también esconde uno de ellos con marca negativa si envuelve la <forma> dentro de un <elemento> que está dentro de una <lista de capas>
— Benny
¿Como creo color / carpeta? ¿Pueden ayudarme?
— Kamrujjaman Joy
Sí, funcionará Avísame si tienes algún problema.
— Pratik Butani
Probé en Android 4 y obtuve este ibb.co/jyHVXHS con la actividad Appcompat, pero funciona bien cuando extiendo con Activity
— kartoos khan
42

Use el mismo formato de archivo XML de la respuesta de Evan, pero un archivo dibujable es todo lo que necesita para formatear.

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

Y su archivo extraíble por 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
fuente
1
Gracias por esto ... parece útil. Todavía estoy trabajando en probarlo. El nombre del dibujable, customButtonBackground, no puede tener mayúsculas, al menos eso es lo que Android Studio me dice.
— LarsH
10

La configuración android:backgroundy android:buttonel RadioButton como la respuesta aceptada no funcionaron para mí. La imagen dibujable se mostraba como fondo (aunque android:buttonse configuraba como transparente) al texto del botón de radio comoingrese la descripción de la imagen aquí

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

así que di radiobutton como el radiobuttonstyle.xml dibujable personalizado

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

y radiobuttonstyle.xml es el siguiente

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

y después de este botón de radio con un estilo de botón personalizado funcionó.

ingrese la descripción de la imagen aquí

— Annu
fuente
8

Debe completar el atributo "Botón" de la clase "CompoundButton" con una ruta dibujable XML ( my_checkbox ). En el sorteo XML, debe tener:

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

No olvide reemplazar my_checkbox por su nombre de archivo de la casilla de verificación dibujable, checkbox_not_checked por su PNG dibujable, que es su casilla de verificación cuando no está marcada y checkbox_checked con su imagen cuando está marcada.

Para el tamaño, actualice directamente los parámetros de diseño.

— flchaux
fuente
1
Creo que al OP le gustaría el texto dentro del botón. Creo que la única forma de hacerlo es aplicando el dibujable a android:backgroundvs android:button; luego declarando el android:buttoncomo transparente. De esta manera, el texto puede quedar dentro del botón.
— Evan Bashir
5

Para ocultar el botón de opción predeterminado, sugiero eliminar el botón en lugar de hacerlo transparente, ya que todos los comentarios visuales se manejan con el fondo dibujable:

android:button="@null"

También sería mejor usar estilos, ya que hay varios botones de opción:

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

Necesitará también el dibujo personalizado Seslyn customButtonBackground .

— McX
fuente
4

La mejor manera de agregar dibujos personalizados es:

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

La superposición de sombras mediante un dibujo personalizado se elimina aquí.

— Abhilasha Sharma
fuente
Gracias @Abhilasha.
— varotariya vajsi
Elegí esta opción también sobre la opción background. Si establece el fondo, no puede agregar texto al RadioButton y necesita colocar su propio TextView
— voghDev
3

Manera simple prueba esto

  1. Cree un nuevo diseño en una carpeta dibujable y asígnele el nombre custom_radiobutton (también puede cambiarle el nombre)

     <?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 esto en su actividad de diseño

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

El siguiente código es un ejemplo de botón de opción personalizado. siga los pasos a continuación.

  1. Archivo 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.agregue el xml personalizado para los botones de radio

    2.1.otro dibujable

    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.muñeca dibujable

    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. dibujable masculino

    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. Salida: esta es la pantalla de salida
— sachin pangare
fuente
0

Me doy cuenta de que esta es una respuesta tardía, pero mirando a través de developer.android.com, parece que el botón Toggle sería ideal para su situación.

Alternar imagen de botón http://developer.android.com/guide/topics/ui/controls/togglebutton.html

Y, por supuesto, aún puede usar las otras sugerencias para tener un fondo dibujable para obtener el aspecto personalizado que desea.

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

Ahora, si desea continuar con su edición final y tener un efecto de "halo" alrededor de sus botones, puede usar otro selector personalizado para hacerlo.

<?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
fuente
¿Permitiría esto el comportamiento del botón de radio en el sentido de que cuando se marca un botón, no se marca ningún otro?
— LarsH
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.