Create Horizontal Scrolling Lists in NativeScript Apps

We’ve all seen it, horizontal scrolling lists in our favorite apps. Google uses this UI concept in its Play Store app to list related apps horizontally. It’s slick and works well to show off a small set of items that are related.

This is very simple to do in a NativeScript app and it’s soooo smooth. So let’s dive in to the code.

I’m assuming you are familiar with NativeScript, if you aren’t I highly recommend the getting started guide for NativeScript.

First, let’s create a new NativeScript app using the CLI, then path into the app and add the android platform. If you’re on a Mac you can also add and run this for iOS. I’m choosing Android since you can develop on any machine for it in this tutorial. Open your terminal (Mac) or command prompt (Windows) and run the following:

tns create horizontal-scroll
cd horizontal-scroll
tns platform add android

Okay, now you have a fresh NativeScript app with the Android platform added. Now let’s open our favorite IDE, I’m going to use VS Code for this tutorial. Once you have the project loaded, open the app.css file located in the app folder.

We are going to keep this simple and just add two classes and set some styling for the Label and Button component. Change the app.css to look like the following:

.scroll-menu {
    height: 220;
    padding: 10;
}

.scroll-pane {
    background-color: #FF4081;
    width: 240;
    height: 220;
    margin: 10;
}

Button {
    height: 40;
    horizontal-align: right;
}

Label {
    color: #fff;
    horizontal-align: center;
}

Now we’re almost done, we just need to define the actual layout which is very straightforward. Open up the main-page.xml file located in the app folder. Change it to the following:

 


<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <StackLayout>

      <!-- This is where the magic happens -->
        <ScrollView orientation="horizontal">
            <StackLayout orientation="horizontal" class="scroll-menu">
                <StackLayout class="scroll-pane">
                    <Label text="Your cool Slide" />                    
                </StackLayout>
                <StackLayout class="scroll-pane">
                    <Button text="Button" />                  
                </StackLayout>
                <StackLayout class="scroll-pane">
                    <Button text="Button" />                  
                </StackLayout>
                <StackLayout class="scroll-pane">
                    <Button text="Button" />                  
                </StackLayout>
                <StackLayout class="scroll-pane">
                    <Button text="Button" />                  
                </StackLayout>
            </StackLayout>
        </ScrollView>
        
    </StackLayout>    
</Page>

I want to point out the property that makes all of this so simple, orientation=”horizontal”. That little property just gave us some awesome power and that’s it, you are ready to run the app, so go back to your terminal/command prompt and run the following:

tns build android
tns run android

The first command will build your application, the second will run the app on a connected device or running emulator. If you’ve followed this code you should see the following when the app launches.

horScrolling

Conclusion

Behold the amazing glory you just created. You now have a horizontal scrolling list for both Android an iOS. It’s that easy and this is one of my favorite UI patterns to implement. Google, Twitter, and Facebook all implement some form of this in their Android apps and now you can too. If you’d like to see a little more workable layout than this simple tutorial I’ve submitted a ‘snack’ to the NativeScript Snacks site here. If this tutorial helps you out, I’d love to hear about it. Leave a comment or follow me on Twitter .

There is a repo with the source code available here if that’s your thing.

Bonus UI Tip:

If you don’t like the scrollbars visible in your scrolling sections, add the nativescript-swiss-army-knife plugin to your app. The creator Josh Sommer has some helpful utility methods for common use cases in native apps so be sure to check him out on Twitter for awesome plugins and NativeScript information.

.

4 thoughts on “Create Horizontal Scrolling Lists in NativeScript Apps

  1. Hi Brad,

    I’d like to create some kind of date selector (visually like in the app “CrowdScores” – http://a3.mzstatic.com/us/r30/Purple20/v4/08/be/2d/08be2d53-8dd7-9216-3eda-89ccb1ac8e6c/screen322x572.jpeg).

    Is the horizontal scrolling list a good way to achieve this?

    I tested it and it seems fine, but how could I force the app to scroll to the nth item when loading the page?
    Let’s say I’m displaying all days of the week, we’re wednesday so I’d like to center the scroll-bar on wednesday of this week.

    Thanks for your awesome posts 🙂

    Like

  2. Hi Brad, great article – thanks. I am trying to do exactly this, but using a ListView to populate the horizontal scroll area. It works with discrete StackLayouts, but when I use the ListView to generate the StackLayouts, the scroll vertically despite the orietation setting.

    Any advice? I am probably missing something obvious 😦

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s