How to add a fixed header with multiple rows (or a grid)


#1

Hoping for a bit of help here with some presentation/layout stuff for my first app.

I am building an app that has a media player with a play list. I have all the functionality working just fine, I show the currently playing track at the top and then the play queue underneath, now I am come back to work on the presentation/layout and am getting a bit stuck.

What I want to achieve is a fixed header similar to the section above the line in the attached screenshot of the songhop app. I want this pinned to the top of the screen.

Then under the line I want to have the play queue and have this scroll up and down.

My issue is:

I can’t figure out how to get more than 1 row in the header, as soon as I add more than 1 row or multiple columns using a grid the layout goes all screwed up and the header kind of floats on top of the content.

Could anyone provide just a generic example of a fixed header (above line in screenshot) with a generic empty grid inside and a scrollable list in the lower section (below line in screenshot). Once I have the basics I can manage all the other content inside each area just fine.