How to use Material Design Snackbar In A NativeScript App

This post will give a quick overview on how to use the Material Design Snackbar within a NativeScript app. If you are not familiar with Material Design, you can read all about it here on Google’s site.

With Material Design Google created numerous components/widgets for creating Android applications. One of my favorites is the ‘Snackbar’ and this post will show you how to use it within your NativeScript app. You’ll need to be running the Android app since this is native to Android and not iOS.

I’m assuming you have some familiarity with NativeScript and the NativeScript CLI, if you don’t then it is best for you to complete the get started guide here.

Start off by opening your command prompt and creating a new nativescript application:

tns create ExampleSnackbar
cd ExampleSnackbar
tns platform add android

Adding the android platform will add the necessary files to build your NativeScript application for Android. Once you’ve added the android platform. Open up your IDE, I’m going to use Visual Studio Code, and find the build.gradle file located in ‘platforms/android/’ folderThen add the necessary android library to work with the snackbar widget. The following code line is what you will add to your build.gradle file (see image for reference).

compile "com.android.support:design:$suppotVer"

designBuildGradle

Now that you have the dependency added to your build.gradle file, when you run the tns build command you’ll have access to the classes/methods contained.

Now lets make some small changes to the example project to show the native SnackBar!

Open the main-page.xml file in the app folder.
Change the layout to the following:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
     <Button text="SHOW SNACKBAR" tap="showSnackbar" />
  </StackLayout>
</Page>

This is a very simple layout, the main component is the Button. We are going to write a quick function on the main-page.js file that will show the Material Design Snackbar.

Go ahead and open the main-page.js file located in the same folder as the .xml file. Change the source to the following:

var vmModule = require("./main-view-model");

// I moved var page here to have access within our function
// This is for simplicity and to keep the post from becoming too detailed

var page;

function pageLoaded(args) {
page = args.object;
page.bindingContext = vmModule.mainViewModel;
}
exports.pageLoaded = pageLoaded;

// THIS IS THE SnackBar function
function showSnackbar() {
if (page.android) {
var text = "Native Snackbar";
var delay = 2500;
var snackBar = android.support.design.widget.Snackbar;
var snack = snackBar.make(page.android, text, delay);
snack.show();
} else {
// since not on Android just show an alert for iOS
}
};
exports.showSnackbar = showSnackbar;

You might notice something I did here, I went ahead and moved the page variable to be global, this is just for brevity in achieving the end result by giving us access to the page within our showSnackbar function.

With the .xml and .js files updated, save your changes and then go back to your command prompt and run the following command to see this in action, the following command will launch your emulator unless you have a physical device connected for debugging.

tns run android

Now when you click the Button you’ll have a native SnackBar show then hide after the delay. Screenshot_2015-12-08-15-04-30.png

There are numerous other methods available with the Snackbar class that you can find in the docs here. I hope this post will help you to understand just how easy it is to use the native Android APIs exposed by NativeScript.

One last note about the Snackbar. The Snackbar expects a CoordinatorLayout element to be the first argument, this provides a lot of benefits to the layout of your app but for simplicity I chose to pass the NativeScript page component as the first argument. Again, check the docs if you wish to dive deeper into the methods.

Feel free to leave any questions or comments. Thanks!

17 thoughts on “How to use Material Design Snackbar In A NativeScript App

    1. Thanks @nraboy! I’ve followed your blog for a year or so now and enjoy the simplistic and informative nature of your posts. I’ve learned a bit from your blog and taken some of your approaches to writing. Thanks again for checking this out. Now go work on the push notification with NativeScript article 🙂

      Like

  1. cool tutorial, so simple. but for me, when i try to follow it, i get a typescript error “cannot find name android” which prevents the app from building. anyone know how i can get it working in NS with typescript/angular

    Like

    1. K so that’s a typescript warning. When I wrote this I didnt do much typescript but now that’s all I do. The fix is easy and can be done a few ways. The simplest is to add `declare var android: any` in your ts file. This will bypass the ts compiler. Another option is to add the tns platform declarations to your project for native android and iOS typescript files

      Like

      1. thanks for replying so quickly. Didn’t expect that. 🙂 i’m getting to work on your suggestion. I’m just trying out a few examples to get used to accessing native apis from typescript.

        Like

    2. There’s also a plugin that wraps this all up for you in a cross platform wrapper. Check that out if you don’t wanna deal with the boilerplate android/iOS in your app. Nativescript-snackbar find it on npm

      Like

  2. Me again! So, I’m kind of confused about the android platform type definitions. If these namespaces aren’t defined, what the point of them? is it just the widgets that are missing? In TS 2, we can no longer just declare var android, we have to do this:
    “`
    declare namespace android{
    namespace support{
    namespace design {
    namespace widget {
    class Snackbar{

    }
    }
    }
    }
    };
    “`

    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