Buenos días, en esta entrada trataremos de ver como funciona un poco los Widgets llamados RadioButton, que se encuentran dentro de un RadioGroup, y uno de sus eventos mas importantes con los que mas trabajaremos cuando lo usemos.
-
Problema
Queremos ver como funcionan los RadioButton que están dentro de un RadioGroup.
-
Solución
Gracias a un evento del RadioGroup, cuando cambie el RadioButton su estado Checked, un TextView se actualizará actualizando su texto acorde al RadioButton que hemos pulsado.
-
Discusión:
Para esta aplicación tan básica y simple vamos a crear una UI muy básica, constara de un TableLayout, el cual tendrá 3 TableRow, donde iremos colocando cada elemento.
-
Para comenzar, vamos a crear un nuevo proyecto, yo al mío lo he llamado TutorialRadioButton:
(En mi caso hay un error, porque hice la foto cuando ya estaba el proyecto creado, perdonad el fallo)
-
En las siguientes ventanas, podemos dejar todo por defecto.
-
Una vez creado nuestro proyecto, vamos a cambiar el que nos venía por defecto, haciendo un TableLayout:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="1" > </TableLayout>Con esto tendríamos nuestro TableLayout creado, ahora iremos agregando TableRow para ir agregando componentes en ellos.
-
Lo siguiente que haremos es agregar un TableRow para poner un TextView, que será un texto estático que no cambiará:
<TableRow> <TextView android:id="@+id/lblTexto" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_column="0" android:text="@string/lblElige"/> </TableRow>
De momento, con esto, la UI debería ir quedando así:
-
En el siguiente TableRow meteremos el RadioGroup, junto a sus 3 RadioButton en su interior:
<TableRow> <RadioGroup android:id="@+id/rdgGrupo" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkedButton="@+id/rdbOne" android:layout_column="0" android:layout_span="3"> <RadioButton android:id="@+id/rdbOne" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/rdbUno"/> <RadioButton android:id="@+id/rdbTwo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/rdbDos"/> <RadioButton android:id="@+id/rdbThree" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/rdbTres"/> </RadioGroup> </TableRow>
Como vemos, el RadioGroup tiene su propio id, al igual que cada uno de sus RadioButton.
Con esto, la aplicación nos debería ir quedando así:
-
Ahora agregaremos un separador con un View, esto es simple y no nos será muy dificil, lo introducimos en el TableLayout, pero no hace falta que lo metamos en un TableRow, ya que no es necesario, el TableLayout lo permite.
<View android:layout_height="5dp" android:paddingTop="5dp" android:paddingBottom="5dp" android:background="#DDFFDD"/>
Es simplemente como una barra que separará la parte superior de la aplicación, de la parte inferior donde mostraremos el resultado.
-
Por último, agregaremos el último TableRow, que en su interior lleva un TextView, el cual usaremos para mostrar que botón está pulsado.
<TableRow android:paddingTop="5dp" android:paddingBottom="5dp"> <TextView android:id="@+id/lblPulsado" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_column="0"/> </TableRow>
No veremos nada diferente en la UI, pues este TextView no mostrará nada hasta que no pulsemos un RadioButton, y el texto de este TextView se actualiza por el código.
La UI final nos deberá quedar así:
-
Una vez establecida la UI, podemos abrir nuestro MainActivity.java, el cual para empezar estará algo vacío.
public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } -
Ahora introduciremos las variables privadas que usaremos, en este caso lo único que tocamos en la UI es el RadioGroup y el TextView que pusimos en la parte inferior, así que los declaramos como variables private, y luego en el método onCreate las enlazaremos entre el código java y el activity_main.xml.
public class MainActivity extends Activity { private RadioGroup rdgGrupo; private TextView lblChecked; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //TextView que nos mostrará que RadioButton está checked lblChecked = (TextView)findViewById(R.id.lblPulsado); rdgGrupo = (RadioGroup)findViewById(R.id.rdgGrupo); } } -
Ahora viene lo importante, donde se desarrolla todo el funcionamiento para lo que la aplicación ha sido creada, el manejo de los RadioButton y la visualización del TextView.
Para ello asignamos un evento al RadioGroup, mediante el método setOnCheckedChangeListener.
rdgGrupo.setOnCheckedChangeListener(new OnCheckedChangeListener(){ @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO Auto-generated method stub if (checkedId == R.id.rdbOne){ lblChecked.setText("Ha pulsado el botón 1"); }else if (checkedId == R.id.rdbTwo){ lblChecked.setText("Ha pulsado el botón 2"); }else if (checkedId == R.id.rdbThree){ lblChecked.setText("Ha pulsado el botón 3"); } } });Como vemos, al hacer una nueva instancia de OnCheckedChangeListener, podemos implementar el método onCheckedChanged, el cual recibe el RadioGroup y el checkedId, para tratar con ello. Luego solo tenemos que hacer unos bloques condicionales, y asignar el texto al TextView
-
Por último, podemos ejecutar nuestra aplicación en el emulador, y ver los diferentes estados:
-
Hasta aquí este ejemplo, el cual ya nos da una manera funcional de hacer algo básico con RadioGroup y sus elementos RadioButton.
Cualquier aporte o corrección es bienvenida!
Saludos!!!