Personaliza tu app

Una vez que hayas determinado las secuencias de plantillas para la tarea de tu app, puedes personalizar el contenido de cada plantilla y algunos de los estilos de tu app.

Para obtener información sobre qué aspectos del diseño visual general puedes personalizar, consulta Personalización del diseño visual, que incluye ejemplos de personalización de la app. En el caso de las versiones AAOS de tu app, ten en cuenta que los OEMs de vehículos pueden ajustar el diseño para que se adapte a sus vehículos, como se muestra en los ejemplos de personalización de OEM de vehículos.

Si quieres obtener más información sobre las opciones de personalización para plantillas específicas, consulta Plantillas.

Personalización del diseño visual

Si bien la biblioteca de apps determina los diseños de plantillas y el estilo predeterminado, los diseñadores de apps y los OEM de vehículos contribuyen a los aspectos personalizados del diseño visual.

Aspecto de la IU Qué determina la biblioteca Qué apps determinan o personalizan Qué pueden personalizar los OEM de vehículos
Iconografía y imágenes Iconografía de elementos estándar, como el botón Atrás y el ícono giratorio de carga Las apps proporcionan todas las imágenes y la iconografía (consulta Íconos de material y Especificaciones para íconos de Google Play), excepto en los casos que se indican a la izquierda.
Diseño, tamaño y formas Diseño predeterminado, además del tamaño y las formas de todos los elementos (los valores predeterminados son estándar en la versión de Android Auto de la app)
  • Si las imágenes y los íconos son “grandes” o “pequeños”
  • Si aparecen pestañas en la parte superior de ciertas plantillas para cambiar de vista
  • Indica si se muestra un segundo mapa en el clúster (plantilla de Navigation).
Ajustes en el tamaño, la forma, la ubicación de los botones y las proporciones de los elementos de plantilla en las versiones AAOS de la app (o, por ejemplo, el tamaño exacto de las imágenes y los íconos “grandes” y “pequeños” en sus vehículos)
Tipografía y longitud del texto La familia de fuentes y el tamaño en la versión de Android Auto de la app (consulta Tipografía). Variantes de strings de texto más largas y más cortas, en algunos casos, para adaptarse a diferentes cantidades de espacio en diferentes pantallas de vehículos La familia de fuentes y el tamaño en las versiones AAOS de la app
Color Colores predeterminados en la versión Android Auto de la app (excepto los que proporcionan las apps, que se indican a la derecha) Colores de los marcadores de la lista de lugares, algunos elementos de texto y algunos colores de fondo (consulta la siguiente sección, Personalización de colores para obtener más información) Se realizaron ajustes a los colores predeterminados y proporcionados por la app según sea necesario para combinarlos con las IU de los vehículos en las versiones AAOS de la app.

Personalización de colores

Las apps pueden proporcionar colores para elementos de ciertas plantillas, como se indica en la siguiente lista. En el caso de las versiones AAOS de tu app, los OEMs de vehículos pueden realizar algunos ajustes.

Las apps pueden personalizar lo siguiente:

  • Color del texto en la línea secundaria de las filas de la lista (el creador de vehículos controla el color de la línea principal para AAOS)
  • Color del texto del botón
  • Colores de fondo del botón (excepto en la barra de acciones y en la barra de acciones del mapa)
  • Colores de los marcadores de listas de lugares
  • Elementos de la tarjeta de ruta: Color de fondo, imágenes y valor de color de la duración en la estimación de viajes (dentro de los requisitos de la plantilla de Navigation)
  • Notificaciones paso a paso (color de fondo)

Se muestran ejemplos de componentes de plantillas personalizadas en Ejemplos de personalización de apps y Ejemplos de personalización de OEM de vehículos.

Elige colores para tu app

En la mayoría de los estilos personalizados (excepto las excepciones indicadas en la sección anterior), las apps tienen las siguientes opciones de colores:

  • Proporciona hasta 2 colores de elementos destacados personalizados (con variantes clara y oscura, que se aplicarán según corresponda en Android Auto o por los OEM de vehículos para las versiones AAOS de las apps)
  • Elige entre 4 colores estándar de Android para vehículos (las versiones actuales se muestran a la derecha y podrían cambiar en el futuro)
Colores estándar Ejemplos de colores de los elementos destacados
Diagrama con los cuatro colores estándar admitidos Diagrama con dos colores de acento de muestra que eliges

El uso juicioso del color ayuda a enfocar la intención de un diseño. Ten cuidado a la hora de usar colores cuando no sirvan para nada.

Ejemplos de personalización de apps

Cuatro ejemplos de cómo un desarrollador puede personalizar su app

Ejemplos de personalización de OEM de vehículos

En estos ejemplos, se muestran personalizaciones de diseño adicionales que un OEM del vehículo podría aplicar a la versión AAOS de una app. Si bien el color de la tarjeta de ruta proviene de la app, los OEM de vehículos personalizan las fuentes, los temas y las formas de la tarjeta de ruta, los botones y la tarjeta de hora de llegada estimada. También pueden ajustar el ancho del botón, como se muestra en Cómo personalizar botones a continuación.

Vista de navegación durante el día

Ejemplo de personalización del OEM para la navegación diurna

Vista de navegación nocturna

Ejemplo de personalización del OEM para la navegación nocturna

Cómo personalizar el ancho, el color y la forma de los botones

Estos ejemplos destacan cómo los OEMs pueden personalizar el ancho, el color y la forma de los botones en la versión AAOS de una app.

En el caso del botón designado por la app como botón principal, los OEMs pueden decidir si desean usar un color de énfasis de la app o su propio color de énfasis. También pueden elegir si desean colocar el botón principal a la izquierda o a la derecha para adaptarse a situaciones como los vehículos con conducción derecha.

Botón principal a la izquierda, colores estándar Botón principal a la derecha, colores personalizados
Ejemplo de personalización del OEM con un botón de confirmación en el lado izquierdo de la pantalla y con colores estándar Ejemplo de personalización del OEM con un botón de confirmación en el lado derecho de la pantalla y con colores personalizados