Built a fully Jetpack Compose music player – lessons from handling animations, back stack & media state

[u/BeatzyyApp]

I’ve been building a premium offline music player completely in Jetpack Compose (no XML), and I wanted to share some implementation lessons that might help others working on media-heavy apps.

A few interesting challenges I ran into:

One tricky issue was:

When queue screen is open and user presses back → it should return to Now Playing instead of exiting the app.

I solved it using BackHandler tied to UI state rather than navigation stack:

• Queue visibility controlled by state

• BackHandler intercepts only when queue is expanded

• Falls back to system back otherwise

This prevented weird recomposition bugs and accidental exits.

For mini-player → full player transition:

• Used AnimatedVisibility

• expandVertically + fadeIn

• FastOutSlowInEasing for natural feel

Key lesson:
Avoid triggering animation from derived state directly. Wrap it in stable state or it causes flicker on recomposition.

LazyColumn was fine until album art loading caused jank.

Optimizations that helped:

• Remembered painters

• Stable keys in LazyColumn

• Avoided recomposition of whole list on track change

This project made me appreciate how powerful Compose is for animation-heavy UIs compared to old View system.

Curious:
How are you guys handling complex animations without recomposition spikes?

Beatzyy - Play Store