Cómo crear tu primera app para Android

1. Antes de comenzar

Instala Android Studio en tu computadora si aún no lo hiciste. Comprueba que tu computadora cumpla con los requisitos del sistema necesarios para ejecutar Android Studio (que se encuentra en la parte inferior de la página de descarga). Si necesitas instrucciones más detalladas sobre el proceso de configuración, consulta el codelab Cómo descargar e instalar Android Studio.

En este codelab, crearás tu primera app para Android con una plantilla de proyecto que ofrece Android Studio. Puedes usar Kotlin y Jetpack Compose a fin de personalizar tu app. Ten en cuenta que Android Studio se actualiza y, a veces, la IU cambia, por lo que no hay problema si tu Android Studio se ve un poco diferente al de las capturas de pantalla de este codelab.

Requisitos previos

• Conocimientos básicos de Kotlin

Requisitos

• La versión más reciente de Android Studio

Qué aprenderás

• Cómo crear una app para Android con Android Studio
• Cómo ejecutar apps con la herramienta de vista previa en Android Studio
• Cómo actualizar texto con Kotlin
• Cómo actualizar una interfaz de usuario (IU) con Jetpack Compose
• Cómo obtener una vista previa de tu app con la herramienta de vista previa en Jetpack Compose

Qué compilarás

• Una app que te permite personalizar una presentación

Así se verá la app cuando completes este codelab (excepto que se personalizará con tu nombre):

Requisitos

• Una computadora que tenga Android Studio instalado

2. Mira el video con instrucciones para compilar (opcional)

Si quieres ver cómo uno de los instructores del curso completa el codelab, reproduce el siguiente video.

Se recomienda expandir el video a pantalla completa (con el ícono en la esquina inferior derecha del video) para que puedas ver Android Studio y el código con mayor claridad.

Este paso es opcional. También puedes omitir el video y comenzar con las instrucciones del codelab de inmediato.

3. Cómo crear un proyecto con la plantilla

En este codelab, crearás una app para Android con la plantilla de proyecto Empty Compose Activity, que proporciona Android Studio.

Para crear un proyecto en Android Studio, haz lo siguiente:

1. Haz doble clic en el ícono de Android Studio para iniciarlo.

2. En el diálogo Welcome to Android Studio, haz clic en la opción New Project.

Se abrirá la ventana New Project con una lista de plantillas que ofrece Android Studio.

En Android Studio, una plantilla de proyecto es un proyecto de Android que proporciona el plano para un tipo de app determinado. Las plantillas crean la estructura del proyecto y los archivos necesarios de modo que Android Studio compile tu proyecto. Según la plantilla que elijas, te brindará un código inicial para que puedas avanzar más rápido.

3. Asegúrate de que la pestaña Phone and Tablet esté seleccionada.
4. Haz clic en la plantilla Empty Compose Activity para armar tu proyecto con ella. La plantilla Empty Compose Activity es la que permite crear un proyecto simple que puedes usar a fin de compilar una app de Compose. Tiene una sola pantalla y muestra el texto "Hello Android!".
5. Haz clic en Next. Se abrirá el diálogo New Project. Este tiene algunos campos para configurar el proyecto.
6. Configura tu proyecto como se indica a continuación:

El campo Name se usa a fin de ingresar el nombre de tu proyecto. Para este tipo de codelab ingresa "Greeting Card".

Deja el campo Package name como está. Así se organizarán los archivos en la estructura de archivos. En este caso, el nombre del paquete será com.example.greetingcard.

Deja el campo Save location tal como está. Este contiene la ubicación en la que se guardan todos los archivos relacionados con tu proyecto. Toma nota de esa ubicación para encontrar tus archivos.

En el campo Language, ya está Koltin seleccionado. En Language, se define el lenguaje de programación que quieres usar para tu proyecto. Como Compose solo es compatible con Kotlin, no puedes modificar este campo.

Selecciona API 21: Android 5.0 (Lollipop) en el menú del campo Minimum SDK. Minimum SDK indica la versión mínima de Android en la que se puede ejecutar tu app.

La casilla de verificación Use legacy android.support libraries ya está desmarcada.

7. Haz clic en Finish. Ese proceso puede tardar un poco, así que aprovecha para disfrutar de un rico té. Mientras se configura Android Studio, un mensaje y una barra de progreso indicarán si aún se está configurando tu proyecto. Es posible que se vea de este modo:

Un mensaje similar a este te informará cuando se cree la configuración del proyecto.

8. Es posible que veas el panel What's New que contenga actualizaciones sobre funciones nuevas en Android Studio. Ciérralo por ahora.

9. En la esquina superior derecha de Android Studio, haz clic en Split. Esto te permitirá ver tanto el código como el diseño. También puedes hacer clic en Code para ver solo el código, o bien en Design para ver solo el diseño.

Después de presionar Split, deberías ver tres áreas:

• En la vista Project (1), se muestran los archivos y las carpetas de tu proyecto.
• En la vista Code (2), puedes editar el código.
• En la vista Design (3), se muestra una vista previa de cómo se ve tu app.

En la vista Diseño, verás un panel en blanco con este texto:

10. Haz clic en Build & Refresh. Es posible que la compilación tarde un poco en completarse, pero cuando finalice, la vista previa mostrará un cuadro de texto que indicará "Hello Android!". La actividad Empty Compose contiene todo el código necesario para crear esta app.

4. Cómo buscar archivos del proyecto

En esta sección, explorarás Android Studio a medida que te familiarizas con la estructura de archivos.

1. En Android Studio, consulta la pestaña Project. En la pestaña Project, se muestran los archivos y las carpetas de tu proyecto. Cuando estabas configurando tu proyecto, el nombre de paquete era com.example.greetingcard. Puedes ver ese paquete aquí en la pestaña Project. En esencia, un paquete es una carpeta en la que se encuentra el código. Android Studio organiza el proyecto en una estructura de directorios compuesta por paquetes.
2. Si es necesario, selecciona Android en el menú desplegable de la pestaña Project.

Esta es la organización y vista estándar de los archivos que usas. Resulta útil cuando escribes código para tu proyecto, ya que puedes acceder con facilidad a los archivos en los que trabajarás en tu app. Sin embargo, si accedes a los archivos desde un navegador, como Finder o Windows Explorer, la organización de la jerarquía de archivos es muy distinta.

3. Selecciona Project Source Files en el menú desplegable. Ahora puedes navegar entre los archivos del mismo modo que lo harías con cualquier navegador.

4. Selecciona Android nuevamente para volver a la vista anterior. En este curso, usarás la vista de Android. Si la estructura de archivos se ve extraña, asegúrate de que sigues en la vista de Android.

5. Cómo actualizar el texto

Ahora que conoces Android Studio, es hora de comenzar a crear tu tarjeta de presentación.

Mira la vista Code del archivo MainActivity.kt. Observa que hay algunas funciones generadas automáticamente en este código, en particular, las funciones onCreate() y setContent().

Nota: Recuerda que una función es un segmento de un programa que realiza una tarea específica.

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   Greeting("Android")
               }
           }
       }
   }
}

La función onCreate() es el punto de entrada a esta app y llama a otras funciones para compilar la interfaz de usuario. En los programas de Kotlin, la función main() es el lugar específico de tu código en el que se inicia el compilador de Kotlin. En las apps para Android, la función onCreate() realiza esa tarea.

La función setContent() dentro de la función onCreate() se usa a fin de definir el diseño mediante funciones que admiten composición. Se puede llamar a todas las funciones marcadas con la anotación @Composable desde la función setContent() o desde otras que admitan composición. La anotación le indica al compilador de Kotlin que Jetpack Compose usa esta función para generar la IU.

Nota: El compilador toma el código Kotlin que escribiste, lo analiza línea por línea y lo traduce a algo que la computadora puede comprender. Este proceso se denomina compilación de código.

A continuación, observa la función Greeting(). La función Greeting() es una que corresponde a la componibilidad. Observa la anotación @Composable que se encuentra sobre ella. Una función de componibilidad toma alguna entrada y genera lo que se muestra en la pantalla.

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Ya aprendiste sobre las funciones (si necesitas un repaso, visita el codelab Cómo crear y usar funciones en Kotlin), pero existen algunas diferencias con las funciones que admiten composición.

• Los nombres de las funciones @Composable llevan mayúscula.
• Antes de la función, se agrega la anotación @Composable.
• Las funciones @Composable no pueden mostrar nada.

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Por el momento, la función Greeting() toma un nombre y muestra el saludo Hello dirigido a esa persona.

1. Actualiza la función Greeting() para presentarte en lugar de mostrar "Hello":

@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}

2. Vuelve a compilar DefaultPreview presionando el botón en la parte superior izquierda del panel de diseño:

¡Perfecto! Cambiaste el texto, pero te presenta como Android, un nombre que probablemente no sea el tuyo. A continuación, personalizarás la presentación con tu nombre.

La función DefaultPreview() es una función genial que te permite ver cómo se ve la app sin tener que compilarla por completo. Para que pueda ser una función de vista previa, debes agregar una anotación @Preview.

Como puedes ver, la anotación @Preview toma un parámetro llamado showBackground. Si estableces showBackground como verdadero, se agregará un fondo a la vista previa de tu app.

Como Android Studio usa un tema claro de forma predeterminada para el editor, puede resultar difícil ver la diferencia entre showBackground = verdadero y showBackground = falso. Sin embargo, así se ve la diferencia con un tema oscuro. Observa el fondo blanco en la imagen cuando se establece como verdadero.

3. Actualiza la función DefaultPreview() con tu nombre. Luego, vuelve a compilar la app y revisa tu tarjeta de presentación personalizada.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

6. Cómo cambiar el color del fondo

Ahora tienes el texto de presentación, pero es un poco aburrido. En esta sección, aprenderás a cambiar el color de fondo.

Si deseas establecer un color de fondo diferente para la presentación, deberás envolver el texto en una Surface. Una Surface es un contenedor que representa una sección de la IU en la que puedes modificar el aspecto, como el borde o el color de fondo.

1. Para rodear el texto con una Surface, destaca la línea de texto, presiona (Alt+Enter en Windows o Option+Enter en Mac) y, luego, selecciona Surround with widget.

2. Selecciona Surround with Container.

El contenedor predeterminado que te dará es Box, pero puedes cambiarlo por otro tipo de contenedor.

3. Borra Box y escribe Surface() en su lugar.

@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}

4. El contenedor Surface tiene un parámetro color. Configúralo como Color.

@Composable
fun Greeting(name: String) {
   Surface(color = Color) {
       Text(text = "Hi, my name is $name!")
   }
}

5. Cuando escribes Color, puedes notar que la palabra estará en color rojo y subrayada. Para resolver este problema, desplázate hasta la parte superior del archivo, donde dice importar y presiona los tres botones.

6. Agrega esta sentencia al final de la lista de importaciones.

import androidx.compose.ui.graphics.Color

La lista completa de importaciones se verá de la siguiente manera:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard
import androidx.compose.ui.graphics.Color

7. En tu código, la práctica recomendada es mantener las importaciones en orden alfabético. Para ello, presiona Help en la barra de herramientas superior, escribe Optimize Imports y haz clic en Optimize Imports.

Ahora, la lista completa de importaciones se verá de la siguiente manera:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard

8. Observa que la palabra Color que escribiste en los paréntesis de Surface cambió de roja y subrayada a subrayada en rojo. Para solucionar ese problema, agrega un punto después de la palabra. Verás una ventana emergente con diferentes opciones de colores.

Esta es una de las funciones geniales de Android Studio; es ingeniosa y te ayudará cuando sea posible. En este caso, reconoce que quieres especificar un color, así que te sugerirá diferentes colores.

9. Elige un color para la superficie. Este codelab usa magenta, pero puedes elegir el que prefieras.

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}

10. Haz clic en Build & Refresh. El texto estará rodeado por el color que elegiste.

7. Cómo agregar padding

Ahora tu texto tiene un color de fondo; a continuación, agregarás un poco de espacio (padding) alrededor del texto.

Se usa un Modifier para aumentar o decorar un elemento que admite composición. Un modificador que puedes usar es el modificador padding, que agrega espacio alrededor del elemento (en este caso, alrededor del texto). Esto se logra mediante la función Modifier.padding().

1. Agrega estas importaciones a la sección de declaración de importaciones.

Asegúrate de usar Optimize Imports para organizar alfabéticamente las importaciones nuevas.

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

2. Agrega un modificador de padding al texto con un tamaño de 24.dp y haz clic en Build & Refresh.

Nota: Obtendrás más información sobre los píxeles independientes de la densidad (DP) en la siguiente ruta de aprendizaje, pero puedes consultar este artículo si quieres leer más ahora.

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

¡Felicitaciones! Compilaste tu primera app para Android en Compose. Este logro es bastante importante. Tómate un tiempo para experimentar con diferentes colores y texto, y personalízalos a tu gusto.

8. Cómo revisar el código de solución

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
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 com.example.myapplication.ui.theme.GreetingCardTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container that uses the 'background' color from the theme
               Surface(color = MaterialTheme.colors.background) {
                   Greeting("Android")
               }
           }
       }
   }
}

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

9. Conclusión

Aprendiste a usar Android Studio y creaste tu primera app para Android con Compose. ¡Bien hecho!

Este codelab es parte del curso Aspectos básicos de Android con Compose. Si quieres obtener información para ejecutar tu app en el emulador o en un dispositivo físico, consulta los siguientes codelabs de esta ruta de aprendizaje.

Resumen

• Para crear un proyecto nuevo, abre Android Studio, haz clic en New Project > Empty Compose Activity > Next, ingresa un nombre para tu proyecto y, luego, establece su configuración.
• Si deseas saber cómo se verá tu app, usa el panel Preview.
• Las funciones que admiten composición son como las funciones normales, pero tienen algunas diferencias: los nombres de las funciones llevan mayúscula, debes agregar la anotación @Composable antes de la función y las funciones @Composable no pueden mostrar nada.
• Se usa un Modifier para aumentar o decorar el elemento que admite composición.

Más información

• Vocabulario de conceptos básicos de Android en Kotlin
• Introducción a Android Studio
• Descripción general de proyectos
• Cómo crear un proyecto
• Cómo agregar código desde una plantilla
• Jetpack Compose