Our application will contain only one ActionBar and a simple GridLayout which will include the scrolling content and the fixed navigation. The question is how to configure it?

To the GridLayout will need to pass only two rows as main property:

<GridLayout rows="*,60"></GridLayout>

The second row represents the navigation. It is 60 dp in height. The first row (the content) will take the rest of the vertical space available. The star (*) symbol means — take as much space as available. This is exactly what we need in our case!

Now it’s time to add the other components. We will start with the scrollable content. For it, we have to use the ScrollView component and to pass row=”0" as a property. Similarly, for the navigation will use StackLayout component with row=”1" property:

<GridLayout rows=*,60">

<ScrollView row="0">

... scrolling content ...

</ScrollView> <StackLayout row="1">

... navigation buttons ...

</StackLayout>

</GridLayout>

Into the ScrollView container, you can use whatever you want. In this example I will use WrapLayout:

<ScrollView row="0">

<WrapLayout orientation="horizontal">

<GridLayout *ngFor="let item of data">

<Image

src="~/images/{{ item.imageURL }}"

stretch="aspectFill"

row="1"

></Image>

<Label

row="1"

text="{{ item.title }}"

></Label>

</GridLayout>

</WrapLayout>

</ScrollView>

Time for building the navigation. I really love buttons with icon and text below. One of the options is to set the icon as a background of the button and to position the text with some padding on the top.

But I will present you a different approach. In NativeScript you can use a special class, called FormattedString. It gives you the chance to customize a little bit more your button. With the help FontAwesome I will create a Span component for the icon and another one for the text:

<Button textWrap="true" width="25%" textAlignment="text">

<FormattedString>

<Span text="

" fontFamily="FontAwesome"></Span>

<Span text="Home"></Span>

</FormattedString>

</Button>

NOTE: If you don’t know how to set FontAwesome into your application, check the following article.

Some important things that I would like to share with you.

As you noticed I am using the unicode of the icon. But next to the unicode I am adding

. Do not miss it, because without this your text will not go on a new line.

of the icon. But next to the unicode I am adding . Do not miss it, because without this your text will not go on a new line. I would recommend you to set textWrap=”true” to your Button component. It avoids some issues with separating the new line on iOS.

And at the end, we have to fix the orientation of StackLayout and to order the button next to each other. For it just adds orientation=”horizontal” to the layout component:

<StackLayout row="1" orientation="horizontal">

... buttons ...

</StackLayout>

Here is the final version of the whole screen:

Final version of the template with some style properties

Of course you can optimize your code and assign the properties like fontFamily and width to some classes ;)