Ejemplo RadioGroup Android

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