Chrome Custom Tabs with NativeScript

Thanks Google!

There is this awesome new feature for Android apps to use what is called Custom Tabs. What this feature does is allows your Android app to open external content inside Goolge Chrome and not in the traiditonal webview. You can set the color of the toolbar, the enter/exit animations, icons, and menu options. It’s a really nice addition to Android apps when you have links to external content, it keeps the user experience very smooth. There is an advanced usage where you can actually pre load in the background, which Google claims can save 700ms of loading time so it might be worth it for apps using webviews a lot.

Enough rambling, let’s look at the actual code to see how this works.

We are going to add a dependency to the app.gradle file and create a function attached to a button tap. Very simple NativeScript stuff.  We will start with a brand new app so open your command prompt/terminal and run the following:

 tns create ChromeTabs
 cd ChromeTabs
 tns platform add android

Okay, now we have a nativescript app with the android platform added. Next we will include the dependency in the app.gradle file. If you don’t know where this file is, it’s located in app/App_Resources/Android/ folder.  If you are following along with a new app, this block is commented out with the android recyclerview-v7. Copy the following line and add it under the dependencies {} block where the current recyclerview compile line is.

compile 'com.android.support:customtabs:23.2.1'

Now we can move on and to keep this simple let’s change the TAP event on the button on main-page.xml to openChromeTabs.

Next, is our function to launch the external content. Open the main-page.js file and copy the following snippet and use that as your source.

var createViewModel = require("./main-view-model").createViewModel;
var color = require("color");
var app = require("application");

function onNavigatingTo(args) {
    var page = args.object;
    page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;

function openChromeTabs(args) {
    var url = "http://bradmartin.net";
    var builder = new android.support.customtabs.CustomTabsIntent.Builder();
    builder.setToolbarColor(new color.Color("#ff4081").android);
    builder.setShowTitle(true);
    var customTabsIntent = builder.build();
    customTabsIntent.launchUrl(app.android.startActivity, android.net.Uri.parse(url));
}
exports.openChromeTabs = openChromeTabs;

That’s all there is to it. Go ahead and build the app and run it. When you tap the button you should see a Chrome window open with the url from our function. This only scratches the surface of what can be done with Chrome Custom Tabs. You can have callbacks triggered for various events. Set the enter/exit animations of the window. Change the icon for the close button and add numerous menu options in the overflow menu (on the action bar). Some of the best apps use this awesome feature to provide a great user experience and there is no reason you shouldn’t in your android NativeScript apps. Add some nice polish to your app today. If you’d like to follow along with a video tutorial here is the video version:

5 thoughts on “Chrome Custom Tabs with NativeScript

      1. I’m testing in Android Simulator and it crashes when I click the button. I tried to install Chrome, but the emulated device isn’t connected to my Google Account. The Exception is “calling js method onClick failed” “error: java.lang.NoSuchMethodError: No static method startActivity…”

        Like

    1. So I guess a better answer is you don’t need but to actually achieve the custom tabs it uses chrome so you would need chrome to be successful. Otherwise it just uses the webview 🙂 hopefully that makes better sense.

      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