Íconos de la aplicación Material You: Part Way allí | Oliver Spring | Noviembre de 2021
Primero, recomiendo extraer todos los colores de su marca de los activos vectoriales del icono y moverlos al valor predeterminado colors.xml
documento.Una vez hecho esto, su activo vectorial no debe definir ningún color por sí solo, sino que debe hacer referencia a cada color a través de él. @color
Identificador de recurso.
Mi ejemplo es muy sencillo. Necesito crear dos colores, uno para el fondo y otro para el primer plano.
Observe cómo todas las definiciones de color residen en los valores predeterminados. colors.xml
documento.A continuación, necesitamos un colors.xml
por night-v31
Variantes.
Para las variantes del modo oscuro, Android prefiere usar @android:color/system_accent1_100
Como color principal del icono, y @android:color/system_neutral1_800
Como color principal del fondo.
Por supuesto, si necesita expresar iconos más complejos, puede desviarse libremente del esquema, pero es útil no desviarse demasiado de esta línea de base al completar el resto de la imagen. La página de tema de 3 colores de Material de Google le brinda una comprensión más profunda de las bandejas estándar entre las que puede elegir. Debe ceñirse a esta paleta de colores predefinida en el Material 3 para que pueda beneficiarse de los temas definidos por el sistema.
Finalmente, necesitamos un notnight-v31
Variante de colors.xml
.
Una vez más, debemos elegir entre las opciones de color estándar para que coincida con el trabajo que ha realizado Google en otras aplicaciones. Aquí, todo lo que tenemos que hacer es intercambiar los roles de los colores primarios de fondo y de primer plano.
Después de seleccionar un tema para su dispositivo e instalar la aplicación por primera vez, el icono en el iniciador de aplicaciones responde como se esperaba:
Sin embargo, encontramos nuestro primer problema en la lista de aplicaciones, donde el color de la marca no se usa como otras aplicaciones:
Una vez que se cambia nuestro icono, no seguirá el color del sistema:
Curiosamente, puede ver que el icono sobre la aplicación en la lista de tareas ha respondido a la solicitud de cambio:
Al arrastrar el ícono de la lista de aplicaciones al lanzador, se mostrará el color correcto. Una vez que se toma el ícono, antes de colocarlo en la ubicación final:
Sin embargo, desinstalar y reinstalar la aplicación parece resolver este problema:
El cambio entre los modos claro y oscuro parece tener efecto de inmediato. En algunos casos, descubrí que esta situación también debe reinstalarse:
Finalmente, después de que desactivé la configuración del ícono del tema, todos los íconos excepto este reflejaron los cambios:
Si bien este puede ser un resumen decepcionante para un esfuerzo honesto, proporciona algunas ideas sobre cómo Google ha implementado esto en sus propias aplicaciones. Hemos desarrollado con éxito una combinación de colores para temas claros y oscuros, pero no podemos usar los colores de nuestra marca ni cambiar el color de los iconos como se indica.
Antes de que Google publique algunas pautas oficiales sobre esta función personalizada, sugiero posponerla hasta que se puedan resolver estas situaciones extremas. Por un lado, espero algún día tener la oportunidad de usarlo en mi aplicación. Por lo tanto, puede estar seguro de que prestaré mucha atención al anuncio oficial.
La mayor parte del trabajo de descubrimiento depende de la comunidad. Quiero agradecer a estos recursos por señalarme en la dirección correcta:
Este artículo se publicó originalmente en https://oliverspryn.com/