Android Chrome Custom Tabs

Filed Under: Android

In this tutorial, we’ll be discussing and implementing Chrome Custom Tabs in our Android Application.

Android Chrome Custom Tabs

Chrome Custom Tabs are an alternative way of launching URLs in our Android applications.

The other two ways were using a WebView and opening it in a browser.

Both of these take more time, hence Chrome Custom Tabs was introduced.

The following gif from the Chrome Dev Docs compares the time taken in all three:

android chrome custom tabs optimised

Chrome Custom Tabs came up with the following support library in Android M.

compile ''

Using this we can:

  • Set a different background on the toolbar of the tab.
  • Change the cross/back arrow of the tab.
  • Show/hide url title on the toolbar.
  • Add menu icons to perform certain actions.

In short, Chrome Custom Tabs allows us to customize the tabs easily and load them much faster.

Chrome Custom Tabs Implementation

To launch a chrome custom tab we do:

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder().build();
customTabsIntent.launchUrl(this, Uri.parse(url));

Where url is the string passed and this is the context.

Setting Toolbar Color

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
// set toolbar color
builder.setToolbarColor(ContextCompat.getColor(this, R.color.colorAccent));

The toolbar of the Chrome Custom Tab UI contains an overflow menu icon which is similar to the Chrome one.

You cannot remove it. But you can add more options in that icon.


This would add the Share.. option.

To add a custom menu item:

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Adding menu icons in the Toolbar

builder.setActionButton(bitmap, "Android", pendingIntent, true);

The above action button would add the bitmap image onto the toolbar and the pending intent would trigger the intent attached with it.

To show the title of the webpage do:


By default to go back you need to press the cross icon. But you can change this to any other by passing the bitmap:


To add animations on the custom chrome tab launch do:

builder.setStartAnimations(this, android.R.anim.fade_in, android.R.anim.fade_out);
builder.setExitAnimations(this, android.R.anim.fade_in, android.R.anim.fade_out);

Now let’s get onto the business end of this tutorial where we will implement Chrome Custom Tabs in our app.

Project Structure

android chrome custom tabs project structure

We’ve created an image asset of the type ActionBar icon by right-clicking res | new | Image Asset.

Add the Internet Permission in the Manifest and the dependency for the chrome custom tabs in the build.gradle file.


The code for the activity_main.xml layout is given below:

<?xml version="1.0" encoding="utf-8"?>
< xmlns:android=""

        android:text="LAUNCH URL"
        app:layout_constraintTop_toTopOf="parent" />


The code for the class is given below:

package com.journaldev.androidcustomchrometabs;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    protected void onCreate(Bundle savedInstanceState) {
        Button button = findViewById(;
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {

                String url = "";
                CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
                builder.setToolbarColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent));

                CustomTabsIntent anotherCustomTab = new CustomTabsIntent.Builder().build();

                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_android);
                int requestCode = 100;
                Intent intent = anotherCustomTab.intent;

                PendingIntent pendingIntent = PendingIntent.getActivity(MainActivity.this,

                builder.setActionButton(bitmap, "Android", pendingIntent, true);

                CustomTabsIntent customTabsIntent =;
                customTabsIntent.launchUrl(MainActivity.this, Uri.parse(url));

anotherCustomTab invokes another url in a new Chrome Custom Tab.

The output of the above application in action is given below:

android chrome custom tabs

This brings an end to this tutorial. You can download the final project from the link below:


  1. Aadil says:

    hey buddy!
    I need a help related to on_closing the chrome custom tabs
    like adding a timer when chrome custom tabs loaded and when user try to close it, they will be prompted for a confirmation to close the tab and it checks whether the timer is ended or not and that’s it. Likewise to perform a task when hits close or back before it closes.
    I really appreciate your help! i’m kinda stuck here and didn’t getting the right source.
    Your reply will be helpful for most of the people bud! WAITING…..

  2. Naveen says:

    How to hide toolbar

  3. Nguyễn Thanh Nguyên says:

    i can’t use when toolbar not hiden

  4. G RAJU says:

    how to load external URLs in chrome custom tabs and internals in webview.

Comments are closed.

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors