Aspectos básicos de Kotlin para Android 01.4: Aprende por tu cuenta

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

En este codelab, aprenderás sobre los recursos que son útiles para los desarrolladores de Kotlin en Android, incluidas plantillas, documentación, videos y apps de ejemplo.

Conocimientos que ya deberías tener

  • El flujo de trabajo básico de Android Studio
  • Cómo usar el editor de diseño en Android Studio

Qué aprenderás

  • Dónde encontrar información y recursos para desarrolladores de Kotlin y Android
  • Cómo cambiar el ícono de selector en una app
  • Cómo buscar ayuda cuando compilas apps para Android con Kotlin

Actividades

  • Explora algunos de los recursos disponibles para los desarrolladores de Kotlin Android de todos los niveles.
  • Descarga y explora una app de ejemplo para Android en Kotlin.
  • Cambiar el ícono de selector de una app

En este codelab, aprenderás sobre las plantillas, las muestras, la documentación y otros recursos disponibles para los desarrolladores de Kotlin en Android.

Primero, crearás una app simple a partir de una plantilla de Android Studio y la modificarás. Luego, descargarás y explorarás la app de ejemplo Android Sunflower. Reemplazarás el ícono de selector de la app de ejemplo (un girasol) por un recurso de imagen prediseñada que está disponible en Android Studio (una cara sonriente).

Android Studio proporciona plantillas para diseños de apps y actividades comunes y recomendados. Las plantillas integradas te ahorran tiempo y te ayudan a seguir las prácticas recomendadas de diseño.

Cada plantilla incorpora una actividad esqueleto y una interfaz de usuario. Ya usaste la plantilla Empty Activity en este curso. La plantilla de actividad básica tiene más funciones y contiene las funciones recomendadas de la app, como el menú de opciones que aparece en la barra de la app en dispositivos con Android.

Paso 1: Explora la arquitectura de Basic Activity

  1. En Android Studio, crea un proyecto.
  2. En el diálogo Choose your project, selecciona la plantilla Basic Activity y haz clic en Next.
  3. En el diálogo Configure your project, ponle el nombre que quieras a la app. Selecciona Kotlin como lenguaje y marca la casilla de verificación Use AndroidX artifacts. Haz clic en Finish.
  4. Compila la app y ejecútala en un emulador o en un dispositivo con Android.
  5. Identifica las partes etiquetadas en la siguiente figura y tabla. Busca sus equivalentes en la pantalla del dispositivo o emulador. Inspecciona el código Kotlin y los archivos XML correspondientes que se describen en la tabla.

Familiarizarte con el código fuente de Kotlin y los archivos XML te ayudará a extender y personalizar la plantilla de Basic Activity para tus propias necesidades.

Arquitectura de la plantilla de actividad básica

#

Descripción de la IU

Referencia de código

1

Barra de estado, que el sistema Android proporciona y controla.

No se ve en el código de la plantilla, pero puedes acceder a la barra de estado desde tu actividad. Por ejemplo, puedes agregar código en MainActivity.kt para ocultar la barra de estado, si es necesario.

2

La barra de la app, también llamada barra de acciones, proporciona estructura visual, elementos visuales estandarizados y navegación.

En activity_main.xml, busca Barra de herramientas.

dentro del elemento AppBarLayout Para la retrocompatibilidad, el AppBarLayout de la plantilla incorpora un Toolbar que tiene la misma funcionalidad que un ActionBar.

Para cambiar la apariencia de la barra de la app, cambia los atributos de la barra de herramientas. Para ver instructivos sobre la barra de la app, consulta Cómo agregar la barra de la app.

3

Inicialmente, el nombre de la app se deriva del nombre del paquete, pero puedes cambiarlo por el que quieras.

En AndroidManifest.xml, busca

android:label="@string/app_name".

Especifica la cadena app_name en strings.xml.

4

El botón de menú ampliado del menú de opciones contiene elementos de menú para la actividad. El botón de menú ampliado también contiene opciones de menú globales, como Buscar y Configuración para la app. Los elementos del menú de tu app se incluyen en este menú.

En MainActivity.kt, el

El método onOptionsItemSelected() implementa lo que sucede cuando el usuario selecciona un elemento de menú.

Para ver los elementos del menú de opciones, abre res/menu/menu_main.xml.

en el archivo de especificación. En esta plantilla, solo se especifica el elemento de menú Configuración.

5

El CoordinatorLayout ViewGroup es un diseño que proporciona mecanismos para que interactúen los elementos de la IU. La IU de tu app se encuentra dentro del archivo content_main.xml, que se incluye en este ViewGroup.

En activity_main.xml, busca la instrucción include layout. En este diseño, no se especifican vistas; en cambio, se incluye el diseño content_main, en el que se especifican las vistas de la app. Las vistas del sistema se mantienen separadas de las vistas exclusivas de tu app.

6

La plantilla usa un TextView para mostrar "Hello World". Reemplaza este TextView por los elementos de la IU de tu app.

La vista de texto "Hello World" se encuentra en el archivo content_main.xml. Todos los elementos de la IU de tu app deben definirse en este archivo.

7

Botón de acción flotante (BAF)

En activity_main.xml, busca el elemento FloatingActionButton. El BAF se define como un elemento de la IU con un ícono de imágenes prediseñadas. MainActivity.kt incluye un código auxiliar en onCreate() que establece un objeto de escucha onClick() para el BAF.

Paso 2: Personaliza la app que produce la plantilla

Cambia la apariencia de la app producida por la plantilla Basic Activity. Por ejemplo, puedes cambiar el color de la barra de la app para que coincida con el de la barra de estado. (En algunos dispositivos, la barra de estado tiene un tono más oscuro del mismo color principal que usa la barra de la app).

  1. Cambia el nombre de la app que muestra la barra de la app. Para ello, cambia el recurso de cadena app_name en el archivo res > values > strings.xml por el siguiente: 
<string name="app_name">New Application</string>
  1. Cambia el color de la barra de la app (Toolbar) en res > layout > activity_main.xml. Para ello, cambia el atributo android:background a "?attr/colorPrimaryDark". Este valor establece el color de la barra de la app en un color principal más oscuro que coincide con la barra de estado:
android:background="?attr/colorPrimaryDark"
  1. Ejecuta la app. El nuevo nombre de la app aparece en la barra de estado, y el color de fondo de la barra de la app es más oscuro y coincide con el color de la barra de estado. Cuando haces clic en el BAF, aparece una barra de mensajes, como se muestra en el número 1 de la siguiente captura de pantalla.
  2. Cambia el texto de la barra de mensajes. Para ello, abre MainActivity y busca el código auxiliar en onCreate() que establece un objeto de escucha onClick() para el botón. Cambia "Replace with your own action" por otra cosa. Por ejemplo:
fab.setOnClickListener { view ->
   Snackbar.make(view, "This FAB needs an action!", Snackbar.LENGTH_LONG)
       .setAction("Action", null).show()
}
  1. El BAF usa el color de énfasis de la app, por lo que una forma de cambiar el color del BAF es cambiar el color de énfasis. Para cambiar el color de énfasis, abre el archivo res > values > colors.xml y cambia el atributo colorAccent, como se muestra a continuación. (Para obtener ayuda para elegir colores, consulta el sistema de colores de Material Design).
<color name="colorAccent">#1DE9B6</color>
  1. Ejecuta la app. El BAF usa el nuevo color y el texto de la barra de mensajes cambió.

Paso 3: Explora cómo agregar actividades con plantillas

En los codelabs de este curso hasta ahora, usaste las plantillas Empty Activity y Basic Activity para iniciar proyectos nuevos. También puedes usar plantillas de actividades cuando crees actividades después de que se haya creado tu proyecto.

  1. Crea un proyecto de app o elige uno existente.
  2. En el panel Project > Android, haz clic con el botón derecho en la carpeta java.
  3. Selecciona New > Activity > Gallery.
  4. Selecciona una de las plantillas Activity para agregar una actividad a la app. Por ejemplo, selecciona Navigation Drawer Activity para agregar un Activity que tenga un panel lateral de navegación.
  5. Para mostrar la actividad en el editor de diseño, haz doble clic en el archivo de diseño de la actividad (por ejemplo, activity_main2.xml). Usa las pestañas Diseño y Texto para cambiar entre la vista previa del diseño de la actividad y el código de diseño.

Los repositorios de Google Samples en GitHub proporcionan muestras de código de Kotlin para Android que puedes estudiar, copiar e incorporar a tus proyectos.

Paso 1: Descarga y ejecuta una muestra de código de Kotlin para Android

  1. En un navegador, ve a github.com/googlesamples.
  2. En Language, selecciona Kotlin.
  3. Selecciona una app de muestra para Android en Kotlin que se haya modificado recientemente y descarga el código del proyecto de la app. Para este ejemplo, descarga el archivo ZIP de la app android-sunflower, que muestra algunos de los componentes de Android Jetpack.
  4. En Android Studio, abre el proyecto android-sunflower-master.
  5. Acepta las actualizaciones que recomiende Android Studio y, luego, ejecuta la app en un emulador o en un dispositivo con Android.

Paso 2: Explora una muestra de código de Kotlin para Android

Ahora que tienes abierta la app de ejemplo de Android Sunflower en Android Studio, obtén información sobre la app y explora sus archivos de proyecto.

  1. Para obtener información sobre lo que demuestra una app de ejemplo, visita el archivo README de la app en GitHub. Para ver este ejemplo, consulta el archivo README de Sunflower para Android.
  2. En Android Studio, abre uno de los archivos de actividad de Kotlin en la app, por ejemplo, GardenActivity.kt.
  3. En GardenActivity.kt, busca una clase, un tipo o un procedimiento con el que no estés familiarizado y búscalo en la documentación para desarrolladores de Android. Por ejemplo, para obtener más información sobre el método setContentView(), busca setContentView() en developer.android.com.

Paso 3: Cambia el ícono de selector

En este paso, cambiarás el ícono de selector de la app de ejemplo de Sunflower para Android. Agregarás una imagen prediseñada y la usarás para reemplazar el ícono de selector actual de Sunflower para Android.

Íconos de selector

Cada app que creas con Android Studio comienza con un ícono de selector predeterminado que la representa. A veces, los íconos de selector se denominan íconos de app o íconos de producto.

Si publicas una app en Google Play, el ícono de la app aparecerá en la ficha y en los resultados de la búsqueda de la app en Play Store.

Después de instalar una app en un dispositivo con Android, el ícono de selector de la app aparece en la pantalla principal y en otros lugares del dispositivo. Por ejemplo, el ícono de selector de la app de Sunflower para Android aparece en la ventana Buscar apps del dispositivo, como se muestra en el número 1 de la siguiente captura de pantalla. El ícono de selector predeterminado, que se muestra como 2 a continuación, se usa inicialmente para todos los proyectos de apps que creas en Android Studio.

Cómo cambiar el ícono de selector

El proceso de cambio del ícono de selector te presenta las funciones de recursos de imágenes de Android Studio.

En Android Studio, sigue estos pasos para cambiar el ícono de selector de la app de Android Sunflower:

  1. En el panel Project > Android, haz clic con el botón derecho (o presiona Control y haz clic) en la carpeta res. Selecciona New > Image Asset. Aparecerá el diálogo Configure Image Asset.

Haz clic en la pestaña Foreground Layer del ícono de selector.

  1. En el campo Icon Type, selecciona Launcher Icons (Adaptive & Legacy) si aún no está seleccionado. Haz clic en la pestaña Capa de primer plano.
  2. En Asset Type, selecciona Clip Art, como se muestra en 1 en la siguiente captura de pantalla.

  3. Haz clic en el ícono de robot en el campo Clip Art, que se muestra como 2 en la captura de pantalla anterior. Aparecerá el diálogo Select Icon, en el que se muestra el conjunto de íconos de Material Design.
  4. Navega por el diálogo Select Icon o busca un ícono por su nombre. Selecciona un ícono, como el de estado de ánimo, para sugerir un buen estado de ánimo. Haz clic en OK.

  1. En el diálogo Configure Image Asset, haz clic en la pestaña Background Layer. En Asset Type, selecciona Color. Haz clic en la muestra de color y selecciona un color para usarlo como capa de fondo del ícono.
  2. Haz clic en la pestaña Heredado y revisa la configuración predeterminada. Confirma que deseas generar íconos heredados, redondos y de Google Play Store. Haz clic en Siguiente.
  3. Aparecerá el diálogo Confirm Icon Path, que muestra dónde se agregan y reemplazan los archivos de íconos. Haz clic en Finish.
  4. Ejecuta la app en un emulador de AVD o en un dispositivo que ejecute Android.

Android Studio agrega automáticamente las imágenes de selector a los directorios mipmap para las diferentes densidades de pantalla. La app de Sunflower para Android ahora usa el nuevo ícono de clip art como ícono de inicio.

  1. Vuelve a ejecutar la app. Asegúrate de que el nuevo ícono del selector aparezca en la pantalla de búsqueda de apps.

Paso 1: Explora la documentación oficial de Android

Explora algunos de los sitios de documentación de Android más útiles y familiarízate con lo que está disponible:

  1. Visita developer.android.com. Google mantiene actualizada esta documentación oficial para desarrolladores de Android.
  2. Ve a developer.android.com/design/. En este sitio, se ofrecen lineamientos para diseñar el aspecto y la funcionalidad de apps para Android de alta calidad.
  3. Dirígete a material.io, un sitio sobre Material Design. Material Design es una filosofía de diseño conceptual que describe cómo deberían verse y funcionar todas las apps, no solo las de Android, en los dispositivos móviles. Navega por los vínculos para obtener más información sobre Material Design. Por ejemplo, para obtener información sobre el uso del color, haz clic en la pestaña Diseño y, luego, selecciona Color.
  4. Visita developer.android.com/docs/ para encontrar información sobre la API, documentación de referencia, instructivos, guías de herramientas y muestras de código.
  5. Visita developer.android.com/distribute/ para obtener información sobre cómo publicar una app en Google Play. Google Play es el sistema de distribución digital de Google para las apps desarrolladas con el SDK de Android. Usa Google Play Console para aumentar tu base de usuarios y comenzar a ganar dinero.

Paso 2: Explora el contenido del equipo de Android y la Búsqueda de Google

  1. Explora el canal de YouTube de Android Developers, que es una excelente fuente de instructivos y sugerencias.
  2. Visita el blog oficial de Android, en el que el equipo de Android publica noticias y sugerencias.
  3. Ingresa una pregunta en la Búsqueda de Google y el motor de búsqueda recopilará resultados pertinentes de varios recursos. Por ejemplo, usa la Búsqueda de Google para hacer la pregunta: "¿Cuál es la versión del SO Android más popular en la India?". Incluso puedes ingresar mensajes de error en la Búsqueda de Google.

Paso 3: Busca en Stack Overflow

Stack Overflow es una comunidad de programadores que se ayudan entre sí. Si tienes un problema, es muy probable que alguien ya haya publicado una respuesta.

  1. Ve a Stack Overflow.
  2. En el cuadro de búsqueda, ingresa una pregunta, como "¿Cómo configuro y uso ADB a través de Wi-Fi?". Puedes buscar en Stack Overflow sin registrarte, pero, si quieres publicar una pregunta nueva o responder una, debes registrarte.
  3. En el cuadro de búsqueda, ingresa [android]. Los corchetes [] indican que deseas buscar publicaciones etiquetadas como relacionadas con Android.
  4. Puedes combinar etiquetas y términos de búsqueda para que tu búsqueda sea más específica. Prueba estas búsquedas:
  • [android] and [layout]
  • [android] "hello world"

Paso 4: Usa SDK Manager para instalar la documentación sin conexión

Cuando instalas Android Studio, se instalan junto con él los componentes esenciales del SDK de Android. Para instalar otras bibliotecas y documentación disponibles, usa SDK Manager.

Para explorar SDK Manager y descargar la documentación del SDK, sigue estos pasos:

  1. En Android Studio, selecciona Tools > SDK Manager. Se abrirá el SDK Manager.
  2. En la columna izquierda de SDK Manager, selecciona Android SDK (1 en la captura de pantalla a continuación).
  3. Observa la ruta de acceso en el campo Android SDK Location (2 en la captura de pantalla a continuación). Usarás esta ruta más adelante para encontrar lo que instales.
  4. En SDK Manager, haz clic en la pestaña SDK Platforms. Desde aquí, puedes instalar más versiones del sistema Android.
  5. Haz clic en la pestaña SDK Tools. Desde aquí, puedes instalar herramientas para desarrolladores del SDK que no se instalan de forma predeterminada. También puedes instalar una versión sin conexión de la documentación para desarrolladores de Android.
  6. Haz clic en la pestaña SDK Update Sites. Android Studio revisa los sitios seleccionados y enumerados con regularidad para detectar actualizaciones.
  7. Vuelve a la pestaña SDK Tools y selecciona la casilla de verificación Documentation for Android SDK si aún no está seleccionada. Haz clic en Aplicar.

    Se abrirá un diálogo de confirmación que te mostrará cuánto espacio en disco requiere la descarga. Haz clic en Aceptar.
  8. Cuando finalice la instalación, haz clic en Finish.

Para encontrar la documentación que instalaste, sigue estos pasos:

  1. En tu computadora, navega al directorio Android/sdk/. (Para encontrar la ruta de acceso al directorio, consulta el campo Android SDK Location, que se muestra como 2 en la captura de pantalla anterior).
  2. Abre el directorio docs/.
  3. Busca el archivo index.html y ábrelo en un navegador.
  • La documentación oficial para desarrolladores de Android se encuentra en developer.android.com.
  • Material Design es una filosofía de diseño conceptual que describe cómo deben verse y funcionar las apps en dispositivos móviles. Material Design no es solo para apps para Android. Los lineamientos de Material Design se encuentran en material.io.
  • Android Studio proporciona plantillas para diseños de apps y actividades comunes y recomendados. Estas plantillas ofrecen código funcional para casos de uso comunes.
  • Cuando creas un proyecto, puedes elegir una plantilla para tu primera actividad.
  • Mientras desarrollas tu app, puedes crear actividades y otros componentes de la app a partir de plantillas integradas.
  • Google Samples contiene muestras de código que puedes estudiar, copiar e incorporar en tus proyectos.

Curso de Udacity:

Documentación de Android Studio:

Documentación para desarrolladores de Android:

Muestras de código:

Videos:

Otros recursos:

Comienza la siguiente lección: 2.1: Diseño lineal con el editor de diseño

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.