Componentes Básicos: TextView, EditText, RadioGroup, CheckBox, uso de botones (Button) y evento OnClick

En este artículo, explicaré los distintos componentes básicos que puedes utilizar para que un usuario tenga una mejor experiencia de usuario con tu aplicación.

Vamos a iniciar creando un nuevo proyecto en nuestro Android Studio. Empezamos abriendo nuestro IDE.

Vamos a hacer clic en Start a new Android Studio project, nos mostrará una nueva ventana para seleccionar Plantilla de proyecto.

Para este post utilizaremos el Basic Activity (Actividad Básica). Ahora configuraremos nuestro proyecto indicando el nombre o título, debemos nombrar o tener un paquete que sea único para nuestro proyecto, la ubicación donde se encontrará por defecto nos mostrará en la carpeta de instalación en los proyectos mismos de Android Studio, el lenguaje de programación, podría usarse Java. Sin embargo, Kotlin ahora es el lenguaje oficial para el desarrollo de aplicaciones móviles por lo tanto lo dejaremos por defecto en eso. Y seleccionaremos el SDK mínimo, para la actualidad el API 21: Android 5.0 (Lollipop) una vez hayamos terminado presionamos el botón Finish (Finalizar). 

Antes de mostrar el área de trabajo de Android Studio, se ira cargando los componentes necesarios para aperturar la interfaz, recordemos que para programar en este programa se debe tener conocimientos básicos de XML, o HTML, para comprender mejor el lenguaje etiquetado, el cual nos permitirá crear las pantallas que luego los archivos con extensión .kt (kotlin) importarán para poder utilizarlos.

A primera vista nos muestra el código autogenerado de nuestra actividad la cual se ha nombrado MainActivity.kt por defecto, esta será la primera actividad en ejecutarse, además al lado izquierdo están los archivos ordenadas como un explorador de archivos. Dentro de ellos está un archivo de configuración el cual se llama AndroidManifest.xml, este archivo lo utilizaremos para la configuración general de nuestra actividad además dentro de ella podemos indicar cual de todas nuestras actividades creadas en nuestra aplicación será la primera en ejecutarse. 

El código siguiente: 

El fragmento de código anterior, debe ir dentro de la etiqueta activity según pertenezca a la actividad que deseas que se lance primero. Debe manejarse con cuidado este archivo AndroidManifest para evitar luego problemas en la depuración.

Se puede observar que esta actividad tiene dos fragmentos uno que inicia como principal y luego de hacer clic en el botón next nos permite cambiarlo por el segundo fragmento. Además el botón cambia a Previous.

Sin embargo vamos a retirar esos dos fragmentos borrando tanto los .kt como los .xml que le pertenecen a cada uno de los fragmentos. Luego de hacerlo debemos ingresar al content_main.xml y borramos el siguiente fragmento para evitar el error al momento de ejecutarlo.

Podemos apreciar que ahora solo tenemos el floatingButton que es el botón flotante al lado derecho con el ícono de una carta o correo electrónico. Para eliminar ese botón debemos irnos al archivo activity_main.xml y eliminar el siguiente código.

Si ejecutamos tal cual, nos emergerá un error debido a que en el MainActivity.kt no encontrará el componente FloatingActionButton, por eso también borraremos el código que muestra el Snackbar.

Faltaría un último cambio para poder tener mi actividad limpia para mi proyecto, es el menú del lado derecho que muestra los tres puntos, al hacer clic aparecerá una opción que dice Settings. Sin embargo, no nos afecta si está o no y lo dejaremos en ese lugar.

Con todos estos cambios realizados ahora podemos continuar con los componentes básicos, empezaremos con el TextView.

TextView

Es otro de los clásicos en la programación de GUI. Las etiquetas de texto se utilizan para mostrar un determinado texto al usuario. Al igual que en el caso de los botones, el texto del control se establece mediante la propiedad android:text. Aparte de esta propiedad, la naturaleza del control hace que las más interesantes sean las que establecen el formato del texto mostrado. Igual que en el caso de los botones presenta las siguientes propiedades:

android:background > Color de fondo

android:textColor > Color de texto

android:textSize > Tamaño de la fuente

android:typeface > Estilo del texto (negrita, cursiva, etc).

EditText

Es el componente de edición de texto que proporciona la plataforma Android, permite la introducción y edición de texto por parte del usuario.

RadioGroup

Es un elemento que puede contener varios RadioButtons. Una de las propiedades de este componente es que tiene la orientation para mostrarlos de forma vertical u horizontal.

RadioButton

Es un Botón tipo ChecbBox, con la diferencia en que se relaciona directamente con otros Radio Buttons que se encuentran en el mismo Radio Group. Al seleccionar un Radio Button los demás RadioButtons se des-seleccionarán. 

Es decir, dentro del Radio Group vamos a tener varios RadioButtons. Y al presionar un Radio Button, este se marcará como seleccionado dejando al resto sin marcar. Solamente se puede tener una opción señalada dentro del Radio Group.

CheckBox

Es un botón de dos estados (marcado, no marcado) que actúa como control de selección (los radio buttons y switches también pertenecen a esta categoría) ante los usuarios. Lo que permite elegir una o varias opciones de un conjunto.

Por defecto su color será el mismo de la propiedad android:colorAccent en el tema de la aplicación. Las especificaciones del Material Design sobres controles de selección nos muestra que este view puede pasar por 5 estados, tanto si está marcado como si no:

hover: Estado cuando el Checkbox se encuentra inmóvil.

focused: Cuando la navegación en la UI apunta al checkbox como control de entrada.

pressed: El checkbox se encuentra bajo selección prolongada.

disable: El checkbox pierde su capacidad de cambio entre estados.

disable-focused: El checkbox está deshabilitado pero el sistema de navegación lo enfoca.

Button

Es el botón más básico que se puede utiliza.

Evento OnClick

Se llama a este método cuando el usuario toca el elemento (en el modo táctil) o se centra en el elemento con las teclas de navegación o la bola de seguimiento y presiona la tecla "Intro" adecuada o la bola de seguimiento.

Se puede implementar creando una función dentro del archivo .kt que corresponda o llamamos al componente utilizando el "id" y luego le asignamos la función setOnClick.

Espero que haya sido de ayuda este post, no te olvides compartir en tus redes sociales, y dejame un comentario o duda que tengas estaré disponible para responderte.