Using Chrome Custom Tabs in your project

Fork me on GitHub

Until now, there hasn't been an alternative to WebView for showing rich third party web content in android. Developers are tied to using WebView which is often slow, takes user attention away and are non-customizable. Chrome custom tabs gives developers more control over their web experience, and makes transitions between native and web content more seamless without having to resort to a WebView. The entire codebase is on GitHub. Optionally you could download the APK from here.

Chrome Custom Tabs by Anjith Sasindran

WHAT EXACTLY IS CHROME CUSTOM TABS

Chrome Custom Tabs is a new way to show third party content in android, which allows you to change how chrome looks and feels making the transition from app to web seemless. Often developers have to use WebView or launch chrome browser straight away to show third party content. Launching the browser is a heavy weight context, so just imagine having an entry level smartphone and calling browser every time, a link is opened.

According to Chrome's documentation

Chrome custom tabs give apps more control over their web experience, and make transitions between native and web content more seamless without having to resort to a WebView.

Chrome custom tabs allow an app to customize how Chrome looks and feels. An app can change things like:

  • Toolbar color
  • Enter and exit animations
  • Add custom actions to the Chrome toolbar and overflow menu

Chrome custom tabs allow an app to provide a fast, integrated, and familiar web experience for users. Custom tabs are optimized to load faster than WebViews and traditional methods of launching Chrome.

IMPLEMENTING IN YOUR APP

There are 4 basic steps to integrate Chrome Custom Tabs

  1. Include the gradle dependency

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

    Add this dependency to your build.gradle (app) file.

  2. Connecting to the browser service

  3. Chrome Warmup & Prefetching

    The method warmup() should be called as a best practice. Same as the word meaning, it's telling the chrome browser to be ready.

    mayLaunchUrl() is a way of telling the app that the user might launch the particular URL, so it fetches the URL in background (asynchronous). Optionally a list of URL's can be provided, which will be fetched in background. Fetching the URL includes resolving DNS, fetching page, CSS, Javascript and images.

  4. Open the webpage in Chrome Custom Tabs

Step 3 is not mandatory, and is needed only if the user is mostly likely to open the page

SOME ADDITIONAL FEATURES

Up until now, I have implemented just the basic tab, which doesn't differentiate itself from WebView, in a big way. Chrome Custom Tabs have lots of inbuilt methods which can be used to tweak the UI.

ADDING ACTION BUTTON AND MENU ITEM

PendingIntent is all it needs to set an Action button as well as a Menu item.

CHROME CUSTOM TABS VS WEBVIEW VS CHROME BROWSER


You can download the APK to test it write away, or checkout my GitHub project. Always happy to hear what you guys think. Hit me up in the comments below. Download APK
GitHub