Android-247-Radio/chat-summaries/2026-03-10_11-39-dominant-color-metadata-bg.md

Dominant Color Extraction for Now Playing Metadata Background

Task

Detect the dominant color of the album artwork and use it as the background color for the metadata section of the Now Playing screen. Text colors are automatically inverted for contrast.

Changes Made

New dependency

• gradle/libs.versions.toml: Added androidx.palette:palette-ktx:1.0.0
• app/build.gradle.kts: Added implementation(libs.palette)

RadioApplication.kt

• Added a shared ImageLoader instance (Coil 3) for use in palette extraction.

NowPlayingScreen.kt

• Palette extraction: Uses LaunchedEffect(artworkUrl) to load a 64x64 thumbnail via Coil's ImageLoader, then runs Palette.from(bitmap).generate() on Dispatchers.IO.
• DominantColors data class: Holds background, onBackground, and accent colors extracted from the artwork.
• Contrast logic: contrastingTextColor() checks luminance and picks black or white text. Accent color is picked from light/dark vibrant or muted swatches depending on background brightness.
• All child composables (TrackInfoSection, TimerSection, TransportControls, SettingsSection) now accept explicit color parameters instead of reading from MaterialTheme.colorScheme.
• Metadata panel backgrounds: Both PortraitContent (bottom half) and LandscapeContent (right half) apply Modifier.background(bgColor) using the extracted dominant color.
• Slider and Switch colors: Themed to match the extracted accent color.
• Landscape TopAppBar: Also uses the dominant background color for consistency.

Follow-up Items

• Consider animating the color transition when artwork changes (e.g., animateColorAsState).
• May want to add a subtle gradient at the seam between artwork panel and metadata panel.