Create A Toast Notification In Android With NativeScript

Toast notifications are a common thing in Android applications. They are convenient because you can display a message to a user and have it disappear shortly after without blocking any of the UI that might exist within the application. I already demonstrated how to display these notifications in an Ionic Framework application, but this time I’m changing gears to explain how it is done using Telerik NativeScript.

I wanted to start off by saying that I was inspired to write this article after reading Brad Martin’s post regarding the Snackbar notification in NativeScript. Both are common and useful ways to display notifications in mobile apps.

This tutorial, like one of my previous will demonstrate how to access the native Android Toast notification through code rather than through a plugin. I did see a plugin for this, but I wanted to demonstrate how easy it was to access native platform features. I also want to mention that as of now, iOS has no concept of a Toast notification or similar which is why this will be strictly Android.

Let’s go ahead and create a new NativeScript project using the Command Prompt (Windows) or Terminal (Mac and Linux):

tns create ExampleProject
cd ExampleProject
tns platform add android

Before jumping into the NativeScript code, let’s first understand how the Toast notification in native Android works.

Typically, to use a Toast notification in Android you would first include the android.widget.Toast class into your project. With the class included you can make use of the static function Toast.makeText(context, message, duration) and show it with the show() function. So in your code you might have something like this:

import android.widget.Toast;

Toast.makeText(getApplicationContext(), "Hello World", Toast.LENGTH_LONG).show();

Nothing too crazy in the above snippet. As far as durations go, you can choose Toast.LENGTH_LONG or Toast.LENGTH_SHORT depending on how long you want the notification to display for.

Alright, now that the native stuff is out of the way, let’s proceed to making it work in NativeScript.

Inside your project’s app/main-page.xml, we want to slim it down to only have a single button, so change the code to look like the following:

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

Notice above the tap property is now calling a showToast function? We need to implement it now.

Inside your project’s app/main-page.js file, we first need to include the application dependency. This can be done by adding the following line:

var application = require("application");

With that added, we can access certain native Android information such as the application context.

Now let’s add that showToast function from earlier. Inside your project’s app/main-page.js file, add the following function:

exports.showToast = function(args) {
    var page = args.object;
    if(page.android) {
        var Toast = android.widget.Toast;
        Toast.makeText(application.android.context, "Hello World", Toast.LENGTH_LONG).show();
    }
}

What is happening in the above?

Well, first of all, we are checking to see if we’re using Android. Remember, Toast notifications are an Android only concept. If we’re using Android, go ahead and assign the native Android class android.widget.Toast to a variable. With that done, we can use it just like we would in native Android. You may notice that we’re using application.android.context in NativeScript rather than getApplicationContext(). This is because we are using the application dependency to get the context this time.

Here is what the full app/main-page.js would look like:

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

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

exports.showToast = function(args) {
    var page = args.object;
    if(page.android) {
        var Toast = android.widget.Toast;
        Toast.makeText(application.android.context, "Hello World", Toast.LENGTH_LONG).show();
    }
}

Here is a screenshot of what it would look like in a simulator.

Not too bad right?

Conclusion

Toast notifications are common in native Android applications and you saw it really wasn’t difficult to interface with native code through JavaScript to display them in your NativeScript mobile application. This is the power of NativeScript making it easy to develop native applications using JavaScript.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.