Android Marshmallow introduced Chrome Custom Tabs. This allows us to load Web URLs natively from within our app. It leads to a more faster experience, with customizable options making Chrome Custom Tabs more akin to our app’s branding.

It’s been a while since Android Marshmallow is out, along with a slew of new features for both users and developers. I feel now’s the right time to start updating our apps, so existing Android Marshmallow users can take advantage of what’s in store.

Android Marshmallow Chrome Custom Tabs are blazing fast! I mean just look at that speed.

This is amazing progress. I remember how I dread clicking on an external link in Facebook, Twitter or Feedly. I used to cringe each time a Chrome browser opens slowly. You see, I’m no fan of mobile web browsing. But this will change that. Allowing UI customization and loading web content from WITHIN your app. This is something I’m looking forward to.

When to use it?

If your app redirects your users to third- party content, or URLs outside your domain, you need to use Chrome Custom Tabs. Here’s why:

• Native in-app loading experience
• Chrome Custom Tabs load nearly twice as fast as WebView
• Allows UI customization for Toolbar, bringing it closer to your branding
• ‘Pre-warming’ of browser in the background, allows for faster load times
• Shared Cookie jar with Chrome

Frankly I’ve seen a couple of code samples, by Google and one on Medium.com, but those are fairly complex involving a lot of custom classes and helpers for the fallback. So I’ve decided NOT to go that way. Instead I’ll show you a simple, straightforward way to achieve this. Because for developers, using a new feature must ease a task, not add to our burden.

So let’s get started with the Custom Chrome Tabs Android Tutorial.

---

Chrome Custom Tabs Library

Start by adding this line to your build.gradle file:

dependencies {
    compile 'com.android.support:customtabs:23.1.0'
}

[su_row][su_column size=”1/2″]

[/su_column] [su_column size=”1/2″]

I’m using Android Studio 1.4 and the updated Blank Activity template.

This gives me a layout complete with a FAB and content holder, without having me to worry about initial setup.[/su_column] [/su_row]

For my activity_main.xml, I’ve kept nothing but a  FAB, which upon click will load my web URL in a Chrome Custom Tab.

Also Read:

• Create an Image Gallery App with Android Studio 1.4 & Glide
• Use Vector Assets for Icons in Android Studio 1.4

Fallback? No problem!

You may wonder about a fallback from Chrome Custom Tabs to WebView? Incase the user doesn’t have Chrome.

Let me clear a few things here.

1. Chrome Custom Tabs works with Chrome 45 & above
2. It is not exclusive to Android Marshmallow. (Just that it was introduced along with it!)

The good news is, we just need to worry about launching the Chrome Custom Tab. The support library takes care of the fallback for us. Which means, if the user doesn’t have Chrome, it will load the same in a WebView. Neat!

Pre-Warming Chrome Custom Tab

I know Chrome Custom Tabs are fast. But when there’s an option to make it faster, then why not?

Pre-warming allows us to tell Chrome to warm up its browser, and initialize itself. We also tell it the URL which the user is likely to open. So since we’ll do all this beforehand, when the user actually clicks a URL, launching Chrome Custom Tabs, they get a near instantaneous experience. Users hate to wait, so I strongly recommend you take advantage of pre-warming.

Custom Tabs Service Connection

To take advantage of pre-warming, we need to bind the CustomTabsService and initialize the CustomtabsClient in it’s callback.

mCustomTabsServiceConnection = new CustomTabsServiceConnection() {
          @Override
          public void onCustomTabsServiceConnected(ComponentName componentName, CustomTabsClient customTabsClient) {

              //Pre-warming
              mClient = customTabsClient;
              mClient.warmup(0L);
              mCustomTabsSession = mClient.newSession(null);
          }

          @Override
          public void onServiceDisconnected(ComponentName name) {
              mClient = null;
          }
      };

After this, we bind the Service.

CustomTabsClient.bindCustomTabsService(MainActivity.this, CUSTOM_TAB_PACKAGE_NAME, mCustomTabsServiceConnection);

CUSTOM_TAB_PACKAGE_NAME is Chrome’s package name. Which is “com.android.chrome“.

Note that in order to make pre-warming fully effective, make sure you to do this well in advance, giving considerable time between pre-warming and actually launching the URL.

Custom Tabs Intent Builder

With pre-warming done, next is to define a few launch options for Chrome Custom Tab. We do this using the CustomTabsIntent Builder.

customTabsIntent = new CustomTabsIntent.Builder(mCustomTabsSession)
              .setToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary))
              .setShowTitle(true)
              .build();

There are a lot of customization options available with the Builder. I suggest you take your time, and define what you need. I’ve set the basics, my primary brand color and displayed the URL title.

You can also define Chrome’s enter and exit animations with setExitAnimations() & setStartAnimations() respectively. If you play around with the Builder, you will find options to set Action buttons, a Close button and even entire Menus.

But let’s keep it simple for now and process with the bare essentials.

Launching Chrome

Finally with every setup done, we’re set to actually tell Chrome to load our URL.

You can do so with this:

customTabsIntent.launchUrl(MainActivity.this, Uri.parse(URL));

Where URL is the String for any website. I’ve set it to my blog of course “https://blog.iamsuleiman.com/”.

Since I want my FAB to load Chrome Custom Tabs on click, I add the above line inside its onClick listener.

As suggested earlier, I strongly suggest you pre-warm Chrome at the earliest to give it enough time to initialize. Given possible network slowdowns and other issues, it needs some time.

That is all! Simply run your app and watch Chrome Custom Tabs in action!

My test device runs Android Lollipop 5.1.1. Alternatively, you can even try it on an emulator (which does not have Chrome). It will switch to a WebView! Thats how the support library handles the fallback in Chrome’s absence.

SOURCE CODE:

Available on GitHub.

Barely Scratched the Surface

Chrome Custom Tabs is a brilliant addition to the Android arsenal. Handling third party URLs has been bugging us from a long time now! It’s finally great to see an elegant solution to this.

However, there is a LOT more flexibility which Chrome Custom Tabs allow. I’ve only included essentials to get you started. Reducing the learning curve. But if you want to know everything that’s under the hood, developer.chrome.com has you covered for reference.

---

Hope the tutorial helped you implement Chrome Custom Tabs easily. If you liked it, do considering sharing & subscribing.

Cheers!