Earlier, we have seen the apps having external links that opens and navigates the user to the phone browser when clicked, then we came up with something called WebView for Android, but nowadays we have shifted to something called In-App browsers. The main drawback of the system/ phone browsers are they caused heavy transition. To overcome this drawback “Chrome Custom Tabs” were invented which allowed users to walk through the web content seamlessly.

SUSI.AI Android App earlier used the system browser to open any link present in the app.

This can be implemented easily by

Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(browserIntent);

This lead to a huge transition between the context of the app and the web browser.

Then, to reduce all the clutter Chrome Custom tabs by Google was evolved which drastically increased the loading speed and the heavy context switch was also not taking place due to the integration and adaptability of custom tabs within the app.

Chrome custom tabs also are very secured like Chrome Browser and uses the same feature and give developers a more control on the custom actions, user interface within the app.

Ref : Android Dev – Chrome Custom Tabs

Integration of Chrome Custom Tabs

• Adding the dependency in build.gradle(app-level) in the project

dependencies {
    //Other dependencies 
    compile 'com.android.support:customtabs:23.4.0'
}

• Now instantiating a CustomTabsIntent Builder
  

  String url = “https://www.fossasia.org” // can be any link
  
  CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(); //custom tabs intent builder
  
  CustomTabsIntent customTabsIntent = builder.build();

• We can also add animation or customize the color of the toolbar or add action buttons.
  

  builder.setColor(Color.RED) //for setting the color of the toolbar 
  builder.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left); //for start animation
  builder.setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right); //for exit animation

• Finally, we have have achieved everything with a little code. Final launch the web page
  

  Uri webpage = Uri.parse(url); //We have to pass an URI
  
  customTabsIntent.launchUrl(context, webpage); //launching through custom tabs

Benefits of Chrome Custom Tabs

1. UI Customization are easily available and can be implemented with very few lines of code. 
2. Faster page loading and in-app access of the external link 
3. Animations for start/exit  
4. Has security and uses the same permission model as in chrome browser.

Resources

1. Chrome Custom Tabs:  https://developer.chrome.com/multidevice/android/customtabs
2. Chrome Custom Tabs Github Repo: GitHub – GoogleChrome/custom-tabs-client: Chrome custom tabs
3. Android Blog: Android Developers Blog: Chrome custom tabs smooth the transition
4. Video: Chrome Custom Tabs: Displaying 3rd party content in your Android