29/05/2017
El desarrollo de aplicaciones móviles es un campo fascinante y, con las herramientas adecuadas, dar tus primeros pasos es más accesible que nunca. Si siempre has querido crear una app para Android, este artículo te guiará a través del proceso básico utilizando Android Studio, el entorno de desarrollo integrado oficial de Google, y Jetpack Compose, el moderno kit de herramientas declarativo para construir interfaces de usuario (IU) en Android. Prepárate para sumergirte en el mundo de Kotlin y ver tu primera creación cobrar vida.
Antes de escribir la primera línea de código, necesitas preparar tu entorno. El requisito fundamental es tener Android Studio instalado en tu computadora. Asegúrate de que tu máquina cumple con los requisitos del sistema para garantizar un rendimiento óptimo. Si necesitas ayuda con la instalación, puedes consultar la documentación oficial de Android Studio. Una vez instalado, verifica que tienes conocimientos básicos del lenguaje de programación Kotlin, ya que es el lenguaje preferido para el desarrollo moderno de Android, especialmente con Jetpack Compose.
Configurando Tu Entorno de Desarrollo
Lo primero es lo primero: tener Android Studio listo. Este software es el corazón del desarrollo de Android. Te proporciona todas las herramientas necesarias: un editor de código inteligente, herramientas de depuración, un diseñador visual de IU y mucho más. Cumplir con los requisitos del sistema de tu computadora es crucial para que Android Studio funcione fluidamente. Una vez instalado, estarás listo para el siguiente paso: crear un nuevo proyecto.
Creando Tu Primer Proyecto Android
Con Android Studio abierto, el proceso para iniciar tu app es sencillo. Desde el diálogo de bienvenida, selecciona la opción 'New Project'. Se abrirá una ventana donde podrás elegir entre diversas plantillas de proyecto. Estas plantillas son planos que ya vienen con una estructura básica y archivos necesarios, lo que te ahorra tiempo al inicio. Para nuestra primera app, seleccionaremos la plantilla 'Empty Activity'.
La plantilla 'Empty Activity' es ideal para empezar, ya que proporciona una base mínima para una app con una sola pantalla que utiliza Jetpack Compose. Asegúrate de que la pestaña 'Phone and Tablet' está seleccionada y haz clic en 'Empty Activity'. Luego, presiona 'Next'.
En el siguiente diálogo, configurarás los detalles de tu proyecto:
- Name: Aquí introduces el nombre de tu aplicación. Para este ejercicio, usaremos "Greeting Card".
- Package name: Este es un identificador único para tu app. Generalmente, se genera automáticamente basándose en el nombre de tu proyecto y un dominio. Por ejemplo, `com.example.greetingcard`.
- Save location: La carpeta donde se guardarán todos los archivos de tu proyecto. Anota esta ubicación.
- Minimum SDK: Selecciona la versión mínima de Android en la que quieres que tu app pueda ejecutarse. Elegir un SDK más bajo permite que tu app funcione en más dispositivos antiguos, pero limita las funciones modernas que puedes usar. Para este ejemplo, API 24: Android 7.0 (Nougat) es una buena opción.
Haz clic en 'Finish'. Android Studio tardará un momento en configurar el proyecto. Verás barras de progreso y mensajes indicando que se están descargando y configurando los componentes necesarios. Ten paciencia, este es un buen momento para tomar un descanso.
Explorando la Estructura del Proyecto
Una vez que el proyecto se ha cargado por completo, es hora de familiarizarse con la interfaz de Android Studio y la estructura de archivos. En la pestaña 'Project' (generalmente en el lado izquierdo), verás la organización de carpetas y archivos. Es importante entender que la vista 'Android' es la forma estándar en que Android Studio organiza los archivos para facilitar el desarrollo. Puedes cambiar a la vista 'Project Source Files' para ver la estructura de directorios real en tu sistema de archivos, pero la vista 'Android' es la más útil para trabajar.
Dentro de la vista 'Android', encontrarás carpetas importantes como `app`, que contiene el código fuente de tu aplicación, recursos y archivos de manifiesto. Dentro de `app`, la estructura sigue el nombre del paquete que definiste (por ejemplo, `com.example.greetingcard`). Aquí es donde residen tus archivos Kotlin.
Entendiendo el Código Inicial (MainActivity.kt)
Navega hasta el archivo `MainActivity.kt`. Este es el punto de entrada principal de tu aplicación. Observarás que contiene una clase `MainActivity` que hereda de `ComponentActivity`. Dentro de esta clase, hay una función clave: `onCreate()`. Esta función es el primer método llamado cuando la actividad se crea y es donde se inicializa la mayoría de los componentes de la app.
Dentro de `onCreate()`, encontrarás la función `setContent`. Esta función es proporcionada por Jetpack Compose y es donde defines la interfaz de usuario de tu actividad utilizando funciones Composable. Una función Composable es un bloque de construcción de la IU. A diferencia de los métodos tradicionales, las funciones Composable describen cómo debe ser la IU en un momento dado, y Jetpack Compose se encarga de actualizarla cuando los datos cambian. Reconocerás una función Composable por la anotación `@Composable` antes de su declaración.
Observa la función `Greeting()`. Esta es una función Composable de ejemplo que toma un nombre como entrada y muestra un saludo. Inicialmente, muestra "Hello Android!". También notarás la función `GreetingPreview()`, que, gracias a la anotación `@Preview`, te permite ver cómo se verá tu función Composable en la ventana de vista previa de Android Studio sin necesidad de ejecutar la app en un emulador o dispositivo.
Personalizando el Texto de Saludo
Ahora, hagamos que la app sea tuya. Queremos cambiar el texto "Hello Android!" por un saludo personalizado. Localiza la función `Greeting()` en `MainActivity.kt`. Dentro de ella, verás un elemento `Text`. Cambia la cadena de texto dentro del `Text` para que diga algo como "Hi, my name is [Tu Nombre]!".
Text(text = "Hi, my name is $name!", modifier = modifier)
Luego, ve a la función `GreetingPreview()` y cambia el nombre que se pasa a la función `Greeting()` para que sea tu nombre.
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
GreetingCardTheme {
Greeting("Tu Nombre")
}
}
Una vez que realices estos cambios, Android Studio debería actualizar automáticamente la vista previa en el panel de diseño, mostrándote tu saludo personalizado. ¡Acabas de modificar tu primera función Composable!
Cambiando el Color de Fondo
El saludo está bien, pero el fondo blanco puede ser un poco aburrido. Jetpack Compose facilita cambiar el color de fondo utilizando contenedores como `Surface`. Un `Surface` es un contenedor Composable que representa una sección de la IU y te permite modificar su apariencia, incluyendo el color de fondo.
Para añadir un color de fondo a tu texto, envuelve el elemento `Text` dentro de la función `Greeting()` con un `Surface`. Puedes hacerlo manualmente o, de forma más sencilla, seleccionar la línea del `Text`, presionar `Alt+Enter` (o `Option+Enter` en Mac) y seleccionar 'Surround with widget' -> 'Surround with Container'. Cambia el `Box` predeterminado que aparece por `Surface()`.
Ahora, dentro de los paréntesis de `Surface()`, añade un parámetro `color`. Escribe `color = Color`. Verás que `Color` aparece en rojo indicando un error de compilación; esto es porque necesitas importar la clase `Color` de Jetpack Compose. Android Studio generalmente te sugerirá la importación correcta (`androidx.compose.ui.graphics.Color`). Acepta la sugerencia o añádela manualmente al principio del archivo.
Una vez importado `Color`, añade un punto después de `Color` (`Color.`) y Android Studio te mostrará una lista de colores predefinidos (como `Color.Cyan`, `Color.Red`, etc.). Elige el que más te guste. Por ejemplo:
Surface(color = Color.Cyan) {
Text(text = "Hi, my name is $name!", modifier = modifier)
}
La vista previa se actualizará mostrando tu texto con el nuevo color de fondo. Acabas de usar un Composable contenedor para modificar la apariencia de otro Composable.
Añadiendo Espacio (Padding)
El texto ahora tiene un color de fondo, pero está pegado a los bordes del contenedor `Surface`. Para añadir espacio alrededor del texto, utilizamos un Modifier. Los Modifiers son elementos poderosos en Jetpack Compose que te permiten decorar o aumentar un Composable. Puedes cambiar su tamaño, añadir relleno (padding), bordes, manejar eventos de clic, etc.
Cada función Composable que representa un elemento visual generalmente acepta un parámetro `modifier` opcional. Localiza el parámetro `modifier` dentro de la función `Greeting()` y úsalo para añadir padding al elemento `Text`. Los Modifiers se encadenan usando un punto. Utilizaremos el modificador `padding()`.
Text(text = "Hi, my name is $name!", modifier = modifier.padding(24.dp))
Al igual que con `Color`, `dp` (densidad de píxeles independientes) necesitará una importación (`androidx.compose.ui.unit.dp`). Añade esta importación y usa 'Optimize Imports' (Code > Optimize Imports) para organizar todas tus importaciones correctamente.
El valor `24.dp` especifica que quieres un relleno de 24 unidades de densidad de píxeles independientes alrededor del texto. El uso de `dp` es importante en el desarrollo de Android para asegurar que tu interfaz de usuario se vea consistente en pantallas con diferentes densidades de píxeles.
Observa la vista previa una vez más. Verás que ahora hay un espacio alrededor del texto, separándolo del borde del fondo de color.
Preguntas Frecuentes
¿Qué es Android Studio?
Android Studio es el Entorno de Desarrollo Integrado (IDE) oficial para el desarrollo de aplicaciones Android. Proporciona herramientas para codificar, depurar, probar y diseñar interfaces de usuario.
¿Qué es Jetpack Compose?
Jetpack Compose es el moderno kit de herramientas de IU de Android para crear interfaces de usuario nativas. Utiliza un enfoque declarativo, lo que significa que describes cómo debería verse tu IU y Compose se encarga de actualizarla de manera eficiente.
¿Qué es Kotlin?
Kotlin es un lenguaje de programación moderno, conciso y seguro que se ha convertido en el lenguaje preferido para el desarrollo de Android. Es interoperable con Java.
¿Qué es una función Composable?
Una función Composable es un bloque de construcción fundamental en Jetpack Compose. Son funciones marcadas con la anotación `@Composable` que describen una parte de la interfaz de usuario de tu aplicación. Pueden contener otros Composables.
¿Qué es un Modifier?
Un Modifier es un objeto que se utiliza para decorar o aumentar un Composable. Los Modifiers te permiten cambiar el tamaño, añadir padding, bordes, manejar eventos de entrada y aplicar otros comportamientos y apariencias a los elementos de la IU.
¿Por qué usar dp en lugar de píxeles?
Los dp (píxeles independientes de la densidad) son unidades que escalan según la densidad de la pantalla. Usar dp asegura que los elementos de tu IU tengan un tamaño físico consistente en pantallas con diferentes densidades de píxeles, lo que mejora la experiencia del usuario en una amplia gama de dispositivos.
Conclusión
¡Felicidades! Has dado tus primeros pasos significativos en el desarrollo de aplicaciones Android. Has configurado Android Studio, creado un proyecto básico, explorado la estructura de archivos y, lo más importante, has modificado y personalizado una interfaz de usuario simple utilizando Jetpack Compose y Kotlin. Has aprendido sobre funciones Composable, Modifiers y cómo aplicar colores y espaciado. Este es solo el comienzo. Te animamos a seguir experimentando, cambiando colores, texto y explorando otras propiedades de los Modifiers para seguir aprendiendo y construyendo tus propias ideas en el apasionante mundo del desarrollo de apps para Android.
Si quieres conocer otros artículos parecidos a Crea Tu Primera App Android con Compose puedes visitar la categoría Acupuntura.
Conoce mas Tipos