App completa de ejemplo de uso de estados en Jetpack Compose con Kotlin en el IDE Android Studio. Aplicación Android con varios TextField (cuadros de texto), con reutilización de componentes, Text (etiquetas de texto), Switch (interruptores) y Button (botones). Trabajamos con el teclado numérico y algunos de sus eventos y modificadores. Calcula el importe de beneficio a partir de un importe base y un porcentaje de beneficio. Aplica redondeo a petición.

Estados en Compose, la app de ejemplo

El estado de una app es cualquier valor que puede cambiar con el tiempo. Un estado puede ser desde una base de datos hasta una variable en nuestra app. Todas las apps para Android muestran un estado al usuario. Estos son algunos ejemplos de estado de las apps para Android:

  • Cualquier mensaje que mostramos al usuario cuando se produce un determinado evento (un error, una finalización de una tarea, etc.).
  • Formularios de login (inicio de sesión), que se completan y envían.
  • Controles que se pulsan, como botones. El estado puede ser no presionado, se está presionando (animación de la pantalla) o presionado (una acción onClick).
  • Un cuadro de texto que al escribir use el evento onValueChanged (cuando se escribe texto) para ejecutar una función. Este es el caso de uso de este tutorial.
  • Teclado numérico al que le programa el estado de keyboardActions para enfocar el siguiente componente o bien cerrar el teclado numérico.

Para comprobar el funcionamiento de los estados en Jetpack Compose, crearemos una app de ejemplo con dos TextField, al introducir valores en los dos TextField (importe base y porcentaje de beneficio), se calculará el importe de beneficio según el porcentaje indicado. Al pulsar en el TextField de importe base, aparecerá un teclado numérico con la tecla de «Siguiente», que si se pulsa pasará el foco al siguiente TextField de porcentaje de beneficio. En el porcentaje de beneficio, la tecla del teclado numérico de acción cambiará a «Hecho», al pulsarla se cerrará el teclado numérico. También se añaden varios interruptores (Switch) para mostrar el importe de beneficio con redondeo al alza, redondeo normal o bien sin redondeo. Se aprovechan los estados para activar o desactivar los interruptores en función del que se haya activado. La app también incluye un Button (botón) para copiar el beneficio calculado al portapapeles del móvil.

La app se ha desarrollado en Android Studio Ladybug 2024.2.2 con API 24, por lo que necesitaremos disponer de este IDE instalado en el equipo. En el siguiente enlace explicamos cómo instalar Android Studio y crear un primer proyecto:

Desarrollar App Android con ejemplo de estados Jetpack Compose en Kotlin

En primer lugar crearemos el fichero de strings.xml en la ruta res\values, para definir los textos que aparecerán en la App:

Con el siguiente contenido:

Crearemos un par de ficheros xml con los símbolos para moneda y porcentaje de beneficio. Para ello, en res/drawable, añadiremos el fichero moneda.xml:

Con el siguiente contenido:

Añadiremos también el fichero porcentaje.xml, con el contenido:

Y el código Kotlin de la aplicación estará ubicado en el fichero MainActivity.kt:

Que tendrá el siguiente contenido (las acciones más importantes están comentadas y explicadas en el propio código):

La app de estados en Compose en funcionamiento en dispositivo Android

Si compilamos la app, tendrá este aspecto:

Al introducir un importe base y un porcentaje de beneficio, la app mostrará automáticamente el importe de beneficio. Al iniciar calculará el importe de beneficio sin redondear (con el interruptor «Sin redondeo activado». En el campo de importe base mostrará el teclado numérico con la tecla «Siguiente» (si se pulsa pasará al campo de porcentaje de beneficio). En el campo de porcentaje de beneficio la tecla de acción pasará a ser «Hecho». Si se pulsa se cerrará el teclado numérico:

Si pulsamos en el interruptor de «Redondear beneficio al alza», se desmarcará el interruptor de «Sin redondeo» y se recalculará el importe de beneficio redondeando el resultado al alza:

Lo mismo ocurrirá si se activa el interruptor «Redondear beneficio normal». Si se pulsa el botón «Copiar», se copiará el beneficio calculado al portapapeles del móvil.

Descarga del código completo en Kotlin y Android Studio de la app de estados en Compose

En el siguiente enlace tenéis disponible la descarga del proyecto completo y todo su código fuente en Kotlin y Android Studio: