Back to our layout

Inside the grid, we have declared a track-list component to represent our track listing, which will flex vertically, taking up all the vertical space and leaving only a height of 100 for player-controls. We indicate track-list as row="0" col="0", since rows and columns are index-based. The flexible (remainder) vertical height is defined via the GridLayout's * in the rows attribute. The bottom section of the grid (row 1) will represent the player controls, allowing users to play/pause the mix and shuttle the playback position.

Now that we have the app's primary view defined in a rather abstract way, let's dive into the two custom components we need to build, track-list and player-controls.

Get NativeScript for Angular Mobile Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.