Chrome Custom Tabs in Android

Posted By : Rahul Baboria | 29-Nov-2017

android

Chrome Custom tabs is a support library iin android which gives user experience like mobile app in a webview(chrome). We can add animation when webview will be opened and on exit as well.

It allow an app to customize how Chrome looks and feels. We can change things like :

Toolbar color
Add custom action button on toolbar.
Add custom options in overflow menu.
Inser custom icons for toolbar (.png as Vector assets are not supported)

It also supports pre data fetching and pre start options as well so that it can give faster user experience.

Setup Chrome Tabs :

Add the following dependency to project gradle :

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

*Note : This library works only on API>16 only .

Usage :

We can use custom chrome tabs by creating a custom intent as shown :

String url = "https://www.codepath.com/";
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
// UI customizations here  

CustomTabsIntent customTabsIntent = builder.build();
// pass the url in this
customTabsIntent.launchUrl(this, Uri.parse(url));

Customizations:

This library need chrome installed in android device , it is not then it will display web view in default web browser and if that browser doesn't supports customizations then it will ignore those statements.

If we want to add color to tab bar to give different appearance to tab simply add this to CustomTabsIntent.Bulder object.

builder.setToolbarColor(ContextCompat.getColor(this, R.color.customColor));

To add share button :

builder.addDefaultShareMenuItem();

Add Custom icons :

Add an image asset first (.png) file from your android studio and further we can use it as bitmap.

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_icon_name);

Intent intent = new Intent(Intent.ACTION_SEND);
intent.setType("text/plain");
intent.putExtra(Intent.EXTRA_TEXT, "http://www.oodlestechnologies.com");

int requestCode = 100;

PendingIntent pendingIntent = PendingIntent.getActivity(this, 
                                                        requestCode, 
                                                        intent, 
                                                        PendingIntent.FLAG_UPDATE_CURRENT);

//Pass bitmap and pending intent

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();

builder.setActionButton(bitmap, "Share Link", pendingIntent, true);

CustomTabsIntent customTabsIntent = builder.build();