Introduction of the Chrome Custom Tabs

Why Chrome Custom Tabs?

Android developers might encounter a situation: the user needs to open a web link in the App, for example, the terms of service page. We might either open a browser using an intention with a view action or using the WebView to display.

These two options present challenges. Switching to the browser is a massive content switch behavior. Using the WebView is hard to share the status with the browser and hard for the maintenance, it will need to handle different scenarios; for instance, add different headers based on different URL requests.

Do we have any better solution for this? Yes, Google provides another choice for the developers - Chrome Custom Tabs. It can switch the webpage from the App smoothly and set up multiple extra settings into CCT. Let us see the performance comparison:

Performance Comparison

There are three different cases here:

Launch the Chrome browser to handle the web link.
Use the Chrome Custom Tabs to handle the web link.
Use the WebView to handle the web link.

Using chrome custom tabs gets the fastest rendering time. That is impressive. What can the CCT do? It provides:

The ability to customize the tab look and feel in an Activity in Chrome included:
- Toolbar color
- Action buttons to the toolbar
- Custom menu items
The ability to customize the exit/enter animation for the activity.

Besides, it can use a pre-warming technique in the background, which would let the users feel the web page loading is fast without delay. It shares the cookie jar and permission with the browser in the user’s mobile phone, which means the CCT provides the unified experience. Users can seamlessly use the browser to visit the sites they have visited before. The most important thing is browser prevents the application from being evicted by the system while on top of it by raising its importance to the “foreground” level.

How to develope

Add this dependency to your project:

1
2
3

dependencies {
    implementation "androidx.browser:browser:1.2.0"
}

Using the example code from Google Developer site:

String url = ¨https://paul.kinlan.me/¨;
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.build();
customTabsIntent.launchUrl(this, Uri.parse(url));

The developer can use CustomTabIntent.Builder to build up the data and pass to the chrome browser. Get more information at reference [1].

How to know if the Chrome browser supports CCT?

All supported versions of the Chrome browser would expose the custom tabs’ service to the developers. Developers can try to connect to this service if the App successfully connects to the service and use the CCT. Please check bindCustomTabsService.

Enjoy the article, happy coding.