Chrome Custom Tabs on Android


In this tutorial, you will learn how to use Chrome Custom Tabs in your Android project.

 

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. 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.

Chrome Custom Tabs offers the following features:

  • Customize the Chrome UI to reflect your app’s brand by setting a toolbar color and a toolbar action button, adding action items to the overflow menu, and applying transition animations.
  • Performance optimizations by pre-warming the browser in the background and providing a likely URL to speed up page load time.
  • All of the current features available in Chrome such as a shared cookie jar and permission model, data saver (if enabled), and autocomplete.
  • Callbacks to the application when external navigation occurs.
  • Data Saver, if enabled, will still function with the use of Custom Tabs – meaning users can still benefit from Data Saving mode

Note: Currently you require Chrome Dev installed on the Android device to launch custom tabs.

 

Integration

In order to use the Chrome Custom Tabs in our project, we need to integrate the Android Support Library to our project. Use the below code in your build.gradle file and compile.

Note: The library only works on API 16 (Jelly Bean) an above. If you are supporting previous API, you can add <uses-sdk tools:overrideLibrary="android.support.customtabs"/> to your manifest to force its use and check the API version at runtime and just use Chrome Custom tabs if its >= 16

 

Next Steps

Copy the following files from GoogleChrome sample git repo to your project and adjust the package names accordingly:

 

Getting started

CustomTabsActivityHelper, this helper is not part of the support library, but a custom class created to handle all tasks that communicate with our activity.

Next we need to bind our CustomTabsService, which we do during onStart – we then unbind this service whenever onStop is called.

Launching a custom tab works very similarly to how we start an Activity, however, instead of using an intent you need to use a CustomTabIntent.

 

Now, to customize your chrome tab using the public methods.

To showing the toolbar title:

To changing the toolbar color:

To show the start animation:

To show the exit animation:

Adding a close button:

Adding an Action Button:

Adding an ActionButton works similarly to how a Notification Action is defined: a PendingIntent.Once your PendingIntent is created, you set it in the builder by passing the intent, a description, and a bitmap.

Adding a Menu Items:

Adding overflow menu items to your chrome tab also requires creating a PendingIntent of your choice.

Once you are done customizing your chrome tab, simply call build() in your intent builder to return aCustomTabIntent.

Ooh wait!! What happens if the user doesn’t have a recent version of Chrome installed? We are using the ACTION_VIEW Intent, this means that by default the page will open in the system browser, or the user’s default browser. If the user has Chrome installed and it is the default browser, it will automatically pick up the EXTRAS and present a customized UI.

Using Fallback:

A Fallback that opens a Webview when Custom Tabs is not available.

Screenshot

chrome_custom_tab1 chrome_custom_tab2 chrome_custom_tab3 chrome_custom_tab4

Complete Source code available here.


About Durga Chiranjeevi

I’m a normal guy, engineer by education who is passionate about Programming and Internet. An android enthusiast, now moving for cross platforms and game development.