Impresionantes componentes de arquitectura con Kotlin: iconos de aplicaciones que son adaptativos

Ventana de configuración de iconos adaptable en Android Studio

Todos ustedes ya deben haber escuchado acerca de Kotlin, Dagger 2, Android Architecture Components, Retrofit 2, íconos adaptativos y muchas otras características y avances increíbles en Android. Recientemente, Google lanzó la vista previa de Android P Developer también. He estado leyendo mucho sobre estos temas candentes durante bastante tiempo e intenté usarlos también en mis aplicaciones. Así que aquí está mi primer intento de aprender algo nuevo y compartir mi conocimiento con la comunidad misma.
Escribiré una serie en la que principalmente me centraré y demostraré los beneficios de estas pilas tecnológicas mencionadas anteriormente mediante el desarrollo de una aplicación de Android basada en Kotlin en la que podemos buscar usuarios de GitHub utilizando la API de búsqueda de GitHub.

¿Me siento emocionado? Solo sube. Será un viaje divertido.

Contenido

  1. Iconos de aplicaciones que son adaptativos
  2. Inyectar dependencias usando Dagger 2
  3. Haciendo algo de espacio
  4. Seguiremos agregando más puntos en futuros blogs de esta serie.

Iconos de aplicaciones que son adaptativos

En la E / S de Google del año pasado17, Google introdujo iconos de iniciador adaptativo en el sistema operativo Android Oreo (API nivel 26). Una forma nueva, elegante y elegante de diseñar el logotipo de cualquier aplicación. Con este nuevo formato, el ícono del iniciador de nuestra aplicación se puede mostrar en una variedad de formas en diferentes fabricantes de equipos originales, lo que significa que un ícono adaptativo puede mostrar un ícono de forma circular en un dispositivo y un ícono con forma de escuadrón en otro dispositivo.

Por lo tanto, la forma del icono del iniciador de nuestra aplicación puede variar de:

Icono adaptativo en forma de círculoIcono adaptativo en forma cuadradaIcono adaptativo redondeado en forma cuadradaIcono adaptativo en forma de squaricle

dependiendo de la máscara predeterminada proporcionada por el OEM compatible con el teléfono inteligente, que el sistema utiliza para representar todos los iconos adaptativos en la misma forma disponible en su dispositivo.

Lo esencial

Los componentes más importantes en el icono adaptativo son sus capas de primer plano y fondo. Para crear un ícono adaptativo, necesitamos separar el ícono del iniciador en dos partes mencionadas anteriormente (capa de primer plano y capa de fondo).

Las dimensiones de los íconos del iniciador eran de 48 x 48 dp en la versión de Android 7.1 y anteriores. Pero de acuerdo con la documentación oficial sobre el ícono Adaptive de Google, las aplicaciones deben seguir un conjunto específico de pautas para crear ambas capas del ícono adaptativo, es decir:

  • Las capas de primer plano y de fondo deben tener un tamaño de 108 x 108 dp (en donde la capa de fondo debe ser opaca y la capa de primer plano puede tener transparencia).
Tamaño del icono del iniciador (fuente)
  • El ícono del iniciador debe estar dentro de la máscara, es decir, 72 x 72 dp.
Animación de enmascaramiento OEM (fuente)
  • Hay un espacio adicional de 18 dp por cada lado, reservado para que los fabricantes de equipos originales realicen diferentes tipos de efectos visuales como paralaje, pulsos o muchos otros efectos.
Efectos visuales (fuente)

Oh! Hay una cosa más que necesito decir, las capas de primer plano y de fondo pueden ser de formato .svg o .png. Compartiré un enlace en la sección de referencias de este blog, desde donde aprendí cómo crear una capa en primer plano del icono del iniciador.

Acercarse a, aproximarse

Hay dos enfoques para crear el ícono Adaptativo, es decir,

  1. Uso de la función Image Asset en el propio Android Studio (uno sencillo y bastante sencillo).
  2. Crear un archivo XML de tipo por usted mismo.

Veremos el primer enfoque en este blog. Pero antes de comenzar, hay un requisito previo que debe tenerse en cuenta para crear el ícono adaptativo.

Su aplicación debe tener una versión targetdkversion de 26 o superior.

Primer enfoque

Es un enfoque más fácil, simplemente siguiendo los pasos:

  1. Haga clic derecho en la carpeta res y seleccione la opción Nuevo> Activo de imagen. Se verá así:

2. Ahora, después del Paso 1, podremos ver una ventana de Configuración de activos de imagen como esta:

Hay varias opciones disponibles como todos podemos ver en esta ventana de configuración. Echaremos un vistazo a las opciones requeridas para crear un ícono adaptativo en los siguientes pasos.

3. En este paso, hay ciertas opciones que dejaremos como están, que son:

  • Dejaremos la opción Tipo de ícono, ya que está seleccionada de manera predeterminada con los íconos del Iniciador (Adaptativo y Legado).
  • El nombre del icono del iniciador está escrito como ic_launcher, puede cambiar el nombre según sus necesidades.
  • Hay dos botones de alternancia disponibles en esta ventana de configuración que son: Mostrar zona segura (para alternar la visibilidad de la zona segura en la ventana de vista previa del icono del iniciador) y Mostrar cuadrícula (para alternar la visibilidad de las formas de las líneas clave que ayudan a establecer la proporción del icono consistente) .
  • Hay tres pestañas llamadas Capa de primer plano, Capa de fondo y Legado disponibles en la ventana de configuración. Los admiraremos en los siguientes pasos.

4. Después de seguir el Paso 3, avanzaremos para agregar nuestro archivo background.svg o background.png. He creado mi archivo background.png de dimensión 432 x 432 px usando GIMP v2.8, se ve así:

background.png (432 x 432 px)

Simplemente dando un resumen de la sección de la capa de fondo: tiene campos como:

  • Nombre: establezca el nombre de su capa de fondo según sus requisitos.
  • Tipo de activo: Seleccione el tipo de imagen, ya que estamos utilizando archivos .svg o .png para la capa de fondo.
  • Ruta: seleccione la ruta adecuada de su archivo de fondo.

Después de agregar el archivo de fondo a la capa de fondo en la ventana de configuración de imagen, veremos los cambios de esta manera:

Icono del iniciador después de seleccionar la imagen de fondo

5. Después del Paso 4, seleccionaremos la pestaña Capa de primer plano y agregaremos nuestro archivo foreground.svg o foreground.png que nuevamente tiene las mismas dimensiones que nuestro archivo de fondo. He creado mi archivo de primer plano utilizando GIMP v2.8 en sí mismo siguiendo las pautas mencionadas anteriormente en este artículo. Además, compartiré un enlace en la sección de recursos a continuación sobre cómo crear un logotipo de tipo de texto simple con una larga sombra, mientras tanto, el logotipo se ve así:

foreground.png (432 x 432 px)

Al igual que seleccionamos el Nombre y el Tipo de activo en la capa de fondo, también haremos lo mismo para la capa de primer plano. Entonces, después de seleccionar la ruta del archivo de primer plano a la capa de primer plano en la ventana de configuración de imagen, veremos los cambios de esta manera:

Icono del iniciador después de seleccionar la imagen en primer plano

6. Este paso será nuestro segundo último paso, seleccionaremos la pestaña heredada y allí tenemos tres opciones:

Icono heredado y otras opciones de icono

Esta pestaña generará tres tipos de íconos adicionales, es decir, Legacy Icon, Round Icon e Google Play Store Icon. Tenemos opciones de sí o no para cada tipo de icono. Entonces generaremos todos los íconos para nuestra aplicación y presionaremos Siguiente.

7. Después de seguir todos los pasos, Android Studio generará todos los archivos de salida en la carpeta mipmap y separará todos los archivos en ppp. Echemos un vistazo a esta ventana de salida:

Ventana de resumen del archivo de salida

Como podemos ver, hay dos archivos XML de íconos de iniciador, uno para ícono normal y otro para ícono redondo, que tienen etiquetas y especifican los elementos dibujables en primer plano y en segundo plano por separado en un mipmap carpeta anydpi-v26. Entonces, después de verificar todas las carpetas y archivos, ¡finalmente haremos clic en Finalizar y listo! Nuestro ícono adaptativo está listo.

Veamos la magia de nuestro ícono adaptativo:

Ícono adaptativo de la aplicación GSearch

De eso se trata el ícono adaptativo. Puedes encontrar el código fuente aquí:

En la segunda parte de esta serie, explicaré cómo funciona la inyección de dependencia utilizando Dagger y el proceso para integrarlo en esta aplicación. Manténganse al tanto…

Recursos

Estos son los recursos que seguí para implementar el ícono adaptativo. Todos ustedes también pueden ver estos recursos.

  1. Diseño de icono adaptativo por Nick Butcher
  2. Iconos adaptativos y más - por StylingAndroid
  3. Para probar el ícono adaptativo
  4. Cómo hacer una sombra larga plana en GIMP

Con suerte, este blog ayudará a crear iconos adaptativos increíbles y geniales para su aplicación. Si tiene algunas sugerencias para implementar iconos adaptativos, hágamelo saber en la sección de comentarios.

Gracias por leer. Además, puedes Si te gusta y disfrutas leyendo este artículo, entonces solo .

Sigueme en Twitter: