Android-247-Radio/chat-summaries/2026-03-10_11-55-now-playing-ui-overhaul.md

Now Playing UI Overhaul — Dominant Color, Typography, Modern Controls

Task

Address four issues: (1) swap station name / artist-title text hierarchy, (2) fix dominant color extraction not applying, (3) invert back button in portrait mode, (4) make the UI feel cohesive and modern to match the blur aesthetic.

Changes Made

NowPlayingScreen.kt — full rewrite

Typography swap

• Station name → labelLarge, uppercase, 3sp letter-spacing, 50% alpha (diminished label)
• Artist/title → headlineLarge, bold (hero text)
• "No track info" replaced with ♪ music note when no metadata
• Artist-title separator changed from - to — (em dash)

Palette extraction fix

• Replaced Coil 3 ImageLoader.execute() + toBitmap() (which was silently failing) with direct OkHttp + BitmapFactory.decodeStream() for reliable bitmap creation
• Palette swatch fallback chain: dominant → vibrant → muted
• Accent color picks light variants on dark backgrounds, dark variants on light
• Added animateColorAsState with 600ms tween for smooth color transitions when artwork/tracks change
• Bitmap properly recycled after palette extraction

Portrait back button

• Added gradient scrim (45% black → transparent, 100dp tall) at top of artwork panel
• Back icon uses Color.White for visibility over any artwork

Modern UI refresh

• Transport controls: hero button (play/pause) is a filled accent circle (80dp) with contrasting icon; secondary buttons (skip, stop) are smaller plain icons
• Settings section wrapped in a translucent Surface card with 16dp rounded corners
• Timer section condensed to a single compact line with · separators, bodyMedium weight Light
• Settings labels use labelLarge/labelMedium for clean hierarchy
• Switch and slider colors fully themed to accent/text palette
• Increased breathing room between sections (20–28dp spacers)
• Stop button toned down to 50% alpha (not a bright red error color)

RadioApplication.kt

• Removed unused ImageLoader (palette now uses OkHttp directly)

gradle/libs.versions.toml / app/build.gradle.kts

• palette-ktx dependency added (previous commit, retained)

Follow-up Items

• Consider adding a gradient seam between artwork panel and metadata panel for smoother visual transition
• May want to add haptic feedback on transport button taps