Aspectos básicos de Kotlin para Android 01.2: Anatomía básica de una app

Este codelab es parte del curso Conceptos básicos de Kotlin para Android. Aprovecharás al máximo este curso si trabajas con los codelabs de forma secuencial. Todos los codelabs del curso se enumeran en la página de destino de los codelabs de Android Kotlin Fundamentals.

Introducción

Hasta ahora, configuraste todo y Android Studio creó mucho código por ti. Antes de modificar todo ese código, es importante que sepas qué acabas de crear y cómo navegar por los archivos fuente de una app para Android.

En este codelab, obtendrás más información sobre los componentes principales de una app para Android y agregarás interactividad simple a una app con un botón.

Conocimientos que ya deberías tener

• Cómo instalar y abrir Android Studio
• Cómo crear un proyecto de app nuevo
• Comprender cómo ejecutar una app en un emulador o en un dispositivo físico

Qué aprenderás

• Cómo editar el archivo de diseño de la app
• Cómo crear una app con comportamiento interactivo
• Mucha terminología nueva. Consulta el Glosario de vocabulario para obtener explicaciones sencillas de términos y conceptos.

Actividades

• Explora el archivo MainActivity de Kotlin y el archivo de diseño de la actividad.
• Edita el diseño de la actividad en XML.
• Agrega un elemento Button al diseño de la actividad.
• Extrae las cadenas codificadas en un archivo de recursos de cadenas.
• Implementa métodos de controlador de clics para mostrar mensajes en la pantalla cuando el usuario presione un Button.

En este codelab, crearás un nuevo proyecto de app llamado DiceRoller y agregarás interactividad básica con un botón. Cada vez que se hace clic en el botón, cambia el valor del texto que se muestra. La app de DiceRoller final de este codelab se ve de la siguiente manera:

En el último codelab, aprendiste sobre las partes principales de un proyecto de app, incluidos los directorios java y res. En esta tarea, te enfocarás en los dos archivos más importantes que componen tu app: el archivo MainActivity de Kotlin y el archivo de diseño activity_main.xml.

Paso 1: Examina MainActivity

MainActivity es un ejemplo de Activity. Un Activity es una clase principal de Android que dibuja una interfaz de usuario (IU) de una app para Android y recibe eventos de entrada. Cuando se inicia tu app, se inicia la actividad especificada en el archivo AndroidManifest.xml.

Muchos lenguajes de programación definen un método principal que inicia el programa. Las apps para Android no tienen un método principal. En cambio, el archivo AndroidManifest.xml indica que se debe iniciar MainActivity cuando el usuario presiona el ícono del selector de la app. Para iniciar una actividad, el SO Android usa la información del manifiesto para configurar el entorno de la app y construir el MainActivity. Luego, el MainActivity realiza algunos ajustes.

Cada actividad tiene un archivo de diseño asociado. La actividad y el diseño se conectan mediante un proceso conocido como inflado de diseño. Cuando se inicia la actividad, las vistas definidas en los archivos de diseño XML se convierten (o se "inflan") en objetos de vista de Kotlin en la memoria. Una vez que esto sucede, la actividad puede dibujar estos objetos en la pantalla y también modificarlos de forma dinámica.

1. En Android Studio, selecciona File > New > New Project para crear un proyecto nuevo. Usa la actividad Empty y haz clic en Next.
2. Llama al proyecto DiceRoller y verifica todos los demás valores del nombre y la ubicación del proyecto. Asegúrate de que la opción "Usar artefactos de AndroidX" esté marcada. Haz clic en Finalizar.
   
   
   
3. En el panel Project > Android, expande java > com.example.android.diceroller. Haz doble clic en MainActivity. El editor de código muestra el código en MainActivity.
   
   
   
4. Debajo del nombre del paquete y las instrucciones de importación, se encuentra la declaración de la clase para MainActivity. La clase MainActivity extiende AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

AppCompatActivity es una subclase de Activity que admite todas las funciones modernas de Android y, al mismo tiempo, proporciona retrocompatibilidad con versiones anteriores de Android. Para que tu app esté disponible para la mayor cantidad posible de dispositivos y usuarios, usa siempre AppCompatActivity.

5. Observa el método onCreate(). Las actividades no usan un constructor para inicializar el objeto. En cambio, se llama a una serie de métodos predefinidos (denominados "métodos de ciclo de vida") como parte de la configuración de la actividad. Uno de esos métodos del ciclo de vida es onCreate(), que siempre anulas en tu propia app. Aprenderás más sobre los métodos del ciclo de vida en un codelab posterior.
   
   En onCreate(), especificas qué diseño está asociado a la actividad y lo inflas. El método setContentView() realiza ambas acciones.
   

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

El método setContentView() hace referencia al diseño con R.layout.activity_main, que en realidad es una referencia de número entero. La clase R se genera cuando compilas tu app. Esta clase incluye todos los recursos de la app, incluido el contenido del directorio res.R

En este caso, R.layout.activity_main hace referencia a la clase R generada, la carpeta layout y el archivo de diseño activity_main.xml. (Los recursos no incluyen extensiones de archivo). Harás referencia a muchos de los recursos de la app (incluidas imágenes, cadenas y elementos dentro del archivo de diseño) con referencias similares en la clase R.

Paso 2: Examina y explora el archivo de diseño de la app

Todas las actividades de tu app tienen un archivo de diseño asociado en el directorio res/layout de la app. Un archivo de diseño es un archivo XML que expresa cómo se ve realmente una actividad. Un archivo de diseño hace esto definiendo vistas y definiendo dónde aparecen las vistas en la pantalla.

Las vistas son elementos como texto, imágenes y botones que extienden la clase View. Hay muchos tipos de vistas, incluidas TextView, Button, ImageView y CheckBox.

En esta tarea, examinarás y modificarás el archivo de diseño de la app.

1. En el panel Project > Android, expande res > layout y haz doble clic en activity_main.xml. Se abrirá el editor de diseño. Android Studio incluye este editor, que te permite compilar el diseño de tu app de forma visual y obtener una vista previa del diseño. Obtendrás más información sobre el editor de diseño en un codelab posterior.
2. Para ver el archivo de diseño como XML, haz clic en la pestaña Text en la parte inferior de la ventana.
   
   
   
3. Borra todo el código XML existente en el editor de diseño. El diseño predeterminado que obtienes con un proyecto nuevo es un buen punto de partida si trabajas con el editor de diseño de Android Studio. En esta lección, trabajarás con el código XML subyacente para crear un nuevo diseño desde cero.
4. Copia y pega este código en el diseño:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Ahora, examina el código:

1. El elemento raíz o de nivel superior del diseño es un elemento <LinearLayout>. La vista LinearLayout es un ViewGroup. Los grupos de vistas son contenedores que incluyen otras vistas y ayudan a especificar las posiciones de las vistas en la pantalla.
   
   Todas las vistas y los grupos de vistas que agregas a tu diseño se organizan en una jerarquía de vistas, con el elemento XML superior como raíz de esa jerarquía. La vista raíz puede contener otras vistas y grupos de vistas, y los grupos de vistas contenidos pueden contener otras vistas y grupos de vistas. Cuando tu app ejecuta la jerarquía de vistas en tu archivo de diseño XML, esta se convierte en una jerarquía de objetos cuando se infla el diseño. En este caso, el grupo de vistas raíz es un diseño lineal, que organiza sus vistas secundarias de forma lineal, una tras otra (ya sea vertical u horizontalmente).
   
   La raíz predeterminada que obtienes para un proyecto nuevo de Android es un ConstraintLayout, que funciona bien en coordinación con el editor de diseño. Para esta app, usarás un grupo de vistas LinearLayout, que es más simple que el diseño basado en restricciones. En la próxima lección, aprenderás mucho más sobre los grupos de vistas y el diseño basado en restricciones.
2. Dentro de la etiqueta LinearLayout, observa el atributo android:layout_width. El ancho de este LinearLayout se establece en match parent, lo que hace que tenga el mismo ancho que su elemento principal. Como esta es la vista raíz, el diseño se expande al ancho completo de la pantalla.
3. Observa el atributo android:layout_height, que está establecido en wrap_content. Este atributo hace que la altura de LinearLayout coincida con la altura combinada de todas las vistas que contiene, que por ahora es solo TextView.
4. Examina el elemento <TextView>. Este TextView, que muestra texto, es el único elemento visual de tu app de DiceRoller. El atributo android:text contiene la cadena real que se mostrará, en este caso, la cadena "Hello World!".
5. Observa los atributos android:layout_width y android:layout_height en el elemento <TextView>, que están configurados como wrap_content. El contenido de la vista de texto es el texto en sí, por lo que la vista solo ocupará el espacio necesario para el texto.

La app para lanzar dados no es muy útil si el usuario no puede lanzar los dados y ver el resultado. Para comenzar, agrega un botón al diseño para tirar los dados y agrega texto que muestre el valor de los dados que tiró el usuario.

Paso 1: Agrega un botón al diseño

1. Agrega un elemento Button al diseño debajo de la vista de texto. Para ello, ingresa <Button y, luego, presiona Retorno. Aparece un bloque Button que termina con /> y que incluye los atributos layout_width y layout_height.

<Button
   android:layout_width=""
   android:layout_height="" />

2. Establece los atributos layout_width y layout_height en "wrap_content". Con estos valores, el botón tiene el mismo ancho y alto que la etiqueta de texto que contiene.
3. Agrega un atributo android:text al botón y asígnale un valor de "Roll". Ahora, el elemento Button se ve de la siguiente manera:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

Para las vistas de Button, el atributo text es la etiqueta del botón. En el editor de diseño, el atributo se destaca en amarillo, lo que indica una sugerencia o una advertencia. En este caso, el resaltado amarillo se debe a que la cadena "Roll" está codificada de forma rígida en la etiqueta del botón, pero la cadena debería ser un recurso. Obtendrás información sobre los recursos de cadena en la siguiente sección.

Paso 2: Extrae recursos de cadenas

En lugar de codificar cadenas de forma rígida en los archivos de diseño o de código, se recomienda colocar todas las cadenas de la app en un archivo independiente. Este archivo se llama strings.xml y se encuentra entre los recursos de la app, en el directorio res/values/.

Tener las cadenas en un archivo separado facilita su administración, en especial si las usas más de una vez. Además, los recursos de cadenas son obligatorios para traducir y localizar tu app, ya que debes crear un archivo de recursos de cadenas para cada idioma.

Android Studio te ayuda a recordar que debes colocar tus cadenas en un archivo de recursos con sugerencias y advertencias.

1. Haz clic una vez en la cadena "Roll" del atributo android:text de la etiqueta <Button>.
2. Presiona Alt+Enter (Option+Enter en macOS) y selecciona Extract string resource en el menú emergente.
3. Ingresa roll_label en el campo Nombre del recurso.
4. Haz clic en Aceptar. Se crea un recurso de cadena en el archivo res/values/string.xml, y la cadena del elemento Button se reemplaza por una referencia a ese recurso:
   android:text="@string/roll_label"
5. En el panel Project > Android, expande res > values y, luego, haz doble clic en strings.xml para ver tus recursos de cadenas en el archivo strings.xml:

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

Nota: Además de la cadena que acabas de agregar, el archivo strings.xml también incluye el nombre de la app. El nombre de la app aparece en la barra de la app en la parte superior de la pantalla si inicias el proyecto de la app con la plantilla vacía. Puedes cambiar el nombre de la app editando el recurso app_name.

Paso 3: Aplica estilo y posiciona las vistas

Tu diseño ahora contiene una vista TextView y una vista Button. En esta tarea, organizarás las vistas dentro del grupo de vistas para que se vean más atractivas.

1. Haz clic en la pestaña Design para ver una vista previa del diseño. En este momento, ambas vistas están una al lado de la otra y se encuentran en la parte superior de la pantalla.
   
   
   
2. Haz clic en la pestaña Text para volver al editor de XML. Agrega el atributo android:orientation a la etiqueta LinearLayout y asígnale un valor de "vertical". El elemento <LinearLayout> ahora debería verse de la siguiente manera:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

El grupo de vistas LinearLayout posiciona las vistas que contiene una después de otra en una línea, ya sea horizontalmente en una fila o verticalmente en una pila. La opción predeterminada es horizontal. Como quieres que el TextView se apile sobre el Button, debes establecer la orientación en vertical. Ahora, el diseño se ve de esta forma, con el botón debajo del texto:

3. Agrega el atributo android:layout_gravity a TextView y Button, y asígnale el valor "center_horizontal". Esto alinea ambas vistas a lo largo del centro del eje horizontal. Los elementos TextView y Button ahora deberían verse de la siguiente manera:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

4. Agrega el atributo android:layout_gravity al diseño lineal y asígnale el valor "center_vertical". Tu elemento LinearLayout ahora debería verse así:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

Nota: Si agregas la gravedad center_vertical a las vistas de botón y de texto (en lugar de center_horizontal), las vistas se centrarán horizontal y verticalmente en el medio del diseño. Es decir, las vistas están una encima de la otra.

Para centrar todos los elementos secundarios a la vez, usa center_vertical en el elemento principal (el elemento LinearLayout), como se muestra arriba.

5. Para aumentar el tamaño del texto en la vista de texto, agrega el atributo android:textSize al elemento <TextView> con el valor "30sp". La abreviatura sp significa píxeles escalables, que es una medida para dimensionar el texto independientemente de la calidad de la pantalla del dispositivo. Ahora, el elemento TextView debería verse de la siguiente manera:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

6. Compila y ejecuta tu app.
   
   
   

Ahora, tanto el texto como el botón están bien ubicados, y hay texto más grande en la vista de texto. El botón aún no tiene ninguna funcionalidad, por lo que no ocurre nada cuando haces clic en él. Trabajarás en eso a continuación.

Paso 4: Obtén una referencia al botón en el código

El código de Kotlin en MainActivity es responsable de definir las partes interactivas de tu app, como lo que sucede cuando presionas un botón. Para escribir una función que se ejecute cuando se haga clic en el botón, debes obtener una referencia al objeto Button en tu diseño inflado en MainActivity. Para obtener una referencia al botón, haz lo siguiente:

• Asigna un ID al Button en el archivo XML.
• Usa el método findViewById() en tu código para obtener una referencia al View con un ID específico.

Una vez que tengas una referencia a la vista Button, podrás llamar a métodos en esa vista para cambiarla de forma dinámica a medida que se ejecuta la app. Por ejemplo, puedes agregar un controlador de clics que ejecute código cuando se presione el botón.

1. Abre el archivo de diseño activity_main.xml, si aún no está abierto, y haz clic en la pestaña Text.
2. Agrega el atributo android:id al botón y asígnale un nombre (en este caso, "@+id/roll_button""). Tu elemento <Button> ahora se ve de la siguiente manera:

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

Cuando creas un ID para una vista en el archivo de diseño XML, Android Studio crea una constante de número entero con el nombre de ese ID en la clase R generada. Por lo tanto, si le asignas el nombre roll_button a una vista, Android Studio genera y crea una constante de número entero llamada roll_button en la clase R. El prefijo "@+id" para el nombre del ID le indica al compilador que agregue esa constante de ID a la clase R. Todos los IDs de vista en tu archivo XML deben tener este prefijo.

3. Abre el archivo MainActivity de Kotlin. Dentro de onCreate(), después de setContentView(), agrega esta línea:

val rollButton: Button = findViewById(R.id.roll_button)

Usa el método findViewById() para obtener una referencia View para la vista que definiste en la clase XML. En este caso, obtienes la referencia Button de la clase R y el ID roll_button, y asignas esa referencia a la variable rollButton.

Nota: Si escribes la línea en lugar de copiarla y pegarla, notarás que Android Studio proporciona una sugerencia de autocompletado para el nombre del ID una vez que comiences a escribir.

4. Observa que Android Studio destaca la clase Button en rojo y la subraya para indicar que es una referencia no resuelta y que debes importar esta clase antes de poder usarla. También puede aparecer un cuadro de información que indica el nombre de clase completamente calificado:
   
   
   
5. Presiona Alt+Enter (Option+Enter en Mac) para aceptar el nombre de clase completamente calificado.

Nota: Puedes configurar Android Studio para que agregue automáticamente sentencias de importación para las clases si el significado no es ambiguo. El panel de configuración de Editor > General > Auto Import especifica cómo se controlan las importaciones.

Paso 5: Agrega un controlador de clics para mostrar un mensaje emergente

Un controlador de clics es un método que se invoca cada vez que el usuario hace clic en un elemento de la IU que lo permite, o lo presiona; por ejemplo, un botón. Para crear un controlador de clics, necesitas lo siguiente:

• Es un método que realiza alguna operación.
• El método setOnClickHandler(), que conecta el Button al método del controlador

En esta tarea, crearás un método de controlador de clics para mostrar un Toast. (Un aviso es un mensaje que aparece en la pantalla por un breve período). Conectas el método del controlador de clics a Button.

1. En tu clase MainActivity después de onCreate(), crea una función privada llamada rollDice().

private fun rollDice() {
  
}

2. Agrega esta línea al método rollDice() para mostrar un Toast cuando se llame a rollDice():

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

Para crear un mensaje emergente, llama al método Toast.makeText(). Este método requiere tres elementos:

• Un objeto Context. El objeto Context te permite comunicarte con el SO Android y obtener información sobre su estado actual. Aquí necesitas un Context para que el objeto Toast pueda indicarle al SO que muestre el mensaje emergente. Como AppCompatActivity es una subclase de Context, puedes usar la palabra clave this para el contexto.
• El mensaje que se mostrará, aquí "button clicked".
• Es la duración durante la que se mostrará el mensaje. El método show() al final muestra el aviso.

3. En onCreate(), después de la llamada a findViewById(), agrega esta línea para asignar rollDice() como controlador de clics al objeto rollButton:

rollButton.setOnClickListener { rollDice() }

La definición completa de tu clase MainActivity ahora se ve de la siguiente manera:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

4. Compila y ejecuta tu app. Cada vez que presiones el botón, debería aparecer un mensaje Toast.

En esta tarea, modificarás el método rollDice() para cambiar el texto en el TextView. En el primer paso, cambiarás ese texto de "Hello World!" a la cadena "Dice Rolled!". En el segundo paso, muestras un número aleatorio entre uno y seis.

Paso 1: Muestra una cadena

1. Abre activity_main.xml y agrega un ID a TextView.

android:id="@+id/result_text"

2. Abre MainActivity. En el método rollDice(), comenta la línea para mostrar el Toast.
3. Usa el método findViewById() para obtener una referencia al TextView por su ID. Asigna la referencia a una variable resultText.

val resultText: TextView = findViewById(R.id.result_text)

4. Asigna una cadena nueva a la propiedad resultText.text para cambiar el texto que se muestra. Puedes ignorar la sugerencia para extraer esa cadena en un recurso, ya que es solo una cadena temporal.

resultText.text = "Dice Rolled!"

5. Compila y ejecuta la app. Observa que, cuando presionas el botón Roll, ahora se actualiza el TextView.

Paso 2: Muestra un número aleatorio

Por último, en esta tarea, agregarás aleatoriedad al clic del botón para simular el lanzamiento de los dados. Cada vez que se hace clic o se presiona el botón, tu código elige un número aleatorio del 1 al 6 y actualiza el TextView. La tarea de generar un número aleatorio no es específica de Android, y usas la clase Random para hacerlo.

1. En la parte superior del método rollDice(), usa el método Random.nextInt() para obtener un número aleatorio entre 1 y 6:

val randomInt = Random().nextInt(6) + 1

2. Configura la propiedad text en el valor del número entero aleatorio, como una cadena:

resultText.text = randomInt.toString()

3. Compila y ejecuta la app. Cada vez que presiones el botón Roll, cambiará el número en la vista de texto.

Proyecto de Android Studio: DiceRoller

Nota: Todos los desafíos de programación son opcionales.

Desafío: Agrega un segundo botón a la app con la etiqueta "Contar" que aparezca justo debajo del botón Lanzar. Cuando se presiona, el botón Count Up debe obtener el valor actual de la vista de texto del resultado, agregarle 1 y actualizar la vista de texto. Asegúrate de controlar estos casos límite:

• Si la vista de texto del resultado aún no contiene un número (es decir, si la vista de texto aún tiene la cadena predeterminada "Hello World"), establece el texto del resultado en 1.
• Si el número ya es 6, no hagas nada.

Nota: La cadena en las vistas de TextView es una instancia de la clase CharSequence. Para probar su valor, debes convertirlo en una cadena:

resultText.text.toString()

Código de solución del desafío de programación

Proyecto de Android Studio: DiceRoller-challenge

Actividades

• MainActivity es una subclase de AppCompatActivity, que a su vez es una subclase de Activity. Un Activity es una clase principal de Android que se encarga de dibujar la IU de una app para Android y recibir eventos de entrada.
• Todas las actividades tienen un archivo de diseño asociado, que es un archivo XML en los recursos de la app. El archivo de diseño se denomina según la actividad, por ejemplo, activity_main.xml.
• El método setContentView() en MainActivity asocia el diseño con la actividad y aumenta ese diseño cuando se crea la actividad.
• La expansión del diseño es un proceso en el que las vistas definidas en los archivos de diseño XML se convierten (o se "expanden") en objetos de vista de Kotlin en la memoria. Una vez que se infla el diseño, el Activity puede dibujar estos objetos en la pantalla y modificarlos de forma dinámica.

Vistas

• Todos los elementos de la IU en el diseño de la app son subclases de la clase View y se denominan vistas. TextView y Button son ejemplos de vistas.
• Los elementos View se pueden agrupar dentro de un ViewGroup. Un grupo de vistas actúa como contenedor de las vistas o de otros grupos de vistas que contiene. LinearLayout es un ejemplo de un grupo de vistas que organiza sus vistas de forma lineal.

Ver atributos

• Los atributos android:layout_width y android:layout_height indican el ancho y la altura de una vista. El valor match_parent estira la vista hasta el ancho o la altura de su elemento principal. El valor wrap_content reduce la vista para que se ajuste a su contenido.
• El atributo android:text indica el texto que debe mostrar una vista (si esa vista muestra texto). En el caso de los botones, android:text es la etiqueta del botón.
• El atributo android:orientation en un grupo de vistas LinearLayout organiza los elementos de vista que contiene. Un valor de horizontal organiza las vistas de izquierda a derecha. Un valor de vertical organiza las vistas de arriba hacia abajo.
• El atributo android:layout_gravity determina la ubicación de una vista y de todos sus elementos secundarios.
• El atributo android:textSize define el tamaño del texto en una vista de texto. Los tamaños de texto se especifican en unidades sp (píxeles escalables). Si usas unidades sp, puedes ajustar el tamaño del texto independientemente de la calidad de la pantalla del dispositivo.

Cadenas

• En lugar de codificar cadenas en el diseño, se recomienda usar recursos de cadenas.
• Los recursos de cadenas se encuentran en el archivo values/res/string.xml.
• Para extraer cadenas, usa Alt+Enter (Option+Enter en Mac). Selecciona Extract string resources en el menú emergente.

Cómo usar las vistas

• Para conectar tu código de Kotlin a una vista que definiste en el diseño, debes obtener una referencia al objeto de vista después de que se haya inflado la vista. Asigna un ID (android:id) a la vista en el diseño y, luego, usa el método findViewById() para obtener el objeto de vista asociado.
• Cuando creas un ID para una vista en el archivo de diseño XML, Android Studio crea una constante de número entero con el nombre de ese ID en la clase R generada. Luego, puedes usar esa referencia R.id en el método findViewById().
• Puedes establecer los atributos de un objeto de vista en tu código Kotlin directamente por nombre de propiedad. Por ejemplo, el texto en una vista de texto se define con el atributo android:text en XML y con la propiedad text en Kotlin.
• Un controlador de clics es un método que se invoca cuando el usuario hace clic en un elemento de la IU o lo presiona. Para adjuntar un método de controlador de clics a una vista, como un botón, usa el método setOnClickListener().

Cómo usar mensajes emergentes

Un aviso es una vista que muestra al usuario un mensaje simple en una pequeña ventana emergente.

Para crear un mensaje Toast, llama al método de fábrica makeText() en la clase Toast con tres argumentos:

• El contexto de la app Activity
• Mensaje que se mostrará, por ejemplo, un recurso de cadena
• Una duración, por ejemplo, Toast.LENGTH_SHORT

Para mostrar el aviso, llama a show().

Curso de Udacity:

• Developing Android Apps with Kotlin

Documentación para desarrolladores de Android:

• Introducción a Android Studio
• Diseños
• View
• Button
• TextView
• Descripción general de los recursos de las apps
• Descripción general de eventos de entrada
• findViewById()
• setOnClickListener()
• Context

Otro:

• Glosario de palabras y conceptos de vocabulario

En esta sección, se enumeran las posibles actividades para el hogar para los alumnos que trabajan en este codelab como parte de un curso dirigido por un instructor. Depende del instructor hacer lo siguiente:

• Si es necesario, asigna una tarea.
• Comunicarles a los alumnos cómo enviar las actividades para el hogar.
• Califica las actividades para el hogar.

Los instructores pueden usar estas sugerencias en la medida que quieran y deben asignar cualquier otra actividad para el hogar que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas actividades para el hogar para probar tus conocimientos.

Cómo cambiar una app

Abre la app de DiceRoller. Agrega un botón a la app con la etiqueta "Restablecer" que aparezca justo debajo del botón Lanzar. Haz que ese botón restablezca la vista de texto del resultado a 0.

Responde estas preguntas:

Pregunta 1

¿Qué método de un elemento Activity aumenta el diseño de la app y pone a disposición las vistas como objetos?

• onCreate()
• setClickListener()
• setContentView()
• show()

Pregunta 2

¿Qué atributo de vista se usa para establecer el ancho de una vista de modo que se ajuste al contenido que contiene?

• android:view_width="wrap"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"

Cómo enviar tu app para que se la califique

Verifica que la app tenga lo siguiente:

• El diseño de la app debe incluir una vista de texto y dos botones.
• El código de la app debe establecer dos controladores de clics, uno para cada botón.
• El controlador de clics que restablece la vista de texto debe establecer la propiedad de texto en 0.

Comienza la próxima lección: 1.3 Compatibilidad y recursos de imágenes

Para obtener vínculos a otros codelabs de este curso, consulta la página de destino de los codelabs de Conceptos básicos de Kotlin para Android.