Learn Programming Together: Android Tip: Chrome Custom Tab example

When using some social apps like Facebook, Twitter, when click at a link, a "browser tab" will be displayed to show use this web page content without start any browser app in our device. To do this, these apps must be integrated Google Chrome Tab plugin. It give apps more control over their web experience, and make transitions between native and web content more seamless without having to resort to a WebView.
Chrome Custom Tabs allow an app to customize how Chrome looks and feels. An app can change things like:

Toolbar color
Enter and exit animations
Add custom actions to the Chrome toolbar and overflow menu

In this small tip, I will present the way to integrating this "plugin" to your app through some simple code.

Adding dependency

You can get started implementing this experience right away, starting by adding the following dependency to your app/build.gradle:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:customtabs:23.2.1' //chrome custom tab
}

Building Activity

A simple layout for our Activity, containing only a Button. Later, when click at it, a Chrome Custom Tab will be shown:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="info.devexchanges.chromecustomtab.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open Chrome Custom Tab" />
</RelativeLayout>

Creating and showing a Chrome Custom Tab is so simple in code, with a CustomTabsIntent instance and invoking launchUrl() method:

// Build the custom tab intent and launch the url
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build();
customTabsIntent.launchUrl(MainActivity.this, Uri.parse("https://www.google.com.vn"));

Make sure that you have Google Chrome app installed in your device, when running, you'll have this result:

Okey, as note above, you can custom this Chrome Tab like it name! In this example, I show page title, change color for Toolbar and create once more option Menu for it by this code:


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

        // Show the title
        intentBuilder.setShowTitle(true);

        // Set the color of Toolbar
        intentBuilder.setToolbarColor(Color.BLUE);

        // Display custom back button
        intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(getResources(), R.drawable.ic_back));

        // Add custom menu items
        Intent shareIntent = new Intent(Intent.ACTION_SEND);
        shareIntent.setType("text/plain");
        shareIntent.putExtra(Intent.EXTRA_TEXT, "Check out this website: " + exampleUrl);
        PendingIntent menuIntent = PendingIntent.getActivity(this, 0, shareIntent, 0);
        intentBuilder.addMenuItem(getString(R.string.activity_custom_tab_share_website), menuIntent);

Re-run app, you'll notice this change:

Click at the overflow button, a new option menu entry has been added:

The default Email app will be launched, allows you to send an email with your custom content:

Finally, I provide full code of this project Activity:

MainActivity.java

package info.devexchanges.chromecustomtab;

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

public class MainActivity extends AppCompatActivity {

    private Button button;
    private final static String exampleUrl = "https://www.google.com.vn";

    @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 v) {
                // Build the custom tab intent and launch the url
                //CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build();
                CustomTabsIntent customTabsIntent = buildCustomTabsIntent();
                customTabsIntent.launchUrl(MainActivity.this, Uri.parse(exampleUrl));
            }
        });
    }

    private CustomTabsIntent buildCustomTabsIntent() {
        CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();

        // Show the title
        intentBuilder.setShowTitle(true);

        // Set the color of Toolbar
        intentBuilder.setToolbarColor(Color.BLUE);

        // Display custom back button
        intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(getResources(), R.drawable.ic_back));

        // Add custom menu items
        Intent shareIntent = new Intent(Intent.ACTION_SEND);
        shareIntent.setType("text/plain");
        shareIntent.putExtra(Intent.EXTRA_TEXT, "Check out this website: " + exampleUrl);
        PendingIntent menuIntent = PendingIntent.getActivity(this, 0, shareIntent, 0);
        intentBuilder.addMenuItem(getString(R.string.activity_custom_tab_share_website), menuIntent);

        return intentBuilder.build();
    }
}

Final thoughts

Using Chrome Custom Tab in a native Android app is so easy. Moreover, it is lighter than WebView but loading data faster. You can see this performance comparison image from Google Developer site to realize that: