O'Reilly logo

NativeScript for Angular Mobile Development by Nathanael J. Anderson, Nathan Walker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required