En este tutorial vamos a explicar cómo usar los Radio Button y Radio Group. Puedes tener varias opciones y solo elegir una de ellas. Es decir, aprenderás como hacer que solo una opción esta señalada y al seleccionar otra, solo la nueva seleccionada estará señalada.
Resumen.
Primero agregamos un Radio Grooup a la UI, le damos una ID y lo acomodamos.
Después agregamos 3 Radio Button dentro del Radio Group. Los Radio Buttons se acomodarán uno enseguida del otro. Puede ser verticalmente u horizontalmente, según configuramos el Radio Group.
En seguida le damos una ID a cada RadioButton y un texto para que indique su fruición por ejemplo: “SI”, “NO” y “TAL VEZ”.
Luego a cada RadioButton le damos una ID distinta.
Con esto al correr la app, vemos como se selecciona una única opción de las 3 que tenemos, es decir, solo un RadioButton.
El signo e advertencia es debido a que en este ejemplo con creamos un recurso String para el texto de cada RadioButton, se recomienda hacerlo para tener mejor control de la App.
Lo único que falta es agregar el evento cuando el usuario de clic a cualquier Radio Button.
Para esto es simple:
- Primero vamos a declarar 3 variables tipo Radio Button, cada una la relacionamos con un Radio Button de XML mediante su ID.
- Luego a cada variable le agregamos el evento setOnClickListener().
Un ejemplo del código en java se muestra a continuación:
private RadioButton btnSi;
...
..
.
private void relacionarXml()
{
btnSi = findViewById(R.id.yes);
...
..
.
btnSi.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//Aquí realizas la acción cuando presionan el botón SI
}
});
...
..
.
}Con esto ya podemos usar los RadioButtons dentro de un RadioGroup.
¿Qué es un Radio Button y un Radio Gruop en Android?
Un RadioGroup es un elemento que puede contener varios RadioButtons.
Un Radio Button es un Botón tipo ChecbBox, con la diferencia en que se relaciona directamente con otros Radio Buttons que se encuentran en el mismo Radio Group. Al seleccionar un Radio Button los demás RadioButtons se des-seleccionarán.
Es decir, dentro del Radio Group vamos a tener varios RadioButtons. Y al presionar un Radio Button, este se marcará como seleccionado dejando al resto sin marcar. Solamente se puede tener una opción señalada dentro del Radio Group.
Agregando Radio Group y Radio Button en Android.
Primero agregaremos los elementos a nuestra UI. Así que en el modo design hacemos lo siguiente:
- Primero buscamos un RadioGroup y lo arrastramos a la UI. (Lo acomodamos para que ocupe el ancho de la pantalla)
- Luego buscamos los Radio Button, y agregamos 3, teniendo cuidado de que los RadioButton estén dentro del Radio Group.
Configurando el Radio Group en Android.
Primero lo debemos acomodar según queramos nuestra UI.
Luego el Radio Group, tiene la opción de orientación para determinar si los RadioButton se acomodan de manera Vertical u Horizontal, en este caso seleccionamos Horizontal. Se acomodarán uno enseguida del otro.
Y debemos darle una ID, para poder identificarlo.
El código de nuestro Radiogroup es el que se muestra en el siguiente punto señalamos con Negritas las partes más importantes, ten en cuenta que usamos ConstraintLayout para acomodar el RadioGroup.
Configurando los Radio Button.
Se acomodarán en el orden en que se encuentren en el código.
Podemos cambiarles el texto, en este caso son 3 opciones: “SI”, “NO” y “TAL VEZ”.
Y a cada RadioButton le daremos una ID: “yes”, “no” y “talvez”.
El código de la UI queda así:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity_Pruebas">
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="@+id/yes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SI" />
<RadioButton
android:id="@+id/no"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="NO" />
<RadioButton
android:id="@+id/talvez"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tal Vez" />
</RadioGroup>
</android.support.constraint.ConstraintLayout>Y así se ve la UI:
Al probar la app, podemos notar que al seleccionar cualquier opción, la que estaba seleccionada se desmarca. Quedando solo seleccionada la última que presionamos.
Agregando el método onClick().
Podemos agregar el evento Onclick de algunas maneras diferentes. En este caso lo haremos de la siguiente manera:
- Declaramos una variable tipo RadioButton.
- La relacionamos con un RadioButton de XML mediante su ID, usando findViewById(R.id…..).
- Luego a la variable que creamos le agregamos el evento onClic(), con setOnClickListener(…)
- Por último agregamos la acción que queremos hacer cuando se presione determinado RadioButton.
Lo anterior lo hacemos para los 3 RadioButtons.
En Java queda así:
private RadioButton btnSi;
private RadioButton btnNo;
private RadioButton btnTalVez;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity__pruebas);
}
private void relacionarXml()
{
btnSi = findViewById(R.id.yes);
btnNo = findViewById(R.id.no);
btnTalVez = findViewById(R.id.talvez);
btnSi.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//Aquí realizas la acción cuando presionan el botón SI
}
});
btnNo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//Aquí realizas la acción cuando presionan el botón NO
}
});
btnTalVez.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//Aquí realizas la acción cuando presionan el botón Tal Vez
}
});
}