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)"

With the placeBehind() function we move it underneath the “Now Playing” screen:

overlay.placeBehind scroll_now_playing

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 borderRadius, 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 bottomRight and bottomLeft.)

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 scaleX of 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 invert of 100% we make it white.

$.Status_Bar.invert = 100