Transparent gray overlay behind the “Now Playing” screen
The top of the current screen (“Library” or “For You”) should still be visible underneath the “Now Playing” screen, darkened by a gray overlay.
This overlay can be a simple layer the size of the screen that’s 50% transparent black, like this:
overlay = new Layer frame: Screen.frame backgroundColor: "rgba(0,0,0,0.5)"
placeBehind() function we move it underneath the “Now Playing” screen:
A few details are missing, though.
The “Now Playing” screen should have rounded corners, which it does… but not when you scroll up.
And the screen in the back should also look like a card, but one that’s further down in the stack, like this:
How do we add rounded corners?
That’s obvious: The ScrollComponent needs some
10 points of it.
scroll_now_playing = new ScrollComponent width: Screen.width height: Screen.height - 33 y: 33 scrollHorizontal: no directionLock: yes contentInset: bottom: -100 borderRadius: topLeft: 10 topRight: 10
(You can set border radius separately on different corners. For the bottom corners, use
Now, the screen currently under the “Now Playing” screen,
scroll_library, should also look like a card.
We give it the same amount of
borderRadius and move it
20 points down so that it’s just below the Status Bar.
It needs to shrink a bit, but only horizontally: a
93% seems about right.
scroll_library.props = borderRadius: 10 y: 20 scaleX: 0.93
Because of this darker background, we should have a light Status Bar when the “Now Playing” screen is visible. Another filter to the rescue: with an
100% we make it white.
$.Status_Bar.invert = 100