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 en secuencia. Todos los codelabs del curso se detallan en la página de destino de codelabs sobre los aspectos básicos de Kotlin para Android.

Introducción

En este codelab, aprenderás sobre recursos útiles para los desarrolladores de Kotlin de Android, como las plantillas, la documentación, los videos y las apps de muestra.

Conocimientos que ya deberías tener

  • Flujo de trabajo básico de Android Studio
  • Cómo usar el editor de diseño de 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 desarrolladores de Android de Kotlin de todos los niveles.
  • Descarga y explora una app de muestra de Kotlin para Android.
  • Cambiar el ícono de selector de una app

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

Primero, crea una app simple a partir de una plantilla de Android Studio y modifica la app. Luego, descarga y explora la app de ejemplo de Android Sunflower. Debes reemplazar el ícono de selector de la aplicación de muestra (un girasol) por un elemento de imagen de arte gráfico disponible en Android Studio (una cara sonriente).

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

Cada plantilla incorpora una estructura básica de actividad y una interfaz de usuario. Ya usaste la plantilla de actividad vacía en este curso. La plantilla de actividad básica tiene más funciones e incorpora funciones de apps recomendadas, como el menú de opciones que aparece en la barra de la app en dispositivos con Android.

Paso 1: Explora la arquitectura de actividad básica

  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, asígnale un nombre a la app que quieras. Selecciona Kotlin para el idioma y selecciona la casilla de verificación Use AndroidX artifacts. Haz clic en Finish.
  4. Compila la app y ejecútala en un emulador o dispositivo con Android.
  5. Identifica las partes etiquetadas en la siguiente figura y la tabla. Encuentra sus equivalentes en el dispositivo o en la pantalla del 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 en formato XML te ayudará a extender y personalizar la plantilla de actividad básica 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 proporciona y controla el sistema Android.

No es visible en el código de la plantilla, pero puede acceder a la barra de estado de su 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 Toolbar.

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

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

3

El nombre de la app se deriva inicialmente del nombre del paquete, pero puedes cambiarlo por lo que quieras.

En AndroidManifest.xml, busca

android:label="@string/app_name".

Especifica la string app_name en strings.xml.

4

El botón del menú ampliado de opciones contiene los elementos del menú para la actividad. El botón ampliado también ofrece opciones del menú general, como la Búsqueda y la Configuración de la app. Los elementos del menú se envían a este menú.

En MainActivity.kt, la

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 la res/menu/menu_main.xml

file. Solo el elemento de menú Configuración está especificado en esta plantilla.

5

El CoordinatorLayout ViewGroup es un diseño que brinda mecanismos para la interacción de los elementos de la IU. La IU de tu app está dentro del archivo content_main.xml, que se incluye en este ViewGroup.

En activity_main.xml, busca la instrucción include layout. No se especificaron vistas en este diseño. En cambio, el diseño 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 únicas de tu app.

6

La plantilla usa una TextView para mostrar &Hello; Reemplazas esta 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 que usa un ícono de imagen prediseñada. MainActivity.kt incluye un stub en onCreate() que configura un objeto de escucha onClick() para el BAF.

Paso 2: Personaliza la app que genera la plantilla

Cambia el aspecto de la app que produce la plantilla Actividad básica. Por ejemplo, puedes cambiar el color de la barra de la app para que coincida con la barra de estado. (En algunos dispositivos, la barra de estado es un tono más oscuro del mismo color principal que usa la barra de la app).

  1. Cambiar el nombre de la app que muestra la barra de la app Para ello, cambia el recurso de strings app_name en el archivo res > values > strings.xml por lo siguiente: 
<string name="app_name">New Application</string>
  1. Para cambiar el color de la barra de la aplicación (Toolbar) en res > layout > activity_main.xml, cambia el atributo android:background a "?attr/colorPrimaryDark". Este valor establece el color de la barra de la aplicación en un color primario más oscuro que coincide con la barra de estado:
android:background="?attr/colorPrimaryDark"
  1. Ejecuta la app. El nombre nuevo de la app aparecerá en la barra de estado, y el color de fondo de la barra de la app será más oscuro y coincidirá con el de la barra de estado. Cuando hagas clic en el BAF, aparecerá una barra de notificaciones como 1 en la siguiente captura de pantalla.
  2. Cambiar el texto de la barra de notificaciones 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" a otro elemento. 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 los elementos destacados de la app, por lo que una forma de cambiar ese color es cambiar el color de los elementos destacados. Para cambiar el color de los elementos destacados, abre el archivo res > values >colors.xml y cambia el atributo colorAccent, como se muestra a continuación. Si deseas obtener ayuda para elegir los 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 cambió el texto de la barra de notificaciones.

Paso 3: Explora cómo agregar actividades mediante plantillas

Hasta ahora, para los codelabs de este curso, usaste las plantillas Actividad vacía y Actividad básica para comenzar proyectos nuevos. También puedes usar plantillas de actividades cuando creas actividades después de crear 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. Para agregar una actividad a la app, selecciona una de las plantillas de Activity. Por ejemplo, selecciona Actividad del panel lateral de navegación para agregar un elemento 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 la pestaña Design y la pestaña Text para alternar entre la vista previa de diseño 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, incorporar y copiar en tus proyectos.

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

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

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

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

  1. Para obtener información sobre lo que demuestra una app de muestra, visita el archivo README de la app en GitHub. Para ver este ejemplo, consulta el archivo README de Android Sunflower.
  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, tipo o 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(), haz una búsqueda en developer.android.com a fin de encontrar setContentView().

Paso 3: Cambia el ícono de selector

En este paso, cambiarás el ícono de selector de la app de ejemplo de Android Sunflower. Debes agregar una imagen prediseñada y reemplazarla por el ícono actual de Android Sunflower.

Íconos de selector

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

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

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

Cómo cambiar el ícono de selector

Si realizas un cambio en el ícono de selector, accederás a las funciones de los elementos de imagen de Android Studio.

En Android Studio, a continuación, te mostramos cómo 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 Control + clic) en la carpeta res. Selecciona New > Image Asset. Aparecerá el diálogo Configure Image Asset.

Haz clic en la pestaña de la capa en primer plano para acceder al ícono del selector.

  1. En el campo Icon Type, selecciona Launcher Icons (Adaptive & Legacy) si todavía no está seleccionado. Haz clic en la pestaña Foreground Layer.
  2. En Asset Type, selecciona Clip Art, que se muestra como 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 de arriba. Aparecerá el diálogo Select Icon con el ícono de Material Design configurado.
  4. Explora el diálogo Select Icon o busca un ícono por nombre. Seleccione 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, haga clic en la pestaña Background Layer. En Asset Type, selecciona Color. Haz clic en el chip de color y selecciona un color para usarlo como capa de fondo en el ícono.
  2. Haga clic en la pestaña Legacy y revise la configuración predeterminada. Confirma que quieres generar íconos heredados, redondos y de Google Play Store. Haz clic en Next.
  3. Aparecerá el diálogo Confirm Icon Path, en el que se muestra dónde se agregan y reemplazan los archivos de ícono. Haz clic en Finish.
  4. Ejecuta la app en un emulador de AVD o dispositivo con Android.

Android Studio agrega automáticamente las imágenes de selector a los directorios mipmap según las diferentes densidades de pantalla. La app de Android Sunflower ahora usa el nuevo ícono de imágenes prediseñadas como ícono de lanzamiento.

  1. Vuelve a ejecutar la app. Asegúrate de que el nuevo ícono de selector aparezca en la pantalla Search 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. Ve a developer.android.com. Esta documentación oficial para desarrolladores de Android se mantiene actualizada en Google.
  2. Ve a developer.android.com/design/. Este sitio ofrece lineamientos para diseñar la apariencia y la funcionalidad de apps de alta calidad para Android.
  3. Ve a material.io, que es un sitio de Material Design. Material Design es una filosofía de diseño conceptual que describe cómo todas las apps, no solo las de Android, deben verse y funcionar en 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 Design y, luego, selecciona Color.
  4. Ve a developer.android.com/docs/ para encontrar información de API, documentación de referencia, instructivos, guías de herramientas y muestras de código.
  5. Para obtener información sobre cómo publicar una app en Google Play, ve a developer.android.com/distribute/. Google Play es el sistema de distribución digital de Google Play 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 para desarrolladores de Android, que es una gran fuente de instructivos y sugerencias.
  2. Visita el blog oficial de Android, donde el equipo de Android publica noticias y sugerencias.
  3. Ingresa una pregunta en la Búsqueda de Google para que el motor de la Búsqueda de Google recopile resultados relevantes de diversos recursos. Por ejemplo, usa la Búsqueda de Google para hacer la pregunta "¿Cuál es la versión más popular de SO Android en la India?" Incluso puedes ingresar mensajes de error en la Búsqueda de Google.

Paso 3: Buscar 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 mediante Wi-Fi?". Puedes realizar búsquedas en Stack Overflow sin registrarte, pero si deseas 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 que se etiquetaron 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 el Administrador de SDK para instalar la documentación sin conexión

Cuando instalas Android Studio, se instalan 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 de SDK, sigue estos pasos:

  1. En Android Studio, selecciona Tools > SDK Manager. Se abrirá SDK Manager.
  2. En la columna izquierda de SDK Manager, selecciona Android SDK(1 en la siguiente captura de pantalla).
  3. Observa la ruta de acceso en el campo Android SDK Location (2 en la siguiente captura de pantalla). Usarás esta ruta más adelante para buscar 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 de SDK que no están instaladas 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 comprueba regularmente si hay actualizaciones en los sitios seleccionados y seleccionados.
  7. Regresa a la pestaña SDK Tools y selecciona la casilla de verificación documentation for Android SDK si aún no se seleccionó. Haz clic en Aplicar.

    Se abrirá un diálogo de confirmación en el que se mostrará el espacio en disco que 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 la computadora, navega al directorio Android/sdk/. (Para encontrar la ruta de acceso al directorio, consulta el campo Android SDK Location, que se muestra 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 está en developer.android.com.
  • Material Design es una filosofía de diseño conceptual que describe la apariencia y el funcionamiento de las apps en dispositivos móviles. Material Design no es solo para apps de Android. Los lineamientos de Material Design se encuentran en material.io.
  • Android Studio proporciona plantillas para diseños comunes y recomendados de apps y actividades. Estas plantillas ofrecen código de trabajo 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 a partir de plantillas integradas.
  • Muestras de Google contiene muestras de código que puedes estudiar, incorporar y copiar 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 ver vínculos a otros codelabs de este curso, consulta la página de destino de codelabs sobre aspectos básicos de Kotlin para Android.