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/’ folder. Then 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"
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. 
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!
Great article!
LikeLike
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 🙂
LikeLike
Glad I could inspire you! Keep up the good work 🙂
LikeLike
Great stuff! Thank you for writing this.
LikeLike
which editor are you using? Atom or VS Code?
LikeLike
Hi Richard,
I primarily use VS Code but sometimes I’ll use VisualStudio 2015 when doing .net work.
LikeLike
Good one
LikeLike
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
LikeLike
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
LikeLike
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.
LikeLike
Cool. Join the slack channel. Great community there and you can ping me there also.
LikeLike
Ok, will do! Definitely.
LikeLike
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
LikeLike
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{
}
}
}
}
};
“`
LikeLike
Hi Brad, thanks a lot for the tutorial. Do you have plans on creating bottomsheet plugin for nativescript too? Thanks
LikeLike
Unlikely. If you try to mimic the bottomsheet, the side drawer plugin will actually work for this purpose since you can make it show from the bottom of the screen. There also might be some plugins that do this now but I likely won’t be working on any new plugins for a while 🙂 I’ve got quite a few that I occasionally spend my free time maintaining.
Thanks for reading, hope it’s helpful.
LikeLike
Hello! By reading this message then you’re living proof that advertising through contact forms works! We can send your promotional message to people via their feedback form on their website. The advantage of this kind of advertising is that messages sent through contact forms are inherently whitelisted. This dramatically improves the likelihood that your message will be opened. Absolutely NO Pay per click costs! Pay one flat rate and reach millions of people. To get more info please send an email to: william4212sau@gmail.com
LikeLike