Google recently announced the release of its new support library, Custom Tabs. Android Developers often face a situation when it comes to showing web content in their Android Application.

Opening a link in browser in fairly simple, but it takes you out of your application and there is heavy transition between the app and the web plus it is not customisable. Other option is opening web content via WebView within the application, which doesn’t share state with the browser and adds maintenance overhead.

However, Custom tabs allows you to open the web urls within the context of your application using the chrome browser installed on the devices making the transition between the app and the web content fast and seamless.

Custom tabs are optimised to open the web content much faster than the WebViews and traditional methods of launching the browser.
You can refer this link; where Google claims that loading of web content is much faster via Custom tabs.

Along with faster loading of web content there are additional benefits:

  • Application can customise the look and feel of chrome to match their application branding and theme.
  • Performance optimisation is done by pre feeding the urls to the chrome, which are likely to be opened.
  • Simple to implement. No need to build code to manage requests, permission grants and cookies stores.
  • Shared Cookie jar and permission model, therefore no need to login to the sites they are already connected to or re grant the permission.
  • Customise the animations, menu items, toolbar color, and action button.

How to start:

You can start using the Custom tabs in your android application by simply adding this gradle dependency.

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

Chrome Tabs Support

When an Intent ACTION_VIEW is launched by the application, it opens the users default browser. If the version of Chrome launched supports the Chrome Tabs then it will be exposing Chrome Tabs services, which can be bind to. If your Chrome version supports Chrome Tabs it opens the Url in Custom Tab as expected. However, if there is no Chrome tab support then a Call back happens and the WebView opens Url instead.

Getting Started

  • Begin initialising the CustomTabsActivityHelper, this helper is not part of Support lib, but a custom class to handle all tasks that communicate with our activity.
  • Initialise in onCreate of MainActivity.
1
2
3
4
5
6
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mCustomTabActivityHelper = new CustomTabActivityHelper();
}
  • Next we need to bind our CustomTabsService, which we do during onStart – then unbind onStop.
1
2
3
4
5
6
7
8
9
10
11
@Override
protected void onStart() {
    super.onStart();
    mCustomTabActivityHelper.bindCustomTabsService(this);
}
 
@Override
protected void onStop() {
    super.onStop();
    mCustomTabActivityHelper.unbindCustomTabsService(this);
}
  • During binding process, we check if the browser supports Custom tabs.
    Once we are connected, we use the warmup method of the CustomTabsClient class to begin warming up chrome ready for use.
  • Next we use our ConnectionCallback interface to notify our activity that service is connected. We can use this to make necessary UI changes in our activity.
  • If the services become disconnected at any point, then we our ConnectionCallback interface to notify the MainActivity.

Lets try your hands on how Custom Tabs works on the real devices.
For this purpose I have a Sample App that you can find on GitHub here.

Sample App

ChromeCustomTab

Opening a url with Custom tabs with back button and share option.

 

Share Intent

Share Intent

 

Chrome Custom Tab menuItem

Menu Item Customisation

References :

One comment on “Chrome Custom Tabs Android

Leave a Reply

Your email address will not be published.