In most apps, the bottom bar is just a static tray of tabs. In Yoin, navigation and the mini player share a single floating bar: Home and Library sit on either side, and the playing song sits between them. Tap the center pill and Now Playing opens upward; open an album and its page slides in above; swipe back to pull the upper page away, and the bar never leaves its spot.
Making it look effortless took untangling a surprisingly knotty chain of layout and windowing problems underneath.
Three buttons, one total width
At first I used the stock Material 3 Expressive button group. Press any button and it bulges outward while its neighbors squeeze to make room, giving the whole row a lively bounce under your thumb.
Then the stock component crashed on a foldable. Expanding Now Playing on the inner screen of a Pixel Fold fed extreme mid-transition dimensions into the widget, which calculated a negative width and threw an Android layout exception.
So I dropped the stock widget and wrote the bar from scratch, handling press deformation by hand. On my first try I got the sign backwards and made the pressed button shrink, fighting Expressive physics. The shipped version widens Home or Library when pressed and lets the center pill absorb the extra width—or nudges both side buttons outward when you press the pill itself.
One bar, four poses
The bar is a shapeshifter. When nothing is playing, the center pill folds away and Home and Library stretch out to show their text labels. Start a song and the track pill slides in between them. Open an album and Home and Library fold down to zero while the album’s split Play button grows in their place. On a two-column tablet screen, navigation, the track pill and the album buttons all line up side by side.
Early builds actually had a fifth pose: leaving the center pill open when idle, which opened a whole empty “Nothing Playing” screen on tap. Folding the empty slot away let us kill that dead screen too.
Skipping with direction
Skip to the next song and the old title darts out to the left while the new one rides in from the right on a spatial spring, settling with a gentle bounce. Across the rest of Yoin, we kept that same simple, proud “Android feel.”
Two windows, one bar
On a single-column phone screen, album, artist and playlist pages run in their own Activity windows so Android 14+ cross-Activity predictive back can peek at the real Home screen underneath your finger. The catch is that two Android windows can’t share a single view—not even the bottom bar.
Our sleight of hand draws a twin bar at the exact same pixel coordinates in both windows. Tap an album and the bar in the lower window starts morphing in place while the upper window fades in with its own bar at the exact same progress. Swipe back and only the upper page shrinks toward the edge; the bar stays pinned at the bottom, scrubbing its shape backward with your thumb.
While your finger is down, every geometric change tracks your thumb 1:1 with zero smoothing lag; springs only take over the instant you let go.
Stretching across wide screens
On a tablet or an unfolded foldable, detail pages don’t open a second window—they slide in as a right-hand column inside the same window. The bar stretches across both columns: Home and Library on the left, the stretchy Now Playing pill in the middle, and the album’s Play and Shuffle buttons growing out on the right. Close the right column and those buttons fold straight back into the pill using the exact same slot-width math.
An invisible baseline
All of this work is so you never have to think about the bottom bar while listening. Whether pages push, split into columns or scrub back, it stays quietly anchored under your thumb. Yet every time you navigate back in a different way, you can feel the care put into it.