Cómo crear una app interactiva de Dice Roller

1. Antes de comenzar

Precaución: Este codelab está desactualizado y ya no se actualiza. En su lugar, consulta el curso Aspectos básicos de Android con Compose para conocer las prácticas recomendadas más recientes.

En este codelab, crearás una app de Dice Roller para Android en la que los usuarios pueden hacer clic en un Button de la app y así lanzar un dado. El resultado del lanzamiento se mostrará en un elemento TextView, en la pantalla.

Usarás el editor de diseño de Android Studio a fin de crear el diseño de tu app y, luego, escribirás código Kotlin para establecer lo que deba suceder cuando se haga clic en el Button.

Requisitos previos

• Saber cómo crear y ejecutar una app de "Hello, World!" en Android Studio
• Conocer el uso de TextViews en una app
• Ser capaz de modificar los atributos de una TextView en el editor de diseño
• Poder extraer texto y convertirlo en un recurso de strings para facilitar la traducción de tu app y reutilizar las strings
• Conocer los conceptos básicos de programación de Kotlin

Qué aprenderás

• Cómo agregar un Button a una app para Android
• Cómo agregar comportamientos cuando se presiona un Button en la app
• Cómo abrir y modificar el código de Activity de una app
• Cómo mostrar un mensaje Toast
• Cómo actualizar el contenido de un elemento TextView mientras se ejecuta la app

Qué compilarás

• Compilarás una app para Android de Dice Roller que tiene un Button para lanzar un dado y actualizar la imagen que se muestra en la pantalla con el resultado del lanzamiento.

Requisitos

• Una computadora que tenga Android Studio instalado

Así se verá la app cuando hayas completado este codelab:

2. Configura la app

Cómo crear un proyecto de actividad vacía

1. Si ya tienes un proyecto en Android Studio, ve a File > New > New Project… para abrir la pantalla Create New Project.
2. En Create New Project, crea un proyecto de Kotlin nuevo con la plantilla Empty Activity.
3. Asígnale a la app el nombre "Dice Roller" con un nivel de API 19 (KitKat) como mínimo.

4. Ejecuta la app nueva, que debería verse así.

3. Cómo crear el diseño de la app

Cómo abrir el editor de diseño

1. En la ventana Project, haz doble clic en activity_main.xml (app > res > layout > activity_main.xml) para abrirlo. Deberías ver el Editor de diseño y la TextView "Hello World" en el centro de la app.

A continuación, agregarás un Button a tu app. Un Button es un elemento de la interfaz de usuario (IU) en Android que el usuario puede presionar para realizar una acción.

En esta tarea, agregarás un Button debajo de la TextView "Hello World". Los elementos TextView y Button estarán en el mismo ConstraintLayout, que es un tipo de ViewGroup.

Cuando hay Views en un ViewGroup, a los elementos Views se los considera secundarios del superior ViewGroup. En el caso de tu app, los elementos TextView y Button se considerarían elementos secundarios del ConstraintLayout superior.

Agrega un Button como elemento secundario del ConstraintLayout existente en tu app.

Nota: Al igual que en un árbol familiar, en una jerarquía de vistas, las vistas superiores pueden a su vez ser vistas secundarias, y estas pueden ser superiores en relación con otros elementos secundarios.

Cómo agregar un elemento Button al diseño

1. Arrastra un Button de Palette hasta la vista Design y colócalo debajo del elemento TextView de "Hello World".

2. Debajo de Palette de Component Tree, verifica que Button y TextView aparezcan debajo de ConstraintLayout (como elementos secundarios de ConstraintLayout).
3. Observa el error que indica que Button no tiene restricciones. Como el elemento Button se encuentra en un ConstraintLayout, debes establecer restricciones verticales y horizontales para ubicarlo.

Cómo posicionar el elemento Button

En este paso, agregarás una restricción vertical desde la parte superior del elemento Button hasta la parte inferior del elemento TextView. Esto posicionará al elemento Button debajo de TextView.

1. En la vista Design, en el borde superior de Button, mantén presionado el círculo blanco de borde azul. Arrastra el cursor. Una flecha lo seguirá. Deja de presionar cuando alcances el borde inferior del elemento TextView de "Hello World". Esto establecerá una restricción de diseño y Button se deslizará hacia arriba hasta quedar justo por debajo de TextView.

2. Observa los Attributes a la derecha del editor de diseño.
3. En Constraint Widget, observa la nueva restricción de diseño que se establece en la parte inferior de TextView, Top → BottomOf textView (0dp). (0dp) significa que hay un margen de 0. También verás un error relativo a las restricciones horizontales faltantes.

4. Agrega una restricción horizontal desde el lado izquierdo de Button hasta el de ConstraintLayout superior.
5. Repite la acción en el lado derecho conectando el borde derecho de Button con el de ConstraintLayout. El resultado debería verse como el siguiente:

6. Con Button todavía seleccionado, Constraint Widget debería aparecer de la siguiente manera: Observa las dos restricciones adicionales que se agregaron: Start → StartOf parent (0dp) y End → EndOf parent (0dp). Esto significa que Button está centrado de forma horizontal en su elemento superior, ConstraintLayout.

7. Ejecuta la app. Debería verse como se muestra en la captura de pantalla de abajo. Puedes hacer clic en el elemento Button, pero todavía no ejecutará ninguna acción. Continuemos.

Cómo cambiar el texto del elemento Button

Realizarás algunos cambios adicionales a la IU en el editor de diseño.

En lugar de que la etiqueta Button muestre "Botón", cámbiala por algo que indique lo que hará el botón: "Lanzar".

1. En el editor de diseño, con Button seleccionado, ve a Attributes, cambia el campo text a Roll (Lanzar) y presiona la tecla Enter (Return en una Mac).

2. En Component Tree, verás un triángulo naranja de advertencia junto a Button. Si colocas el cursor sobre el triángulo, aparecerá un mensaje. Android Studio detectó una string codificada ("Roll") en el código de la app. Se sugiere que uses un recurso de strings en su lugar.

Una cadena codificada implica que será más difícil traducir la app a otros idiomas y reutilizar cadenas en diferentes partes de tu app. Afortunadamente, Android Studio cuenta con una solución automática para ti.

3. En Component Tree, haz clic en el triángulo naranja.

Se abrirá el mensaje de advertencia completo.

4. En la parte inferior del mensaje, debajo de Suggested Fix, haz clic en el botón Fix (es posible que debas desplazarte hacia abajo).
5. Se abrirá el diálogo Extract Resource. Extraer una string consiste en tomar el texto "Roll" y crear un recurso de strings llamado roll en strings.xml (app > res > values > strings.xml). Los valores predeterminados son correctos, así que haz clic en OK.

6. Observa que en Attributes, el atributo text para Button ahora dice @string/roll, que hace referencia al recurso que acabas de crear.

En la vista Design, el Button debería seguir indicando Roll.

Cómo ajustar el estilo de TextView

El texto "Hello World!" es bastante pequeño, y el mensaje no resulta relevante para tu app. En este paso, reemplazarás el breve "Hello, World!" con un número para mostrar el resultado del lanzamiento y agrandarás el tamaño de la fuente, de modo que sea más fácil de ver.

1. En Design Editor, selecciona TextView a fin de que sus atributos aparezcan en la ventana Attributes.
2. Cambia el parámetro textSize de TextView a 36sp para que sea grande y fácil de leer. Puede que debas desplazarte para encontrar textSize.

3. Borra el atributo text de TextView. No es necesario que muestres nada en TextView hasta que el usuario lance el dado.

Sin embargo, resulta muy útil ver texto en TextView mientras editas el diseño y el código de tu app. Con este propósito, puedes agregar texto a TextView que solo está visible en la vista previa de diseño, pero no cuando se ejecuta la app.

4. Selecciona TextView en Component Tree.
5. En Common Attributes, busca el atributo text y, debajo de este, otro text con un ícono de herramienta. El atributo text es lo que se mostrará al usuario cuando se ejecute la app. El atributo text con el ícono de herramienta es el atributo "tools text" que solo tú como desarrollador puedes ver.
6. Configura el texto de este atributo como "1" en TextView (para simular que el resultado del lanzamiento fue 1). Este número "1" solo aparecerá en el Design Editor de Android Studio, pero no lo hará cuando ejecutes la app en un dispositivo o emulador real.

Ten en cuenta que solo los desarrolladores de apps verán este texto, por lo que no necesitas crear un recurso de cadenas para él.

7. Mira tu app en la vista previa. Se muestra "1".

8. Ejecuta la app. Así se verá cuando se ejecute en un emulador. No se muestra el valor "1". Este es el comportamiento correcto.

¡Excelente! Ya terminaste con los cambios de diseño.

Tienes una app con un botón, pero si lo presionas, no sucede nada. Para cambiar esto, deberás escribir código Kotlin que lance el dado y actualice la pantalla cuando se presione el botón.

Para hacer este cambio, es necesario que comprendas un poco más la estructura de las apps para Android.

4. Introducción a las actividades

Un elemento Activity proporciona la ventana en la que tu app dibuja su IU. Por lo general, un elemento Activity ocupa toda la pantalla de tu app en ejecución. Cada app tiene una o más actividades. A menudo, la primera actividad o aquella de nivel superior se denomina MainActivity, y la plantilla del proyecto la proporciona. Por ejemplo, cuando el usuario se desplace por la lista de apps de su dispositivo y presione el ícono de la app de "Dice Roller", el sistema Android iniciará el elemento MainActivity de la app.

En el código de MainActivity, debes proporcionar detalles sobre el diseño de Activity y la forma en que el usuario debe interactuar con ella.

• En la app de tarjeta de cumpleaños, hay un elemento Activity que muestra la imagen y el mensaje del cumpleaños.
• En la app de Dice Roller, hay un elemento Activity que muestra el diseño de TextView y de Button que acabas de compilar.

En el caso de las apps más complicadas, es posible que haya varias pantallas y más de un elemento Activity. Cada Activity tiene un propósito específico.

Por ejemplo, en una app de galería de fotos, puedes tener un Activity para mostrar una cuadrícula de fotos, otro Activity para ver una foto individual y un tercer Activity para editar una foto individual.

Cómo abrir el archivo MainActivity.kt

Agregarás código a fin de responder cuando se presione el botón en MainActivity. Para hacerlo de forma correcta, debes conocer más acerca del código de MainActivity que ya está en tu app.

1. Navega al archivo MainActivity.kt y ábrelo (app > java > com.example.diceroller > MainActivity.kt). A continuación, se muestra lo que deberías ver. Si ves import..., haz clic en ... para expandir las importaciones.

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

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

No necesitas entender cada palabra del código de arriba, pero sí debes tener una idea general de lo que hace. Cuanto más trabajes con el código de Android, más familiar te resultará y más lo comprenderás.

2. Observa el código Kotlin de la clase MainActivity, identificado por la palabra clave class y, luego, el nombre.

class MainActivity : AppCompatActivity() {
    ...
}

3. Observa que no hay una función main() en tu MainActivity.

Anteriormente, aprendiste que cada programa de Kotlin debe tener una función main(). Las apps para Android funcionan de manera diferente. En lugar de llamar a una función main(), el sistema Android llamará al método onCreate() de tu MainActivity cuando la app se abra por primera vez.

4. Busca el método onCreate(), que es similar al siguiente código:

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

Aprenderás sobre override en un codelab próximo (de momento, no te preocupes por ello). El resto del método onCreate() configura el elemento MainActivity mediante el código de las importaciones y la configuración del diseño inicial con setContentView().

5. Observa las líneas que comienzan con import.

Android proporciona un framework con varias clases a fin de facilitar la escritura de apps para Android, pero necesita conocer específicamente la clase que deseas. Puedes determinar la clase del framework que se usará en tu código mediante una sentencia import. Por ejemplo, la clase Button se define en android.widget.Button.

Cómo habilitar las importaciones automáticas

Que debas recordar agregar sentencias import cuando usas más clases puede resultar engorroso. Afortunadamente, Android Studio te ayuda a elegir las importaciones adecuadas cuando usas clases proporcionadas por terceros. En este paso, configurarás Android Studio para que agregue automáticamente importaciones cuando sea posible y quite de tu código aquellas que no uses.

En macOS, abre la configuración en File > New Project Settings > Preferences for New Projects... Expande Other Settings > Auto Import. En las secciones Java y Kotlin, asegúrate de que las opciones Add unambiguous imports on the fly y Optimize imports on the fly (for current project) estén marcadas. Ten en cuenta que hay dos casillas de verificación en cada sección. Para guardar los cambios y cerrar la configuración, presiona OK.

En Windows, abre la configuración en File > Settings > Editor > General > Auto Import. En las secciones Java y Kotlin, asegúrate de que las opciones Add unambiguous imports on the fly y Optimize imports on the fly (for current project) estén marcadas. Ten en cuenta que hay dos casillas de verificación en cada sección. Para guardar los cambios y cerrar la configuración, presiona OK.

La configuración de las importaciones libres de ambigüedad le indica a Android Studio que agregue automáticamente una sentencia de importación, siempre que pueda determinar cuál usar. La configuración de la optimización de importaciones le indica a Android Studio que quite todas las importaciones que tu código no use.

5. Cómo hacer que el elemento Button sea interactivo

Ahora que sabes un poco más sobre el elemento MainActivity, modificarás la app para que ocurra algo en la pantalla cuando se haga clic en el elemento Button.

Cómo mostrar un mensaje cuando se hace clic en el elemento Button

En este paso, especificarás que aparecerá un mensaje breve en la parte inferior de la pantalla cuando se haga clic en el botón.

1. Agrega el siguiente código al método onCreate() después de la llamada setContentView(). El método findViewById() busca el elemento Button en el diseño. R.id.button es el ID de recurso del Button, que es un identificador único para este elemento.

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

Nota: Android asigna automáticamente números de ID a los recursos de tu app. Por ejemplo, el botón Roll tiene un ID de recurso, y la cadena del texto del botón también tiene uno. Los ID de recursos tienen el formato R.<type>.<name>. Por ejemplo, R.string.roll. En el caso de los ID de View, el <type> es id. Por ejemplo, R.id.button.

El código guarda la referencia al objeto Button en una variable llamada rollButton, no en el objeto Button en sí.

Importante: Cuando asigna un objeto a una variable, Kotlin no copia el objeto completo cada vez, sino que guarda una referencia a él. Puedes ver la referencia como si fuera un número de ID nacional: el número hace referencia a una persona, pero no es la persona en sí misma. Cuando copias el número, no copias la persona.

El método onCreate() debería verse de la siguiente manera:

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

   val rollButton: Button = findViewById(R.id.button)
}

2. Verifica que Android Studio haya agregado automáticamente una sentencia import para el Button. Observa que ahora hay 3 sentencias de importación.

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

Nota: Si la habilitación automática de las importaciones no funciona, Button se destacará en color rojo. Puedes agregar la importación correcta de forma manual si colocas el cursor del texto dentro de la palabra Button y, luego, presionas Alt+Enter (Option+Enter si usas Mac).

A continuación, deberás asociar el código con el elemento Button de modo que el primero se pueda ejecutar cuando se presione el elemento Button. Un objeto de escucha de clics es un código que sirve para determinar lo que debe ocurrir cuando se presiona algo o se hace clic en algo. Puedes verlo como un código que está quieto, "escuchando" si el usuario hace clic, en este caso, en el elemento Button.

3. Usa el objeto rollButton y configura un objeto de escucha de clics mediante una llamada al método setOnClickListener(). En lugar de los paréntesis que siguen al nombre del método, en realidad, usarás llaves. Esta es una sintaxis especial para declarar un Lambda. Aprenderás más acerca de esto en un codelab futuro.

Por el momento, lo que debes saber es que, dentro de las llaves, pondrás las instrucciones de lo que deberá suceder cuando se presione el botón. En el paso siguiente, tu app mostrará un Aviso, que es un breve mensaje.

rollButton.setOnClickListener {
}

A medida que escribes, Android Studio puede mostrar varias sugerencias. Para este caso, elige la opción setOnClickListener {…}.

Dentro de las llaves, agrega las instrucciones de lo que debe suceder cuando se presiona el botón. Por ahora, tu app mostrará un Toast, que es un breve mensaje que se muestra al usuario.

4. Llama a Toast.makeText() para crear un Toast con el texto "Dice Rolled!".

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. Luego, llama al método show() de modo que le indiques a Toast que debe mostrarse.

toast.show()

Así es como se ve tu clase MainActivity actualizada. Las sentencias package y import siguen apareciendo en la parte superior del archivo:

class MainActivity : AppCompatActivity() {

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

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

Puedes combinar las dos líneas del objeto de escucha de clics en una sola línea sin una variable. Este es un patrón común que puedes encontrar en otro código.

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. Ejecuta la app y haz clic en el botón Roll. En la parte inferior de la pantalla, debería aparecer un mensaje de aviso en una ventana emergente y desaparecer después de un período breve.

¡Hip, hip, hurra! Cuando haces clic en el botón, aparece el mensaje. Esta es la primera vez que escribes código Kotlin para Android.

Cómo actualizar TextView cuando se hace clic en el elemento Button

En lugar de mostrar un mensaje Toast temporal, deberás escribir el código para actualizar el elemento TextView de la pantalla cuando se haga clic en el botón Roll.

1. Vuelve a activity_main.xml (app > res > layout >activity_main.xml).
2. Haz clic en el elemento TextView.
3. Observa que el id es textView.

4. Abre MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt).
5. Borra las líneas de código que crean y muestran el Toast.

rollButton.setOnClickListener {

}

6. En su lugar, crea una variable nueva llamada resultTextView para almacenar TextView.
7. Usa findViewById() a fin de buscar textView en el diseño mediante su ID y almacena una referencia a este elemento.

val resultTextView: TextView = findViewById(R.id.textView)

8. Establece el texto de resultTextView en "6", entre comillas.

resultTextView.text = "6"

Esto es similar a lo que hiciste cuando configuraste el elemento text en Attributes, pero ahora está en tu código, por lo que el texto debe estar entre comillas dobles. Configurarlo de forma explícita significa que, por el momento, TextView siempre mostrará 6. En la próxima tarea, agregarás el código para lanzar el dado y que se muestren valores diferentes.

La clase MainActivity debería verse 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.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. Ejecuta la app. Haz clic en el botón. Debería actualizar TextView a "6".

6. Cómo agregar la lógica de lanzamiento de dados

Lo único que falta es que se lance el dado. Puedes reutilizar la clase Dice del codelab anterior, que maneja la lógica para lanzar un dado.

Cómo agregar la clase Dice

1. Después de la última llave de la clase MainActivity, crea la clase Dice con un método roll().

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. Observa que Android Studio puede subrayar numSides con una línea gris ondulada. (Es posible que demore un momento en aparecer).
3. Coloca el cursor sobre numSides y aparecerá una ventana emergente con el mensaje Property 'numSides' could be private.

Si marcas numSides como private, solo podrás acceder a él desde de la clase Dice. Como el único código que usará numSides está dentro de la clase Dice, está bien hacer que este argumento sea private para la clase Dice. Obtendrás más información sobre las variables private y public en la siguiente unidad.

4. Para hacer la corrección sugerida en Android Studio, haz clic en Make 'numSides' 'private'.

Cómo crear un método rollDice()

Ahora que agregaste una clase Dice a tu app, deberás actualizar MainActivity para usarla. A fin de organizar mejor tu código, coloca toda la lógica sobre el lanzamiento del dado en una función.

1. Reemplaza el código del objeto de escucha de clics que establece el texto en "6" por una llamada a rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. Dado que rollDice() aún no está definido, Android Studio marcará un error y mostrará rollDice() en color rojo.
3. Si colocas el cursor sobre rollDice(), Android Studio mostrará el problema y algunas soluciones posibles.

4. Haz clic en More actions… para abrir el menú. Android Studio se ofrece a hacer más trabajo por ti.

Sugerencia: Si te resulta difícil colocar el cursor y luego hacer clic en More actions…, puedes hacer clic en rollDice() y presionar Alt+Enter (Option+Enter si usas Mac) para acceder al menú.

5. Selecciona Create function 'rollDice'. Android Studio creará una definición vacía para la función dentro de MainActivity.

private fun rollDice() {
    TODO("Not yet implemented")
}

Cómo crear una instancia nueva del objeto Dice

En este paso, harás que el método rollDice() cree y lance un dado. Luego, se mostrará el resultado en TextView.

1. Dentro de rollDice(), borra la llamada TODO().
2. Agrega código para crear un dado de 6 caras.

val dice = Dice(6)

3. Llama al método roll() a fin de lanzar el dado y guarda el resultado en una variable llamada diceRoll.

val diceRoll = dice.roll()

4. Llama a findViewById() para buscar el elemento TextView.

val resultTextView: TextView = findViewById(R.id.textView)

La variable diceRoll es un número, pero TextView usa texto. Puedes usar el método toString() en diceRoll a los efectos de convertirlo en una string.

5. Convierte diceRoll en una string y úsala para actualizar el texto de resultTextView.

resultTextView.text = diceRoll.toString()

El método rollDice() se verá de la siguiente manera:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

6. Ejecuta la app. El resultado del lanzamiento del dado debería cambiar a otros valores además de 6. Como se trata de un número al azar entre 1 y 6, el valor 6 puede aparecer a veces también.

¡Genial!

7. Cómo implementar prácticas recomendadas de codificación

Es normal que tu código se vea un poco desordenado después de que hayas ajustado algunas partes a fin de lograr que tu app funcione. Antes de dejarlo estar, deberías realizar algunas tareas sencillas de limpieza. De esta forma, la app estará en buenas condiciones y será más fácil de mantenerla en el futuro.

Estos hábitos son los que practican los desarrolladores profesionales de Android cuando escriben su código.

Guía de estilo de Android

Cuando trabajes en equipo, lo ideal es que los miembros escriban código de manera similar de modo que el código mantenga coherencia. Por eso, Android cuenta con una Guía de estilo para escribir código de Android (con convenciones de nombres, pautas de formato y otras prácticas recomendadas). Usa estos lineamientos cuando escribas código de Android: Guía de estilo de Kotlin para desarrolladores de Android.

A continuación, se incluyen algunas maneras de cumplir con la guía de estilo.

Limpia el código

Reduce el código

Puedes hacer que tu código sea más conciso si lo resumes en una menor cantidad de líneas. Por ejemplo, este es el código que configura el objeto de escucha de clics en el elemento Button.

rollButton.setOnClickListener {
    rollDice()
}

Debido a que las instrucciones del objeto de escucha de clics ocupan solo 1 línea, puedes colocar tanto la llamada de método rollDice() como las llaves en una sola línea. A continuación, se muestra cómo se vería. ¡Una línea en lugar de tres!

rollButton.setOnClickListener { rollDice() }

Vuelve a formatear el código

Ahora, volverás a formatear tu código a fin de asegurarte de que cumpla con las convenciones de formato de código recomendadas para Android.

1. En la clase MainActivity.kt, selecciona todo el texto del archivo con la combinación de teclas Control+A en Windows (o Command+A en Mac). También puedes ir al menú de Android Studio Edit > Select All.
2. Una vez que tengas todo el texto seleccionado en el archivo, ve al menú de Android Studio Code > Reformat Code o usa la combinación de teclas Ctrl+Alt+L (o Command+Option+L en Mac).

Eso actualiza el formato de tu código, incluidos los espacios en blanco y las sangrías, entre otros. Es posible que no veas ningún cambio, y eso es bueno. Significa que tu código ya tenía un formato correcto.

Comenta el código

Agrega algunos comentarios al código para describir lo que sucederá en virtud del código que escribiste. A medida que el código se vuelve más complicado, también es importante que tomes nota del motivo por el que lo escribiste para que funcione de la manera que indicaste. Si más tarde cambias el código, lo que hace el código seguirá siendo claro, pero es posible que no recuerdes por qué lo escribiste como lo hiciste.

Es común agregar un comentario para cada clase (MainActivity y Dice son las únicas que tienes en tu app) y cada método que escribes. Usa los símbolos /** y */ al principio y al final del comentario para indicarle al sistema que este no es código. Cuando el sistema ejecute el código, se omitirán estas líneas.

Ejemplo de un comentario en una clase:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

Ejemplo de un comentario en un método:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

Dentro de un método, puedes agregar comentarios si crees que eso ayudará al lector de tu código. Recuerda que puedes usar el símbolo // al comienzo de tu comentario. Todo lo que siga al símbolo // en una línea se considerará un comentario.

Ejemplo de 2 comentarios dentro de un método:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

1. Tómate un tiempo para agregar comentarios a tu código.
2. A raíz de todos estos cambios en los comentarios y el formato, te recomendamos que vuelvas a ejecutar la app para asegurarte de que siga funcionando según lo esperado.

Consulta el código de la solución para ver una manera en la que podrías haber comentado el código.

8. Código de solución

El código de la solución para este codelab se encuentra en el proyecto y módulo que se muestran a continuación.

URL del código de la solución: https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

A fin de obtener el código necesario para este codelab y abrirlo en Android Studio, haz lo siguiente:

Obtén el código

1. Haz clic en la URL proporcionada. Se abrirá la página de GitHub del proyecto en un navegador.
2. Verifica y confirma que el nombre de la rama coincida con el nombre de la rama que se especifica en el codelab. Por ejemplo, en la siguiente captura de pantalla, el nombre de la rama es main.

3. En esa página, haz clic en el botón Code, que abre una ventana emergente.

4. En la ventana emergente, haz clic en el botón Download ZIP para guardar el proyecto en tu computadora. Espera a que se complete la descarga.
5. Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
6. Haz doble clic en el archivo ZIP para descomprimirlo. Se creará una carpeta nueva con los archivos del proyecto.

Abre el proyecto en Android Studio

1. Inicia Android Studio.
2. En la ventana Welcome to Android Studio, haz clic en Open.

Nota: Si Android Studio ya está abierto, selecciona la opción de menú File > Open.

3. En el navegador de archivos, ve hasta donde se encuentra la carpeta del proyecto descomprimida (probablemente en Descargas).
4. Haz doble clic en la carpeta del proyecto.
5. Espera a que Android Studio abra el proyecto.
6. Haz clic en el botón Run para compilar y ejecutar la app. Asegúrate de que funcione como se espera.

9. Resumen

• Agrega un Button en una app para Android mediante el editor de diseño.
• Modifica la clase MainActivity.kt para agregar comportamiento interactivo a la app.
• Muestra un mensaje Toast emergente como una solución temporal a los efectos de verificar que estés en el camino correcto.
• Configura un objeto de escucha de clic para un elemento Button mediante setOnClickListener() a fin de agregar el comportamiento que debe tener cuando se haga clic en un elemento Button.
• Cuando la app se está ejecutando, puedes actualizar la pantalla llamando a los métodos en TextView, el Button u otros elementos de la IU del diseño.
• Comenta tu código de modo que ayudes a que las personas que lo lean puedan entender tu enfoque.
• Cambia el formato del código y limpia tu código.

10. Más información

• Vocabulario de conceptos básicos de Android en Kotlin
• Clase Button
• Clase Toast
• Clase TextView
• Guía de estilo de Kotlin para desarrolladores de Android

11. Practica por tu cuenta

Nota: Las prácticas son opcionales. Te permiten trabajar con lo que aprendiste en este codelab.

Haz lo siguiente:

1. Agrega otro dado a la app. Al hacer clic en el botón Roll, se deberán lanzar 2 dados. Los resultados se deben mostrar en 2 TextViews diferentes en la pantalla.

Revisa tu trabajo

La app terminada debe ejecutarse sin errores y mostrar dos dados.