Controles básicos de Android¶

En el apartado anterior hemos visto algunos de los elementos presentes en las interfaces de usuario, pero es importante detenernos en los controles básicos que ofrece Android. Estos componentes nos permiten diseñar aplicaciones simples de manera rápida y funcional, y constituyen la base de la mayoría de interfaces gráficas.

Dentro de este grupo se encuentran los controles TextView, EditText, CheckBox, RadioButton, Button, ToggleButton, ImageButton e ImageView. A continuación se describen brevemente sus características principales y los parámetros más importantes para cada uno.

TextView¶

El control TextView es uno de los más utilizados y también uno de los más sencillos. Su función principal es mostrar texto en pantalla, sin que el usuario pueda modificarlo.

Algunos de sus atributos más comunes son:

android:text permite establecer el texto que se mostrará.
android:background define el color de fondo del texto.
android:textColor cambia el color del texto (en formato hexadecimal).
android:textSize define el tamaño del texto. Se recomienda usar la unidad sp.
android:textStyle permite establecer el estilo (negrita bold o cursiva italic).

En el código, se puede cambiar el texto mediante el método setText().

EditText¶

El control EditText es una caja de texto editable, utilizada para introducir datos por teclado. Se puede recuperar el texto introducido mediante el método getText() y establecer contenido con setText().

Entre sus atributos más útiles destacan:

android:text permite definir un texto inicial.
android:hint muestra un texto semitransparente (una “pista”) dentro de la caja, el cual desaparece al hacer clic sobre ella.

Este componente resulta esencial para capturar datos del usuario, como nombres, correos o contraseñas.

CheckBox¶

El componente CheckBox representa una casilla de verificación, con dos estados posibles: marcado (true) o desmarcado (false).
Se usa principalmente para indicar la selección o deselección de una opción. En el código, el estado puede comprobarse mediante el método isChecked(), y puede modificarse con setChecked(boolean).

El evento más importante asociado a este control es onCheckedChanged(CompoundButton checkView, boolean isChecked), que permite capturar el momento en que el usuario cambia el estado de la casilla.

El parámetro checkView hace referencia al propio CheckBox que generó el evento.

RadioButton¶

El control RadioButton tiene un comportamiento similar al del CheckBox, pero con una diferencia clave:
los RadioButtons suelen agruparse dentro de un RadioGroup, lo que garantiza que solo uno puede estar seleccionado al mismo tiempo. Cuando el usuario selecciona un RadioButton, el resto del grupo se desmarcan automáticamente.

Su atributo más habitual es android:text, con el que se asigna una etiqueta visible.

El evento principal es onCheckedChanged(RadioGroup group, int checkedId), que se dispara cuando cambia la selección dentro del grupo. En el código también pueden utilizarse métodos como clearCheck(), para dejar el grupo sin ninguna opción seleccionada.

Button¶

El Button es el control más simple y directo: un botón estándar que el usuario puede pulsar para ejecutar una acción. El evento más importante asociado es onClick(View v), que se ejecuta cuando se hace clic sobre él.

Este control es la base para la interacción del usuario con la aplicación.

ToggleButton¶

El ToggleButton es una variante del botón clásico que mantiene dos estados persistentes: encendido y apagado. Funciona como un interruptor, y también utiliza el evento onClick(View v) para capturar la acción del usuario.

Para conocer el estado actual, puede usarse el método isChecked(), de forma similar a los CheckBox. Este tipo de control resulta útil para activar o desactivar funciones dentro de una app.

ImageButton¶

El ImageButton combina la funcionalidad del botón con una representación visual más atractiva.
En lugar de texto, muestra una imagen que el usuario puede pulsar. El atributo android:src permite definir la imagen que se mostrará, generalmente almacenada dentro de la carpeta /res/drawable/.

En esencia, un ImageButton actúa como un botón convencional, pero ofrece una presentación más visual, ideal para iconos o acciones rápidas.

ImageView¶

Por último, el control ImageView permite mostrar imágenes en la interfaz sin que el usuario pueda interactuar directamente con ellas. No tiene funcionalidad propia, aunque puede combinarse con eventos de otros controles o utilizarse como elemento decorativo o informativo.

El atributo principal es android:src, que define la imagen a mostrar. Si se desea cambiar la imagen de forma dinámica desde el código, se puede usar el método setImageResource() o setImageBitmap().

Actividades¶

PR 208 (RA2 / CE2a CE2b / IC1 / 5p) Crea y prueba tu primera función @Composable que muestre un mensaje en pantalla utilizando el componente Text. Experimenta con diferentes tamaños, colores y estilos de texto para observar cómo Compose renderiza la interfaz en tiempo real.
PR 209 (RA2 / CE2b / IC2 / 5p) Diseña una pequeña interfaz con dos textos jerarquizados utilizando un Column. Aplica márgenes, colores y tamaños diferentes para comprender cómo Compose organiza y alinea los elementos en la pantalla.
PR 210 (RA2 / CE2b / IC2 / 5p) Crea una función @Composable con un botón que, al pulsarse, muestre un mensaje en consola. Este ejercicio busca reforzar la relación entre la interfaz declarativa y la lógica de interacción del usuario a través del evento onClick.
PR 211 (RA2 / CE2c / IC3 / 5p) Implementa un contador de pulsaciones utilizando un estado mutable con remember. Cada vez que el usuario presione el botón, el valor deberá incrementarse y mostrarse en pantalla, evidenciando la recomposición automática de Compose.
PR 212 (RA2 / CE2c CE2d / IC3 / 5p) Diseña una interfaz que permita al usuario escribir su nombre en un TextField y muestre en tiempo real un saludo personalizado. Observa cómo el estado del texto se actualiza dinámicamente conforme cambia la entrada del usuario.
AR 213 (RA2 / CE2a CE2b / IC2 / 3p) Crea una interfaz sencilla que combine varios textos (Text) y un botón (Button) en una misma columna. El objetivo es reforzar la comprensión del modelo declarativo de Compose y afianzar el uso de modificadores básicos como padding, color y fontSize.
AP 214 (RA2 / CE2c CE2d / IC3 / 3p) Diseña una miniapp con un campo de texto (TextField) y dos botones que permitan al usuario escribir un mensaje y, opcionalmente, borrarlo o reiniciar el contenido. Implementa el manejo de estado con remember y mutableStateOf para comprender cómo se actualiza la interfaz al modificar el estado interno.