Skip to content

Android Auto: Fix icon color and enable tabbed ui support

Description

Google recently introduced support for a new Android Auto media app UI which uses four tabs across the top in lieu of the previous menu design. While the "old" design isn't completely retired, as it is still used in "Android Auto for Phones", we should introduce support the new tabbed UI on automotive head-units before we are forcibly moved in May, 2021. See: Build media apps for cars: Structure the root menu (Updated 2021-02-17).

The great news is that VLC's redesigned Android Auto menu works perfectly with the new layout. It just requires a few small tweaks, discussed below.

Motivation and Context

In order to provide for an orderly migration, Google introduced an optional flag which activates the new tabbed UI. I performed initial testing with VLC and discovered the root menu icons are currently black, and therefore are not visible to the user. The official recommendation is to supply white icons to allow the app to shade the inactive tabs. I went through the root menu icons and updated both the svgs and xml resources. Additionally, we were using a shared streaming icon which is intentionally shaded. The alpha channel prevented the tab from updating the color when active--see screenshot below. I created a separate stream icon dedicated to the root menu to resolve the issue.

How Has This Been Tested?

I evaluated the changes using the Desktop Head Unit emulator, and with an actual vehicle head-unit. I also reviewed the changes in the Android Auto for Phones app. The tabs now appear correctly and work as intended.

Note 1: You must clear the Android Auto app cache after updating the icons. Stale images will appear if the cache is not cleared.

Note 2: I placed the code opting in to the tabbed UI program in a separate commit. It should be removed in a release sometime after May, 2021 to avoid having inop dead-code hanging around.

Screenshots:

Current icons (black and invisible):

Black_Icons

Updated icons (white/shaded and visible):

White_Icons

Updated streams icon (white & w/o alpha channel):

Streams_Alpha_Channel

Types of changes

  • Enhancement (non-breaking change which cleans up / improves existing functionality)

Checklist

  • I have read the CONTRIBUTING section of the README document.
Edited by Robert Stone

Merge request reports