Diseño de Interfaz de Usuario Android: Botones de Radio

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

En este tutorial, aprenderá como crear controles de selección de Android radio usando RadioGroup y RadioButton. Además, aprenderá a cómo reaccionar cuando el usuario seleccione una opción radio específica, así como también a llenar los controles radio de diferentes maneras.

Este consejo rápido muestra los pasos para crear un botón radio sencillo de selección de controles en sus aplicaciones Android. Primero, aprenda cómo configurar los controles RadioGroup y RadioButton en sus archivos layout. Después, aprenda a cómo controlar las selecciones RadioButton de parte de los usuarios. Finalmente, discutiremos cómo realizar la misma tarea por medio de programación en lugar de los archivos layout.

Paso 1: Crear una Aplicación Android

Comience creando un proyecto Android. Implemente su aplicación Android como normal. Una vez que tenga el proyecto configurado y la aplicación lista, decida bajo cual pantalla quiere añadir los controles RadioButton. Quizás sencillamente haya creado un nuevo proyecto Android con su Activity y layout por defecto (main.xml). Esto funcionará para este tutorial. Una vez que haya conseguido su proyecto configurado, entonces está listo para proceder con este consejo rápido.

Puede seguir con nuestro proyecto: SimpleRadioButton, el cual está disponible como un proyecto de recurso abierto.

Paso 2: Trabajando con controles RadioGroup

Android SDK, incluye dos controles radio para usarlos juntos para hacer un grupo de controles de botones radio donde solamente un control puede ser seleccionado en un momento dado. El control RadioGroup (android.widget.RadioGroup) es utilizado para encapsular un conjunto de controles RadioButton para este propósito.

Un control RadioGroup es sencillamente un contenedor para controles RadioButton, pero tiene algunas propiedades útiles. Por ejemplo, puede tener grupos de botones radio alineados horizontal o verticalmente. Este grupo está usando el atributo android:orientation, tal y como lo haría en un LinearLayout.

Aquí está un ejemplo de un control de RadioGroup vertical con tres controles RadioButton.

Otro atributo interesante que podría usar es el atributo androidCheckedButton. Puede usar este atributo para configurar el identificador View del control RadioButton child que usted quiere verificar por defecto usando éste atributo.

Paso 3: Trabajando con controles RadioButton

Una vez que hay configurado su control RadioButton, necesita añadir algunos controles child a él. Específicamente, necesita añadir controles RadioGroup (android.widget.RadioButton). Un control RadioButton tiene muchos atributos que ya conoce como los controles TextView y Button, de los cuales, ya hemos hablado al respecto en tutoriales anteriores.

Un atributo típico de un RadioButton son:

El atributo android:id debería ser utilizado solamente para identificar únicamente el control RadioButton dentro del RadioGroup.
El atributo android:text debería ser utilizado para especificar el texto asociado con esa selección. Los atributos de texto normales como color, tamaño y estilo, también pueden ser configurados.
El atributo android:onClick debería ser utilizado para especificar el controlador clic cuando este RadioButton dentro del RadioGroup es seleccionado.

Aquí está un ejemplo de layout XML de un control RadioGroup vertical con tres controles RadioButton. Cada control RadioButton está usando diferentes medios string, pero comparten el mismo controlador de clic.


    <RadioGroup
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/radio_group1">
        <RadioButton
            android:id="@+id/radio_right1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rad_option1"
            android:checked="true"
            android:textColor="#f00"/>
        <RadioButton
            android:id="@+id/radio_left1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rad_option2"
            android:textColor="#0f0" />
        <RadioButton
            android:id="@+id/radio_ambi1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rad_option3"
            android:textColor="#00f" />
    </RadioGroup>

Paso 4: Controlando los Clics - El método Layout Attribute

Por ahora, si usted ejecuta la aplicación, los controles de botones radio son mostrados, pero no ocurre nada si usted pulsa uno de ellos. Ahora es el momento de manejar los clics en los controles. Hay varias maneras de hacer esto.

Vamos a empezar con la manera fácil. Los controles RadioButton tienen una propiedad llamada onClick (mostrada como "On Click" en el panel propiedades). Usted ajusta el nombre del método que controlará el clic con esta propiedad y luego implemente ese método dentro de su Activity. Por ejemplo, podría ajustar la propiedad de su control RadioButton a onRadioButtonClick. En XML, esta propiedad aparecería como:

1
2	android:onClick="onRadioButtonClick"

Luego, en su clase Activity, usted necesita implementar este método. Que sería un método public void con un solo parámetro; un objeto View. Por ejemplo, el siguiente controlador de clic genera un mensaje Toast en la pantallla cuando el control RadioButton es pulsado:


public void onRadioButtonClick(View v) {
    RadioButton button = (RadioButton) v;
    Toast.makeText(SimpleRadioButtonActivity.this, 
        button.getText() + " was chosen.", 
        Toast.LENGTH_SHORT).show();
}

Cuando usted hace clic sobre el control RadioButton, el método onRadioButtonClick() es llamado, mostrando el mensaje Toast en la pantalla.

Paso 5: Implementando RadioButtons por medio de Programación

Digamos que queremos llenar un RadioGroup con selecciones desde una base de datos, o alguna otra razón que necesita hacerlo por medio de programación en lugar de usar un archivo layout. Le recomendamos, todavía, incluir un control RadioGroup vacío en su archivo layout, para propósitos de diseño. Asegúrese que tiene un identificador único asociado con él para que pueda tener acceso por medio de programación.

Vamos a crear un control radio igual pero que muestra en la Figura 2, solamente que lo vamos hacer por medio de programación y usaremos el RadioGroup por defecto y la orientación horizontal. En su clase Activity (por ejemplo, en su método onCreate()), genere y agregue los controles RadioButton, de esta manera:


RadioGroup rGroup3 = (RadioGroup) findViewById(R.id.radio_group3);

OnClickListener radio_listener = new OnClickListener() {
    public void onClick(View v) {
        onRadioButtonClick(v);
    }
};

RadioButton button1 = new RadioButton(this);
button1.setText(R.string.rad_option1);
button1.setTextColor(Color.RED);
button1.setOnClickListener(radio_listener); 
rGroup3.addView(button1);

RadioButton button2 = new RadioButton(this);
button2.setText(R.string.rad_option2);
button2.setTextColor(Color.GREEN);
button2.setOnClickListener(radio_listener);
rGroup3.addView(button2);

RadioButton button3 = new RadioButton(this);
button3.setText(R.string.rad_option3);
button3.setTextColor(Color.BLUE);
button3.setOnClickListener(radio_listener);  
rGroup3.addView(button3);

rGroup3.check(button1.getId());

Primero, encuentre el RadioGroup vacío, el cual fue definido en nuestro archivo layout (vea el recurso del código para encontrar los detalles, solo si necesita más información). Luego, creamos tres controles RadioButton, ajuste su texto, color de texto y los atributos onClickListener por medio de programación. Finalmente, agregamos cada uno de los controles RadioGroup parent y ajustamos el RadioButton rojo para que sea pulsado por defecto usando el método check() de la clase RadioGroup.

En conclusión

Los controles RadioGroup y RadioButton son usados comúnmente en las aplicaciones de interfaces de usuario de Android para dar al usuario en pequeño conjunto de opciones, solamente una de las cuales puede ser seleccionada en un momento dado. En este consejo rápido usted aprendió cómo crear controles radio en lo archivos layout así como también por medio de programación. También aprendió que los controles radio no necesariamente son aburridos, sino que pueden tener estilo en muchas formas.

Sobre los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas, segunda edición. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.