Personalizar medios

Los medios pertenecen a un conjunto de aplicaciones del sistema (por ejemplo, Marcador y Iniciador de aplicaciones). Estas aplicaciones comparten estilos y recursos comunes definidos en diferentes niveles de la estructura AOSP.

  • framework/base . Todos los estilos básicos de Android se definen aquí.
  • packages/services/Car/car_product/overlay . Contiene superposiciones en tiempo de compilación que modifican los recursos base/marco estándar para producir la apariencia AOSP del sistema operativo Android Automotive. Los OEM pueden optar por excluir esta superposición y utilizar la suya propia.
  • packages/apps/Car/libs/car-ui-lib . Esta biblioteca define los componentes y recursos de AAOS comunes a las aplicaciones del sistema y a las aplicaciones desagregadas diseñadas para su personalización. Para obtener más información, consulte la Guía de integración de la biblioteca Car UI .
  • packages/apps/Car/libs/car_app_common . Colores y estilos comunes compartidos entre aplicaciones de sistemas automotrices. Los OEM pueden usar superposiciones para personalizar estos elementos (similar a car_product/overlay descrito anteriormente).
  • packages/apps/Car/libs/car_media_common . Contiene elementos compartidos entre Media y otras UI de medios. Por ejemplo, el widget multimedia de la pantalla de inicio.
  • packages/apps/Car/Media. Todas las aplicaciones del sistema usan su propio tema, que se extiende desde Theme.CarUi , como se define en car-ui-lib .

Android Automotive AOSP ofrece dos presentaciones de medios.

  • Interfaz de usuario multimedia. Permite a los usuarios iniciar sesión, explorar contenido y utilizar controles de reproducción detallados.
  • Widget multimedia de la pantalla de inicio. Permite el uso de funciones principales de control de reproducción multimedia en la pantalla de inicio.

Interfaz de usuario de medios

Esta figura describe la estructura de Media UI:

Interfaz de usuario multimedia

Figura 1. Interfaz de usuario de medios.

Para obtener detalles sobre las pautas de UX y UI, así como la estructura espacial de los diferentes componentes de Media, consulte Modelo espacial .

AppBarView: barra de herramientas

La barra de herramientas de Media UI es un componente compartido con otras aplicaciones del sistema, como Marcador y Radio. Para saber cómo personalizar la barra de herramientas, consulte la Guía de integración de la biblioteca Car UI .

Tamaño máximo de material gráfico

Para notificar a las aplicaciones multimedia sobre el tamaño máximo de la obra de arte que se puede recuperar, puede superponer media_items_bitmap_max_size_px en su sistema. Para hacerlo, envíe EXTRA_MEDIA_ART_SIZE_HINT_PIXELS como sugerencia raíz. Como resultado, ahorrará ancho de banda al descargar imágenes. Para obtener más información, consulte MediaConstants en desarrollador.android.com.

Explorar fragmento

La exploración consta principalmente de Car UI RecyclerView , que maneja la posición de la barra de desplazamiento, las flechas y los márgenes y puede explorar elementos de diferentes tipos, como encabezados, elementos de cuadrícula, elementos de cuadrícula de íconos, elementos de lista y elementos de lista de íconos.

Controles de reproducción minimizados

Cuando se muestra el fragmento de exploración y cuando se selecciona un elemento multimedia, se muestra una vista de controles de reproducción minimizada . La siguiente figura ilustra la estructura de esta vista:

Controles de reproducción minimizados

Figura 2. Controles de reproducción minimizados.

Lista de exploración

Los desarrolladores pueden utilizar un conjunto de sugerencias de estilo (consulte Aplicar estilos de contenido ) para personalizar la presentación del contenido de exploración multimedia. Los OEM deben adherirse a estos estilos, ajustando la presentación a su sistema de diseño.

Los tipos de elementos admitidos y los diseños respectivos se encuentran a continuación:

Pantalla de reproducción

Para mostrar esta pantalla, expanda los controles de reproducción minimizados:

  • Medatos del elemento multimedia actualmente en reproducción (incluidos el título y el subtítulo).
  • Controles de reproducción completos.
  • Cola de reproducción (utilizada para mostrar los elementos reproducidos recientemente o los próximos a reproducir).

Los componentes de la pantalla de reproducción se identifican en las figuras siguientes.

Pantalla de reproducción

Figura 3. Pantalla de reproducción.

La pantalla de reproducción no comparte la barra de herramientas con el resto de la aplicación. En cambio, esta pantalla administra individualmente los elementos en la parte superior de la pantalla.

Atribución de formato de audio

Cuando las aplicaciones configuran KEY_CONTENT_FORMAT_TINTABLE_LARGE_ICON_URI o KEY_CONTENT_FORMAT_TINTABLE_SMALL_ICON_URI en los extras del elemento multimedia que se está reproduciendo actualmente. Los OEM deben representar el vector dibujable apropiado como lo indica el URI.

La versión grande del ícono Formato de contenido debe usarse en la vista de reproducción principal. En vistas secundarias, como una barra de reproducción más pequeña, los OEM pueden usar la versión más pequeña del ícono Formato de contenido . ContentFormatView representa el ícono óptimo según su atributo logoSize .

Cuando las aplicaciones configuran KEY_SUBTITLE_LINK_MEDIA_ID o KEY_DESCRIPTION_LINK_MEDIA_ID , los OEM deben representar el subtítulo o la descripción de una manera que sugiera que se pueden tocar y luego abrir la vista Explorar para mostrar el elemento multimedia vinculado cuando el usuario toca.

Controles de reproducción

La pantalla de reproducción incluye un conjunto ampliado de controles de reproducción, organizados en filas de controles . La fila secundaria (que se muestra a continuación como la fila en la parte superior) solo se muestra si el espacio en la primera fila no es suficiente para mostrar todas las acciones devueltas por la aplicación multimedia desde PlaybackStateCompat#getActions() .

Controles de reproducción

Figura 4. Controles de reproducción.

Los OEM pueden personalizar los íconos de acciones estándar, pero deben presentar íconos de acciones personalizados tal como los proporcionan las aplicaciones multimedia.

Widget multimedia de la pantalla de inicio

Este widget se implementa como un fragmento en car-media-common . Este fragmento incluye una versión minimizada de la pantalla de reproducción descrita anteriormente. Se aplican las mismas reglas y capacidades de personalización.

Widget multimedia de la pantalla de inicio

Figura 5. Widget multimedia de la pantalla de inicio.

El botón Selector de aplicaciones que se muestra arriba utiliza la funcionalidad de cambio descrita en Flujo de usuario de cambio de fuente de medios .

Para usar el icono de fuente de medios actual para el botón Selector de aplicaciones, superponga el indicador use_media_source_logo_for_app_selector definido en platform/packages/apps/Car/libs/car-media-common/res/values/bools.xml y configúrelo en true . Con este cambio, se ocultará el ícono de Fuente de medios en el lado opuesto de la barra de herramientas de la aplicación. La personalización también se aplica a la aplicación Media Center y a la aplicación Radio de referencia.

Botón de selección de aplicaciones multimedia

Figura 6. Botón de selección de aplicaciones multimedia.

Diseño de los botones Reproducir, Pausa y Detener

El diseño del botón Reproducir/Pausar/Detener se puede personalizar para "Reproduciendo ahora" y la vista de controles de reproducción minimizados. Ambos diseños están definidos en packages/apps/Car/libs/car-media-common/res/layout/ .

Para personalizar los diseños de los botones, aplique superposiciones en tiempo de compilación a play_pause_stop_button_layout.xml y minimized_play_pause_stop_button_layout.xml .

Resalte el elemento actual en la cola de reproducción.

El estado del elemento de la cola de reproducción actual está configurado en selected , por lo que se puede personalizar utilizando recursos de estado como listas de estado de color (consulte Recursos de lista de estado de color ) y elementos de diseño de lista de estado (consulte Recursos dibujables ). Para aplicar los cambios de estilo necesarios, puede anular el diseño de elementos de la cola packages/apps/Car/Media/res/layout/queue_list_item.xml , o un archivo separado

También puedes mostrar un ícono al lado del elemento de la cola de reproducción actual:

Figura 7. Elemento actual resaltado en la cola de reproducción.