Improve Trip Status vehicle icon

[barbeau]

The vehicle icon in TripDetailsListFragment (accessible by tapping on vehicle marker balloon, or tapping on an arrival time and then "Show trip status") currently looks like this:

I'd like to change it to be a white bus icon inside of a colored circle, similar to the vehicle map markers:

I suppose the animating dot would remain above the circle, unless it fits in between the top of the bus and top of the circle.

IIRC I originally started trying to implement this using XML <layer-lists>, but ran into some problems getting the layout to work correctly, and dynamically re-coloring the circle, although I didn't spend a lot of time on it. If we can't do this in XML, we can use the same process as the vehicle map markers - we generated markers in black with white buses, and then dynamically recolor the black part of the bitmap. See VehicleOverlay.getVehicleIcon() and UIUtils.colorBitmap() for that implementation.

SVG files for the vehicle marker icons are in this repo, in the /icons/vehicle_markers folder. We can use these to create an SVG file with the circles and bus icon inside, and then translate those SVGs to the PNGs for the app using Android Icon Generator.

[Pokechu22]

I'm interested in trying to implement this (along with using the proper icons for the mods of transport → right now it's always the bus icon). I've done a basic implementation using the existing markers and UIUtils.colorBitmap, but that image really doesn't fit well. I'm guessing that I'd want to create proper circle icons instead, but I'm not 100% sure how to go about doing that -- where are the templates that were used originally?

[barbeau]

@Pokechu22 Thanks for working on this! SVG files for the vehicle marker map icons are in this repo, in the /icons/vehicle_markers folder.

The current bus icon used on the status screen I believe was a direct export from Android Asset Studio to PNGs:
https://romannurik.github.io/AndroidAssetStudio/icons-generic.html#source.type=clipart&source.clipart=directions_bus&source.space.trim=1&source.space.pad=0&size=32&padding=4&color=rgb(0%2C%200%2C%200)&name=ic_directions_bus

You can get SVGs for the bus and other icon modes from the Material Design site:
https://material.io/tools/icons/?search=directions&style=baseline

I was hoping, though, we could avoid importing another set of PNGs for the vehicle icon overlaid on circles, and just use the existing PNGs in the project like ic_maps_directions_bus (see DirectorsGenerator.getModeIcon() for the other mode plain black PNGs that are already in the project) and use an XML or vector drawable to overlay the vehicle image on a circle. This way we aren't going crazy adding more PNGs for every presentation of the icon in the app, which quickly adds to the app size.

[Pokechu22]

Turns out there's a pretty easy way to do it, just by setting the background on the ImageView to a circle and then applying a tint to that. Here's some of the results for that: delayed, on-time, early. The proportions seem a little bit big, but it's a starting way, at least...