Android Chrome Custom Tabs

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:

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

Copy
compile 'com.android.support:customtabs:28.0.0-alpha3'

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:

Copy
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

Copy
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.

Copy
builder.addDefaultShareMenuItem();

This would add the Share.. option.

To add a custom menu item:

Copy
builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Adding menu icons in the Toolbar

Copy
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:

Copy
builder.setShowTitle(true);

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

Copy
builder.setCloseButtonIcon(bitmap);

To add animations on the custom chrome tab launch do:

Copy
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

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.

Code

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

Copy
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LAUNCH URL"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

The code for the MainActivity.java class is given below:

Copy
package com.journaldev.androidcustomchrometabs;

import android.app.PendingIntent;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.support.customtabs.CustomTabsIntent;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                String url = "https://www.journaldev.com";
                CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
                builder.setToolbarColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent));
                builder.addDefaultShareMenuItem();

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


                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_android);
                int requestCode = 100;
                Intent intent = anotherCustomTab.intent;
                intent.setData(Uri.parse("http://www.journaldev.com/author/anupam"));

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

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


                CustomTabsIntent customTabsIntent = builder.build();
                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:

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

About Anupam Chugh

He loves learning new stuff in Android and iOS. Shoot him queries.