Cómo mostrar un botón con una acción al hacer clic (al tocar el botón), que ejecute una función previamente definida en nuestra app, con Jetpack Compose UI y Kotlin, usando el IDE Android Studio. Indicamos cómo generar el fichero APK para instalar en un dispositivo Android real.
- Requisitos para crear aplicación Android con Android Studio, Kotlin y Jetpack Compose UI.
- Código fuente Kotlin completo con los compose de Jetpack para dibujar un texto y un botón.
- Previsualización de nuestra app con un texto y un botón funcional.
- Compilar y probar App en un dispositivo virtual Android.
- Generar el apk y probar en un dispositivo smartphone o tablet Android real.
Requisitos para crear aplicación Android con Android Studio, Kotlin y Jetpack Compose UI
El único requisito es disponer de una versión de Android Studio reciente, que incorpore Kotlin y Jetpack Compose. Para este tutorial hemos usado Android Studio 2023.2.1 (Iguana), que incorpora (sin instalar plugin) tanto el lenguaje Kotlin como el entorno de diseño Jetpack Compose UI. Es más, en esta versión de Android Studio el lenguaje principal (por defecto) es Kotlin en lugar de Java.
Código fuente Kotlin completo con los compose de Jetpack para dibujar un texto y un botón
A continuación, mostramos el código fuente en Kotlin completo, comentado explicando las partes importantes, con los imports necesarios incluidos, del fichero principal de nuestra App MainActivity.kt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
package proyectoa.com.botonfuncionjetpackcompose import android.os.Bundle import android.util.Log import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import proyectoa.com.botonfuncionjetpackcompose.MainActivity.Companion.TEXTO_TITULO import proyectoa.com.botonfuncionjetpackcompose.ui.theme.TemaProyectoA class MainActivity : ComponentActivity() { companion object { // Constante para el texto que se muestra arriba const val TEXTO_TITULO = "Mostrar botón - ProyectoA" } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { // Usamos el tema visual definido en el fichero ui.theme\Theme.kt TemaProyectoA { // Contenedor que usa el color de fondo del tema Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { // Mostramos los elementos gráficos // Pasamos como parámetro el texto, el color, el estilo y la // función que se asignará al onClick del botón DibujarEntorno( texto = TEXTO_TITULO, color = MaterialTheme.colorScheme.primary, estilo = MaterialTheme.typography.titleLarge ) { funcinoBotonEjemplo() } } } } } // Definimos la función que se asignará al evento onClick del botón private fun funcinoBotonEjemplo() { // Mostramos un mensaje Toast para indicar que se ha ejecutado la función Toast.makeText(this, "Has pulsado el botón Prueba", Toast.LENGTH_SHORT).show() // Mostramos un texto en Logcat de Android Studio para depurar y comprobar que se ha ejecutado Log.d("ProyectoA", "Función ejecutada") } } // Dibujamos todo el entorno visual (texto y botón) @Composable fun DibujarEntorno(texto: String, color: Color = MaterialTheme.colorScheme.primary, estilo: androidx.compose.ui.text.TextStyle = MaterialTheme.typography.titleMedium, onClickBoton: () -> Unit) { // Usamos Column para distrubir el texto encima del botón Column(modifier = Modifier.padding(8.dp), verticalArrangement = Arrangement.Top, horizontalAlignment = Alignment.CenterHorizontally ) { Texto(texto, color, estilo) BtPrueba(onClickBoton) } } // Dibujamos un texto @Composable fun Texto(texto: String, color: Color, estilo: androidx.compose.ui.text.TextStyle) { Text( text = texto, color = color, style = estilo ) } // Dibujamos un botón @Composable fun BtPrueba(onClickBoton: () -> Unit) { Button(onClick = onClickBoton) { Text("Prueba") } } // Para previsualizar la vista @Preview(showBackground = true) @Composable fun DibujarEntornoPreview() { TemaProyectoA { DibujarEntorno( texto = TEXTO_TITULO, color = MaterialTheme.colorScheme.primary, estilo = MaterialTheme.typography.titleMedium ) { } } } |
Previsualización de nuestra app con un texto y un botón funcional
Para mostrar la previsualización en tiempo real (conforme vamos escribiendo código Kotlin en el editor) pulsaremos en «Layout Inspector»:
Para que se muestre la aplicación tendremos que compilarla con el botón «Run»:
Nos mostrará una ventana de un dispositivo (no es el dispositivo virtual Android, es una vista previa), quedando nuestra App con este aspecto:
Compilar y probar App en un dispositivo virtual Android
Si compilamos la aplicación en un dispositivo virtual Android, obtendremos este aspecto para nuestra App:
Desde el dispositivo Android virtual podremos interactuar como si se tratara de uno real. Pulsaremos el botón «Prueba» para comprobar que, efectivamente, funciona correctamente, mostrando el mensaje en la parte inferior «Has pulsado el botón Prueba»:
Puesto que estamos compilando desde Android Studio y puesto que hemos indicado en el código de la función que ejecuta el botón que muestre un texto en el Logcat de Android Studio, si mostramos la ventana «Logcat»:
Podremos comprobar que, efectivamente, cada vez que pulsemos el botón mostrará el texto «Función ejecutada»:
Generar el apk y probar en un dispositivo smartphone o tablet Android real
Para genera el fichero apk de nuestra aplicación, el empaquetado con el instalador para desplegar nuestra App en un dispositivo Android real, pulsaremos en el menú «Build» – «Build Bundle(s) / APK(s)» – «Build APK(s)»:
Generará el fichero .apk de nuestra aplicación empaquetada, que enviaremos a nuestro móvil (por mail, Telegram u otro medio), en la carpeta …app\build\outputs\apk\debug:
Desde el móvil, antes de instalar el APK, deberemos habilitar la opción «Orígenes desconocidos», que suele estar (según la versión de Android) en «Ajustes» – «Seguridad». Una vez instalada la aplicación, por seguridad, deshabilitaremos esta opción.
Abriremos el fichero app-debug.apk y nos preguntará si queremos instalarla, pulsaremos en «Instalar»:
Una vez instalada, pulsaremos en «Abrir»:
Se abrirá la aplicación:
Para probar tocaremos en el botón «Prueba» y nos mostrará el mensaje «Has pulsado el botón Prueba» en la parte inferior:
