Google Chrome Custom Tabs Android Tutorial

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.

icon icon
chrome custom tabs speed

Image Credit: Google

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'
}

android studio 1.4 blank activity template

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.

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:

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.

icon icon
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 “http://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!

App developer with an eye for design. Loves to create apps with good UI/ UX that doesn’t annoy people. In his spare time, he likes to draw and paint.
Subscribe to stay updated
You'll be first to know about new articles and more. They're sent straight to your inbox!
No Spam, no BS. Promise. You can unsubscribe anytime.

Suleiman

App developer with an eye for design. Loves to create apps with good UI/ UX that doesn't annoy people. In his spare time, he likes to draw and paint.

You may also like...

  • Ali Mehrpour

    Hi,
    How do say we don’t need to be worry about fallback? To my knowledge support library doesn’t handle fallback and we should take care of that. Is that right?

    • Hi,
      By default the support library does handle fallback and I quote “Custom Tabs uses an ACTION_VIEW Intent with key Extras to customize the UI. This means that by default the page will open in the system browser, or the user’s default browser.”
      Source: https://developer.chrome.com/multidevice/android/customtabs

      • Ali Mehrpour

        In the link you’ve sent, please look at “Provide a fallback for when Custom Tabs is not installed” topic. it said you should explicitly take care of fallback.

      • There is no cause for alarm 🙂
        The CustomTabsIntent uses ACTION_VIEW (android.intent.action.VIEW). Which means the fallback goes to the default browser incase Custom Tabs is missing. This is the advantage when using the Intent Builder. You can confirm the same by taking a look at the CustomTabsIntent class’ Builder() method.

  • Prathamesh Juvatkar

    Now you dont need to add library as well. Support added in chrome itself. However tabs opened with this feature wont redirect urls to apps eg foursquare, zomato.

    https://developer.chrome.com/multidevice/android/customtabs

    • To my knowledge this is not true. Could you point out to exactly where this has been mentioned?

      • Prathamesh Juvatkar

        I was just converting all ACTION_VIEW intents for urls in my code to open in chrome custom tabs. For some apps like zomato, it opens webpage inside custom tab instead of opening the app. I have added link for chrome blog in my question

  • Easy to understand !

    • Thanks Rakhi,
      If you really liked it, do consider spreading the word so others can find it too.

      Cheers

Subscribe to stay updated
You'll be first to know about new articles and more. They're sent straight to your inbox!
No Spam, no BS. Promise. You can unsubscribe anytime.
Gradle setup, ProGuard rules, Material Design palette, metrics and much more

FREE Material Design Starter Project

For more details, click on the below link.
GET IT NOW FOR ANDROID STUDIO!
Download FREE
STARTER PROJECT
Material Design Template Project for Android Studio
DOWNLOAD STARTER PROJECT
Android O is finally here!
Ready your Apps to get an advantage on Play Store.