RadioButton

Introdución

• O control RadioButton permite escoller unha opción entre varias posibles.
• Aconséllase usar este control sempre que se queiran amosar ao usuario múltiples opcións, unha ao carón doutra.
• En caso contrario débese usar un Spinner (Lista despregable).
• No layout os RadioButton organízanse dentro dun RadioGroup que vai controlar que non haxa máis dunha opción marcada.

• Nota: polas opcións que ofrece a imaxe, tomada de Android SDK, aí debe traballar un galego.

• RadioGroup herda da clase LinearLayout co cal terá as súas propiedades, entre elas: android:orientation

• RadioButton herda da clase CompoundButton ao igual que CheckBox:

Por tanto, funcionan da mesma maneira:

• Ten 2 estados (True/False), que podemos comprobar co método isChecked ().
• Podemos cambiar o seu estado por programación chamando ao método setChecked(boolean)

• Podemos xestionar o cambio de estado dun RadioButton coa chamada ao método setOnCheckedChangeListener(OnCheckedChangeListener)

• Tamén podemos xestionar os eventos da mesma forma que nos botóns, coa interface OnClickListener ou pola propiedade android:onCLick.

• Imaxe obtida de: http://www.itcsolutions.eu/2011/08/27/android-tutorial-4-procedural-vs-declarative-design-of-user-interfaces

• Referencias:
  • Control RadioButton: http://developer.android.com/reference/android/widget/RadioButton.html
  • Control RadioGroup: http://developer.android.com/reference/android/widget/RadioGroup.html
  • Introdución ao control: http://developer.android.com/guide/topics/ui/controls/radiobutton.html

Caso práctico 1

• Partimos que xa temos creado o proxecto inicial como xa indicamos anteriormente.

Lembrar que se estades a empregar as bibliotecas de compatibilidade (por defecto), a vosa activity derivará de AppCompactActivity e non de Activity

Nos exemplos seguintes toda activity deriva de Activity, pero o normal é que empregedes AppCompactActivity (coidado ao copiar os exemplos).

Se non o temos creado antes, crea un paquete de nome UI como un subpaquete do teu paquete principal.

Dentro do paquete UI, crearemos un novo paquete de nome: RadioButtons.

• Dentro do paquete RadioButtons crear unha nova 'Empty Activity' de nome: UD02_01_RadioButtons de tipo Launcher.

Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.

• Imos crear unha aplicación na que o usuario indique se é ou non maior de idade e cal é o seu deporte favorito.

Para iso temos que crear dous RadioGroups. Cada un deles xestionará o conxunto de RadioButtons que teñan de tal forma que soamente poderá estar activo un dos RadioButtons por grupo.

• RadioButton
• 

  Arrastramos un RadioGroup e o anclamos. Fixarse que o RadioGroup ten como layout un LinearLayout e por tanto podemos cambiar a propiedade Orientation para facer que os RadioButton se sitúen en horizontal ou vertical.

• 

  Arrastramos agora un RadioButton ao interior do RadioGroup. Ten que quedar dentro na xerarquía de Views (na ventá Component Tree). Cambiamos o texto e o checkeamos por defecto e tamén dámoslle un id. Nota: Na imaxe aparece o texto '< 18'. Para escribilo tedes que poñer na propiedade Text: <18

• 

  Arrastramos o seguinte. Cambiamos o id e o texto.

Esta sería unha forma de marcar o check por defecto, pero tamén podemos indicalo sobre o RadioGroup. Na mesma Activity imos a engadir un segundo RadioGroup no que seleccionaremos o noso deporte favorito.

• RadioGoup
• 

  Arrastramos o segundo RadioGroup e o anclamos segundo as nosas preferencias. Fixarse que o RadioGroup ten que estar á mesma altura que o outro RadioGroup na ventá ComponentTree. Cambiamos o seu id e orientación (tedes que buscar a propiedade pola lista abaixo de todo. Na imaxe aparece arriba porque o valor foi cambiado).

• 

  Arrastramos os tres RadioButton´s dentro do RadioGroup e cambiamos o id e o texto en cada un deles.

• 

  Agora, a diferenza do RadioGroup anterior, imos seleccionar o RadioButton por defecto cambiando a propiedade checkedButton do RadioGroup.

XML do Layout

• Observar como RadioGroup é un layout máis de tipo Linear.
• Observar como a primeira opción está activada por defecto.

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context="cifprodolfoucha.cursoandroid.aprendiendo.UI.RadioButtons.UD02_01_RadioButtons">
 8 
 9     <RadioGroup
10         android:id="@+id/rgrpRadioGroup"
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         app:layout_constraintStart_toStartOf="parent"
14         app:layout_constraintTop_toTopOf="parent">
15 
16         <RadioButton
17             android:id="@+id/rbtnMenor18"
18             android:layout_width="match_parent"
19             android:layout_height="wrap_content"
20             android:checked="true"
21             android:text="&lt; 18" />
22 
23         <RadioButton
24             android:id="@+id/rbtnMaior18"
25             android:layout_width="match_parent"
26             android:layout_height="wrap_content"
27             android:text=">= 18" />
28 
29     </RadioGroup>
30 
31     <RadioGroup
32         android:id="@+id/rgrpDeporteFav"
33         android:layout_width="0dp"
34         android:layout_height="wrap_content"
35         android:layout_marginStart="8dp"
36         android:layout_marginTop="16dp"
37         android:layout_marginEnd="8dp"
38         android:checkedButton="@id/rbtnBaloncesto"
39         android:orientation="horizontal"
40         app:layout_constraintEnd_toEndOf="parent"
41         app:layout_constraintStart_toStartOf="parent"
42         app:layout_constraintTop_toBottomOf="@+id/rgrpRadioGroup">
43 
44         <RadioButton
45             android:id="@+id/rbtnNatacion"
46             android:layout_width="wrap_content"
47             android:layout_height="wrap_content"
48             android:layout_weight="1"
49             android:text="Natación" />
50 
51         <RadioButton
52             android:id="@+id/rbtnBaloncesto"
53             android:layout_width="wrap_content"
54             android:layout_height="wrap_content"
55             android:layout_weight="1"
56             android:text="Baloncesto" />
57 
58         <RadioButton
59             android:id="@+id/rbtnTenis"
60             android:layout_width="wrap_content"
61             android:layout_height="wrap_content"
62             android:layout_weight="1"
63             android:text="Tenis" />
64     </RadioGroup>
65 
66 </androidx.constraintlayout.widget.ConstraintLayout>

Código Java

Neste código imos ver como cambiar algunha das propiedades, tanto do RadioButton como do RadioGroup.

 1 public class UD02_01_RadioButtons extends AppCompatActivity {
 2 
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_u_d02_01__radio_buttons);
 7 
 8         RadioButton rbtnMenor18 = findViewById(R.id.rbtnMenor18);   // Obtemos unha referencia ao RadioButton
 9         Toast.makeText(getApplicationContext(),"Estado do rbtnMenor18:" + String.valueOf(rbtnMenor18.isChecked()), Toast.LENGTH_SHORT).show();   // Có método isChecked() sabemos se está seleccionado
10 
11         ((RadioButton)findViewById(R.id.rbtnMaior18)).setChecked(true); // Por programación podemos cambiar o estado dun RadioButton. Con setChecked(boolean) cambiamos o estado.
12 
13         RadioGroup rgroupDeportes = findViewById(R.id.rgrpDeporteFav);    // Obtemos a referencia a un RadioGroup
14         int idRadioButtonSel = rgroupDeportes.getCheckedRadioButtonId();  // getCheckedRadioButtonId() devolve o ID do RadioButton seleccionado no RadioGroup.
15         if (idRadioButtonSel == R.id.rbtnBaloncesto){                     // Podemos comparar dito id cos íd´s da clase R.
16             RadioButton rbtnBaloncesto = findViewById(idRadioButtonSel);  // A través dese id podemos obter unha referencia ao View (o RadioButton)
17             Toast.makeText(getApplicationContext(),"Está seleccionado o RadioButton de baloncesto", Toast.LENGTH_SHORT).show();
18             rbtnBaloncesto.setBackgroundColor(Color.BLUE);                //  Podemos cambiar calquera propiedade dese RadioButton 
19         }
20 
21         ((RadioGroup)findViewById(R.id.rgrpDeporteFav)).check(R.id.rbtnTenis);  // Por programación podemos cambiar o RadioButton seleccionado a través do RadioGroup como fixemos graficamente.
22 
23     }
24 }

Caso práctico 2

• O mesmo obxectivo que no caso práctico 1, pero:

• Non o facemos no layout.
• A xestión de evento o imos asociar ao RadioGroup en vez de facelo sobre cada un dos RadioButton. Esta opción é mellor xa que así nos chega con chamar ao método setOnXXXX do radiogrupo unha única vez. Se o fixéramos por cada radiobutton teríamos que facer a chamada a setOnCheckChangeListener como fixemos cós CheckBox.

• Partimos que xa temos creado o proxecto inicial como xa indicamos anteriormente.

Lembrar que se estades a empregar as bibliotecas de compatibilidade (por defecto), a vosa activity derivará de AppCompactActivity e non de Activity

Neste exemplo se deriva de AppCompactActivity.

Se non o temos creado antes, crea un paquete de nome UI como un subpaquete do teu paquete principal.

Dentro do paquete UI, crearemos un novo paquete de nome: RadioButtons.

• Dentro do paquete RadioButtons crear unha nova 'Empty Activity' de nome: UD02_02_RadioButtons de tipo Launcher e sen compatibilidade.

Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.

• Imos crear unha aplicación na que o usuario indique se é ou non maior de idade e que se amose a opción escollida no EditText.

• RadioButton
• 

  Ao iniciar a aplicación aparece marcada por defecto a primeira opción. Pero aínda non se premeu en ningunha opción.

• 

  Premer na primeira opción.

• 

  Premer na segunda opción.

XML do Layout

• Observar como RadioGroup é un layout máis de tipo Linear.
• Observar como a primeira opción está activada por defecto.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".UD02_02_RadioButtons">

    <RadioGroup
        android:id="@+id/rgrpGrupoBotons"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:checkedButton="@id/rbtnMaior18_UD02_02_Radio"
        android:orientation="horizontal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RadioButton
            android:id="@+id/rbtnMaior18_UD02_02_Radio"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text=">18 anos" />

        <RadioButton
            android:id="@+id/rbtnMenor18_UD02_02_Radio"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="&lt;=18 anos" />
    </RadioGroup>

    <EditText
        android:id="@+id/edtResultado_UD02_02_Radio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/rgrpGrupoBotons" />
</androidx.constraintlayout.widget.ConstraintLayout>

Liña 15: A diferenza do caso práctico 1, para seleccionar o radiobutton seleccionado por defecto empregamos a propiedade checkedButton do RadioGroup.

Código Java

Nota: Este exemplo está feito cunha versión actual de Android Studio onde xa non podemos indicar a opción 'Sen compatibilidade' ao crear a activity, polo que no exemplo deriva de AppCompactActivity.

• Implementamos o método controlarIdade

package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.RadioButtons;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.EditText;
import android.widget.RadioGroup;

public class UD02_02_RadioButtons extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_u_d02_02_b__radio_buttons);

        RadioGroup radioGroup = findViewById(R.id.rgrpGrupoBotons);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                EditText caixa = findViewById(R.id.edtResultado_UD02_02_Radio);
                switch (i){
                    case R.id.rbtnMaior18_UD02_02_Radio:
                        caixa.setText("Tes máis de 18 anos");
                        break;
                    case R.id.rbtnMenor18_UD02_02_Radio:
                        caixa.setText("Tes menos de 18 anos");
                        break;
                }
            }
        });


    }
}

• Liñas 17-30: Implementamos a interface OnCheckedChangeListener sobre o RadioGroup.

Desta forma sabemos sobre que botón se fixo click por medio do segundo parámetro (int i).

• Indicar que por defecto está seleccionado o primeiro radiobutton a nivel gráfico (do layout) e isto non provoca a execución do evento de click.

Se queremos que se provoque dito evento, non debemos de seleccionar ningún radiobutton no deseño e no código facer unha chamada ao método check(int id).

package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.RadioButtons;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.EditText;
import android.widget.RadioGroup;

public class UD02_02_RadioButtons extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_u_d02_02_b__radio_buttons);

        RadioGroup radioGroup = findViewById(R.id.rgrpGrupoBotons);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                EditText caixa = findViewById(R.id.edtResultado_UD02_02_Radio);
                switch (i){
                    case R.id.rbtnMaior18_UD02_02_Radio:
                        caixa.setText("Tes máis de 18 anos");
                        break;
                    case R.id.rbtnMenor18_UD02_02_Radio:
                        caixa.setText("Tes menos de 18 anos");
                        break;
                }
            }
        });
        radioGroup.check(R.id.rbtnMaior18_UD02_02_Radio);

    }
}

Métodos mínimos a coñecer no manexo dos RadioButton

• Referenciar a un RadioButton - RadioGroup có método findViewById.
• Recuperar o contido do texto asociado a un RadioButton.
• Cambiar o contido do texto, podendo empregar recursos gardados en /res/values.
• Engadir novo texto a un existente.
• Modificar propiedades básicas, como cor, tamaño, visibilidade,...
• Obter o radiobutton seleccionado.
• Seleccionar un radiobutton concreto.

        // Exemplo para obter o id do radiobutton seleccionado. Poderíamos ir comprobando o isChecked de cada uno, pero desta forma é máis rápido 
        RadioGroup rg = findViewById(R.id.rgrpGrupoBotons);
        RadioButton rb = findViewById(rg.getCheckedRadioButtonId());  // Referencia ao RadioButton seleccionado

        if (rb.isChecked()) {
              // Código no caso de que o radiobutton esté seleccionado.
        }
        rb.setCheked(true);  // Seleccionamos por código un radiobutton concreto.

-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).