Restyle the selected route-stop circle (bullseye) (#1935)

* Restyle the selected route-stop circle (bullseye)

Give the focused/selected route-stop circle a clearer, theme-aware look
now that selecting a stop drops straight into the route-focus (bullseye)
view:

- Selected circle fills orange (the shared map_stop_focus highlight)
  instead of white, with a smaller center dot in the outline color.
- Route-stop circle fill and outline are now theme-aware resources
  (route_stop_fill / route_stop_outline): white fill + dark-gray ring in
  light mode, near-black (#4D4D4D) fill + white ring in dark mode.
- Selected fill (map_stop_focus) is theme-aware too: lighter #FFA726 in
  light mode, deeper #FB8C00 in dark mode.
- The selected circle is enlarged (FOCUSED_SCALE 1.8) but its ring keeps
  the same on-screen weight as every other stop (the selection scale is
  divided back out of the stroke on both platforms).
- Thinner base ring (STROKE_WIDTH_PX 2.7) and larger center dot
  (INNER_RADIUS_SCALE 0.36).

Colors are resolved from Context in each renderer and passed into the
layers; HomeActivity recreates on a light<->dark switch so there is no
stale bitmap cache. Applied consistently to both the Google and MapLibre
map flavors.

* Update GoogleRouteStopBitmapLayerTest for FOCUSED_SCALE 1.5 -> 1.8

The selected route-stop circle now scales by FOCUSED_SCALE 1.8 (was 1.5),
so every `selected = true` expectation in the bitmap-diameter test was stale
and failing CI. Recompute them (they scale by 1.8/1.5 = 1.2): fixed selected
90 -> 108, and the ramp's selected samples 27 -> 32, 59 -> 70, 90 -> 108. The
`selected = false` values are unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: bmander

onebusaway-android/src/google/java/org/onebusaway/android/map/googlemapsv2/GoogleMapRenderer.kt

@@ -103,7 +103,13 @@ class GoogleMapRenderer(
     private val stopMarkerLayer = GoogleStopMarkerLayer(map, context)
     // The GoogleRouteStopLayer seam keeps route-stop drawing strategies swappable behind one line.
     private val routeStopLayer: GoogleRouteStopLayer =
-        GoogleRouteStopBitmapLayer(map, context.resources.displayMetrics.density)
+        GoogleRouteStopBitmapLayer(
+            map,
+            context.resources.displayMetrics.density,
+            ContextCompat.getColor(context, R.color.route_stop_fill),
+            ContextCompat.getColor(context, R.color.map_stop_focus),
+            ContextCompat.getColor(context, R.color.route_stop_outline),
+        )
     private val bikeByMarker = HashMap<Marker, BikeMarker>()
 
     private val vehicleByMarker = HashMap<Marker, VehicleMarker>()

onebusaway-android/src/google/java/org/onebusaway/android/map/googlemapsv2/GoogleRouteStopBitmapLayer.kt

@@ -17,7 +17,6 @@ package org.onebusaway.android.map.googlemapsv2
 
 import android.graphics.Bitmap
 import android.graphics.Canvas
-import android.graphics.Color
 import android.graphics.Paint
 import androidx.core.graphics.createBitmap
 import com.google.android.gms.maps.GoogleMap
@@ -40,6 +39,9 @@ import org.onebusaway.android.map.render.stopZIndex
 internal class GoogleRouteStopBitmapLayer(
     private val map: GoogleMap,
     private val density: Float,
+    private val fillColor: Int,
+    private val selectedFillColor: Int,
+    private val outlineColor: Int,
 ) : GoogleRouteStopLayer {
     private data class RenderedStop(
         val marker: Marker,
@@ -163,7 +165,14 @@ internal class GoogleRouteStopBitmapLayer(
 
     private fun icon(diameterPx: Int, selected: Boolean): BitmapDescriptor =
         icons.getOrPut(IconKey(diameterPx, selected)) {
-            BitmapDescriptorFactory.fromBitmap(drawRouteStopBitmap(diameterPx, selected))
+            BitmapDescriptorFactory.fromBitmap(
+                drawRouteStopBitmap(
+                    diameterPx,
+                    selected,
+                    if (selected) selectedFillColor else fillColor,
+                    outlineColor,
+                )
+            )
         }
 
     private fun zIndex(selected: Boolean): Float =
@@ -190,20 +199,28 @@ internal fun routeStopDiameterPx(
         .coerceAtLeast(1)
 }
 
-private fun drawRouteStopBitmap(diameterPx: Int, selected: Boolean): Bitmap {
+private fun drawRouteStopBitmap(
+    diameterPx: Int,
+    selected: Boolean,
+    fillColor: Int,
+    outlineColor: Int,
+): Bitmap {
     val bitmap = createBitmap(diameterPx, diameterPx)
     val canvas = Canvas(bitmap)
     val center = diameterPx / 2f
     val scale = diameterPx / (2f * RouteStopCircles.RADIUS_PX)
-    val strokeWidth = RouteStopCircles.STROKE_WIDTH_PX * scale
+    // The selected circle is drawn at FOCUSED_SCALE, but its ring keeps the same on-screen weight as
+    // every other stop — divide the selection scale back out of the stroke (not the diameter).
+    val selectedScale = if (selected) RouteStopCircles.FOCUSED_SCALE else 1f
+    val strokeWidth = RouteStopCircles.STROKE_WIDTH_PX * scale / selectedScale
     val radius = center - strokeWidth / 2f
     val paint = Paint(Paint.ANTI_ALIAS_FLAG)
 
-    paint.color = Color.WHITE
+    paint.color = fillColor
     paint.style = Paint.Style.FILL
     canvas.drawCircle(center, center, radius, paint)
 
-    paint.color = RouteStopCircles.STROKE_COLOR
+    paint.color = outlineColor
     paint.style = Paint.Style.STROKE
     paint.strokeWidth = strokeWidth
     canvas.drawCircle(center, center, radius, paint)

onebusaway-android/src/main/java/org/onebusaway/android/map/render/RouteStopCircles.kt

@@ -15,15 +15,15 @@
  */
 package org.onebusaway.android.map.render
 
-import android.graphics.Color
-
 /** Shared screen-space styling for GPU/native route-stop circles in both map flavors. */
 object RouteStopCircles {
     const val RADIUS_PX = 10f
-    const val STROKE_WIDTH_PX = 3f
-    const val FOCUSED_SCALE = 1.5f
-    const val INNER_RADIUS_SCALE = 0.4f
+    const val STROKE_WIDTH_PX = 2.7f
+    const val FOCUSED_SCALE = 1.8f
+    const val INNER_RADIUS_SCALE = 0.36f
 
-    const val FILL_COLOR = Color.WHITE
-    const val STROKE_COLOR: Int = TripMarkerBitmaps.STROKE_COLOR
+    // All three route-stop circle colors are theme-aware resources resolved by the flavor layers (this
+    // pure styling layer has no Context): the unselected fill `R.color.route_stop_fill`, the outline
+    // `R.color.route_stop_outline`, and the selected fill `R.color.map_stop_focus` (the shared
+    // selected-stop highlight — lighter in light mode, deeper in dark mode).
 }

onebusaway-android/src/main/res/values-night/colors.xml

@@ -24,6 +24,15 @@
     <color name="body_text_2">#8affffff</color>
     <color name="body_text_disabled">#44ffffff</color>
 
+    <!-- Route-stop circle outline is white in dark mode for contrast against the dark base map. -->
+    <color name="route_stop_outline">#FFFFFF</color>
+
+    <!-- Route-stop circle fill is a 70% gray in dark mode (paired with the white outline). -->
+    <color name="route_stop_fill">#4D4D4D</color>
+
+    <!-- The selected-stop highlight is a deeper orange in dark mode. -->
+    <color name="map_stop_focus">#FB8C00</color>
+
 
     <color name="stop_info_arrival_list_background">@android:color/black</color>
 

onebusaway-android/src/main/res/values/colors.xml

@@ -26,8 +26,17 @@
     <color name="theme_primary_variant">@color/brand_color_dark</color>
     <color name="theme_accent">#5db53b</color>
 
-    <!-- The focused/selected map stop highlight: the selected_map_stop_icon.xml fill + the focused dot. -->
-    <color name="map_stop_focus">#FF9500</color>
+    <!-- The focused/selected map stop highlight: the selected_map_stop_icon.xml fill + the focused dot +
+         the selected route-stop circle fill. Lighter in light mode, deeper in dark mode (see values-night). -->
+    <color name="map_stop_focus">#FFA726</color>
+
+    <!-- Route-stop circle outline (ring + selected inner dot): dark in light mode, white in dark mode
+         (see values-night). Same for selected and unselected stops. -->
+    <color name="route_stop_outline">#616161</color>
+
+    <!-- Route-stop circle fill (unselected): white in light mode, black in dark mode (see values-night).
+         Selected stops override this with the orange focus fill. -->
+    <color name="route_stop_fill">#FFFFFF</color>
 
     <!-- The starred (favorite) stop marker's star: a gold gradient (light top, dark bottom), #1680. -->
     <color name="map_stop_favorite_light">#FFD54F</color>

onebusaway-android/src/maplibre/java/org/onebusaway/android/map/maplibre/MapLibreRenderer.kt

@@ -166,7 +166,14 @@ class MapLibreRenderer(
     private var pingStart: WallTime? = null
     private val pingColor by lazy { ContextCompat.getColor(context, R.color.theme_primary) }
     private val density = context.resources.displayMetrics.density
-    private val routeStopCircleLayer = MapLibreRouteStopCircleLayer(map, mapStyle, density)
+    private val routeStopCircleLayer = MapLibreRouteStopCircleLayer(
+        map,
+        mapStyle,
+        density,
+        ContextCompat.getColor(context, R.color.route_stop_fill),
+        ContextCompat.getColor(context, R.color.map_stop_focus),
+        ContextCompat.getColor(context, R.color.route_stop_outline),
+    )
     // Reused across the ripple's frames — redrawn in place rather than reallocated each frame (the ring
     // is a bitmap because the classic annotation API has no circle). Freed with the ping in clearPing.
     private var pingBitmap: Bitmap? = null

onebusaway-android/src/maplibre/java/org/onebusaway/android/map/maplibre/MapLibreRouteStopCircleLayer.kt

@@ -20,13 +20,15 @@ import org.maplibre.android.geometry.LatLng
 import org.maplibre.android.maps.MapLibreMap
 import org.maplibre.android.maps.Style
 import org.maplibre.android.style.expressions.Expression
+import org.maplibre.android.style.expressions.Expression.color
 import org.maplibre.android.style.expressions.Expression.eq
 import org.maplibre.android.style.expressions.Expression.get
 import org.maplibre.android.style.expressions.Expression.interpolate
 import org.maplibre.android.style.expressions.Expression.linear
 import org.maplibre.android.style.expressions.Expression.literal
 import org.maplibre.android.style.expressions.Expression.product
 import org.maplibre.android.style.expressions.Expression.stop
+import org.maplibre.android.style.expressions.Expression.switchCase
 import org.maplibre.android.style.expressions.Expression.zoom
 import org.maplibre.android.style.layers.CircleLayer
 import org.maplibre.android.style.layers.PropertyFactory.circleColor
@@ -53,6 +55,9 @@ internal class MapLibreRouteStopCircleLayer(
     private val map: MapLibreMap,
     private val style: Style,
     private val density: Float,
+    private val fillColor: Int,
+    private val selectedFillColor: Int,
+    private val outlineColor: Int,
 ) {
     private val source = GeoJsonSource(
         SOURCE_ID,
@@ -68,10 +73,22 @@ internal class MapLibreRouteStopCircleLayer(
         style.addLayer(
             CircleLayer(OUTER_LAYER_ID, SOURCE_ID).withProperties(
                 circleRadius(radiusExpression()),
-                circleColor(RouteStopCircles.FILL_COLOR),
-                circleStrokeColor(RouteStopCircles.STROKE_COLOR),
+                circleColor(
+                    switchCase(
+                        eq(get(SELECTED_PROPERTY), true),
+                        color(selectedFillColor),
+                        color(fillColor),
+                    )
+                ),
+                circleStrokeColor(outlineColor),
+                // Stroke width rides the base (non-selection-scaled) radius so the selected circle
+                // keeps the same ring weight as every other stop even though it's drawn larger.
                 circleStrokeWidth(
-                    radiusExpression(RouteStopCircles.STROKE_WIDTH_PX / RouteStopCircles.RADIUS_PX)
+                    radiusExpression(
+                        STROKE_MIN_RADIUS_PROPERTY,
+                        STROKE_MAX_RADIUS_PROPERTY,
+                        RouteStopCircles.STROKE_WIDTH_PX / RouteStopCircles.RADIUS_PX,
+                    )
                 ),
                 circleSortKey(get(MAX_RADIUS_PROPERTY)),
             )
@@ -80,8 +97,8 @@ internal class MapLibreRouteStopCircleLayer(
             CircleLayer(INNER_LAYER_ID, SOURCE_ID)
                 .withFilter(eq(get(SELECTED_PROPERTY), true))
                 .withProperties(
-                    circleRadius(radiusExpression(RouteStopCircles.INNER_RADIUS_SCALE)),
-                    circleColor(RouteStopCircles.STROKE_COLOR),
+                    circleRadius(radiusExpression(scale = RouteStopCircles.INNER_RADIUS_SCALE)),
+                    circleColor(outlineColor),
                     circleSortKey(get(MAX_RADIUS_PROPERTY)),
                 )
         )
@@ -110,6 +127,12 @@ internal class MapLibreRouteStopCircleLayer(
                     RouteStopCircles.RADIUS_PX * stopFocusMinScale * selectedScale,
                 )
                 addNumberProperty(MAX_RADIUS_PROPERTY, RouteStopCircles.RADIUS_PX * selectedScale)
+                // Base radii without the selection scale, so the stroke-width ramp stays constant weight.
+                addNumberProperty(
+                    STROKE_MIN_RADIUS_PROPERTY,
+                    RouteStopCircles.RADIUS_PX * stopFocusMinScale,
+                )
+                addNumberProperty(STROKE_MAX_RADIUS_PROPERTY, RouteStopCircles.RADIUS_PX)
             }
         }
         source.setGeoJson(FeatureCollection.fromFeatures(features))
@@ -147,11 +170,15 @@ internal class MapLibreRouteStopCircleLayer(
      * top-level step or interpolate expression"), so keeping `zoom()` at the top level is required;
      * scaling the stop outputs is mathematically equivalent for a linear interpolation. (#1927)
      */
-    private fun radiusExpression(scale: Float = 1f): Expression = interpolate(
+    private fun radiusExpression(
+        minProperty: String = MIN_RADIUS_PROPERTY,
+        maxProperty: String = MAX_RADIUS_PROPERTY,
+        scale: Float = 1f,
+    ): Expression = interpolate(
         linear(),
         zoom(),
-        stop(DETAIL_RAMP_START_ZOOM, scaledRadius(MIN_RADIUS_PROPERTY, scale)),
-        stop(DETAIL_RAMP_END_ZOOM, scaledRadius(MAX_RADIUS_PROPERTY, scale)),
+        stop(DETAIL_RAMP_START_ZOOM, scaledRadius(minProperty, scale)),
+        stop(DETAIL_RAMP_END_ZOOM, scaledRadius(maxProperty, scale)),
     )
 
     private fun scaledRadius(property: String, scale: Float): Expression =
@@ -165,6 +192,8 @@ internal class MapLibreRouteStopCircleLayer(
         const val SELECTED_PROPERTY = "selected"
         const val MIN_RADIUS_PROPERTY = "minRadius"
         const val MAX_RADIUS_PROPERTY = "maxRadius"
+        const val STROKE_MIN_RADIUS_PROPERTY = "strokeMinRadius"
+        const val STROKE_MAX_RADIUS_PROPERTY = "strokeMaxRadius"
         const val TAP_RADIUS_DP = 12f
     }
 }

onebusaway-android/src/testGoogle/java/org/onebusaway/android/map/googlemapsv2/GoogleRouteStopBitmapLayerTest.kt

@@ -22,17 +22,17 @@ class GoogleRouteStopBitmapLayerTest {
     @Test
     fun `ordinary route mode keeps the normal fixed bitmap size`() {
         assertEquals(60, diameter(zoom = 10f, stopFocused = false, selected = false))
-        assertEquals(90, diameter(zoom = 18f, stopFocused = false, selected = true))
+        assertEquals(108, diameter(zoom = 18f, stopFocused = false, selected = true))
     }
 
     @Test
     fun `stop focus bitmap size follows the zoom ramp`() {
         assertEquals(18, diameter(zoom = 10f, stopFocused = true, selected = false))
-        assertEquals(27, diameter(zoom = 11f, stopFocused = true, selected = true))
+        assertEquals(32, diameter(zoom = 11f, stopFocused = true, selected = true))
         assertEquals(39, diameter(zoom = 13.5f, stopFocused = true, selected = false))
-        assertEquals(59, diameter(zoom = 13.5f, stopFocused = true, selected = true))
+        assertEquals(70, diameter(zoom = 13.5f, stopFocused = true, selected = true))
         assertEquals(60, diameter(zoom = 16f, stopFocused = true, selected = false))
-        assertEquals(90, diameter(zoom = 18f, stopFocused = true, selected = true))
+        assertEquals(108, diameter(zoom = 18f, stopFocused = true, selected = true))
     }
 
     private fun diameter(zoom: Float, stopFocused: Boolean, selected: Boolean): Int =