Curso de Desarrollo Android. Tema 10: Mejorando la aplicación «Hola personalizado» en Android Studio
En artículos anteriores de este curso de desarrollo Android ya hemos explicado el proceso, paso a paso, para crear una aplicación Hola Mundo! y cómo modificar esta aplicación para que sea capaz de permitir una entrada de texto, nuestro nombre, y una salida personalizada, un «Hola» seguido del nombre que hemos introducido.
En este nuevo capítulo para seguir aprendiendo sobre desarrollo Android vamos a ver cómo hacer una serie de modificaciones a nuestra aplicación para que nos permita añadir, en primer lugar, las palabras «Señor» o «Señora» según seamos hombres o mujeres.
Lo primero que vamos a hacer es abrir nuestro proyecto «Hola Personalizado» y crear una copia de seguridad del mismo. Como aún no hemos configurado Git, para evitar que por un fallo se estropee la aplicación vamos a crear esta copia de seguridad. Para ello simplemente creamos una copia de la carpeta de nuestro proyecto y la pegamos con otro nombre, por ejemplo, «Hola Personalizado 2.0«.
Ya podemos empezar a trabajar con este nuevo proyecto. Lo que vamos a hacer, en resumidas cuentas, es añadir dos RadioButton dentro de un RadioGroup que nos permita elegir el tratamiento, si somos «Señor» o «Señora». De esta forma, cuando pulsemos sobre el botón Hola nos generará un saludo más formal.
RadioGroup
Al iniciar este aspecto del desarrollo Android, lo primero que debemos crear es un elemento del tipo RadioGroup. Los botones Radio nos permiten elegir una opción de entre varias disponibles. Para que Android sepa que varios botones Radio pertenecen a un mismo grupo de opciones debemos crear un grupo llamado «RadioGroup» y meter dentro de él las diferentes opciones disponibles.
Para crear este grupo simplemente debemos buscar el elemento «RadioButton» en el apartado «Containers» de la lista de Views y arrastrarlo a la pantalla principal. Por defecto se asociará al mayor espacio libre contiguo, aunque esto podemos modificarlo manualmente desde las propiedades, a la derecha del editor, como ya hemos visto en artículos anteriores y como vamos a ver a continuación.
Añadir los RadioButtons al RadioGroup
Dentro del espacio que nos ha generado el RadioGroup arrastramos desde la lista de Views > Widgets dos elementos RadioButton. Debemos asegurarnos de que quedan dentro del grupo. Una forma sencilla de verificar esto es desde la ventana de elementos de la derecha.
Configurar dimensiones y parámetros del RadioGroup y de los RadioButton
Lo primero que vamos a configurar van a ser los RadioButton. Para ello vamos a utilizar la forma sencilla, es decir, hacemos doble clic sobre ellos y configuramos los siguientes parámetros:
- Text: El texto que nos mostrará.
- Checked: Si está marcada por defecto (o no).
- ID: El identificador.
A continuación, vamos a configurar el RadioGroup. Para ello hacemos doble clic en él y rellenaremos los siguientes elementos:
- Orientation: Orientación de los elementos. Podemos orientarlos en horizontal o en vertical.
- ID: El identificador del grupo.
Una vez configurado, la apariencia del proyecto debería ser similar a la siguiente.
Con esto listo, lo único que nos queda es ir al código a programar el saludo de salida.
Cómo añadir «Señor» o «Señora» al saludo de nuestro programa
Lo primero que debemos hacer en el código es indicarle al programa que compruebe ambos RadioButton y, en función de que esté seleccionado uno u otro, añadir su saludo formal correspondiente.
Una vez hecho esto, modificaremos el View de salida de texto para que se actualice con el saludo formal correspondiente.
También vamos a hacer uso de la función toLowerCase(), tal como vamos a ver en el código que pegamos a continuación, para que el «señor» o «señora» nos aparezca en minúsculas, solo por estética.
Para ello, el código resultante en el fichero de Java MainActivity será:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//añadimos el botón
Button button = (Button)findViewById(R.id.BotonSaludo);
button.setOnClickListener (new View.OnClickListener() {
@Override
public void onClick(View v) {
//Qué hará el programa cuando pulsemos el botón
EditText text = (EditText) findViewById(R.id.CuadroNombre);
String saludoFormal = null;
String nombreIntroducido = text.getText().toString();
//Llamamos al RadioButton
RadioGroup radio = (RadioGroup) findViewById(R.id.saludo_group);
if (R.id.sr_button == radio.getCheckedRadioButtonId()){
//Saludo en caso de Señor
saludoFormal = getResources().getString(R.string.sr_button).toLowerCase();
} else {
//Saludo en caso de señora
saludoFormal = getResources().getString(R.string.sra_button).toLowerCase();
}
//Seguimos con el saludo
saludoFormal = getResources().getString(R.string.TextoSaludo) + » » + saludoFormal + » » + nombreIntroducido;
TextView out = (TextView)findViewById(R.id.SaludoPersonalizado);
out.setText(saludoFormal);
}
} );
}
}
A continuación, os dejamos la captura del código:
Es posible que necesitemos tener configurado el fichero «strings» para que el código cargue correctamente el «Señor» o «Señora» ya que no siempre carga bien el texto de las propiedades de los Views.
Una vez lista la aplicación la ejecutamos.
Para practicar con Android Studio
Si queréis practicar con esta aplicación, un ejercicio interesante a la vez que sencillo es añadir más opciones al RadioGroup (por ejemplo «Señorita» o «Don/Doña») y reordenar los elementos de la aplicación para que sea más estética.
Si tienes alguna duda sobre desarrollo Android, pásate por el Foro de MovilZona donde hemos creado un post para las consultas al respecto de este tema así como uno que recoge todos los temas y post de dudas.