Chrome Custom Tabs Android Example

Define custom color for chrome tabs(toolbar) and transition for chrome to meet your UI guideline when launching chrome browser from your app.

You may have situation where you need to launch webpage(ex: help page) from your app but launching browser having different aesthetic may degrade your UI(look and feel). So the better approach is to customize your browser according to your guideline. In this case Chrome Custom Tabs comes into picture.

Chrome tabs customization using CustomTabsIntent will let you do many thing like Defining overflow menu, action button, animation etc. In this example you likely to find, how to apply custom animation and change toolbar/actionbar color of chrome.

Download Code From Github

Video Demo

Chrome Custom Tabs Implementation

Let’s see the files and methods require to build our Chrome Custom Tabs.

Adding Dependencies

Open your gradle.build(Module:app) file and add below highlighted code under dependencies.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:customtabs:23.4.0'
}

Note: You may need to replace the version of customtabs dependency as your appcompat version, in my case version is 23.4.0.

Defining Custom Transition for chrome

The below files should be placed under res→anim resource directory. If you don’t find any anim folder inside res directory, then add it by Right clicking on res directory(Right click on res→New→Android Resource Directory).

Entry Transition

The below two file defines entry transition for Activity and chrome browser(Activity slides from on-screen to off-screen and at the same time chrome browser slides from off-screen to on-screen).

left_to_right_start.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%"
        android:duration="500"/>
</set>

right_to_left_start.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="-100%"
        android:toYDelta="0%" />
</set>

Exit Transition

The below two file defines exit transition for Activity and chrome browser(Activity slides from off-screen to on-screen and at the same time browser slides from on-screen to off-screen).

left_to_right_end.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="0%"
        android:duration="500"/>
</set>

right_to_left_end.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

Creating Activity and it’s layout file

Let’s create activity MainActivity.java and i’ts layout file activity_main.xml.

MainActivity.java

Code on onCreate() method will do following jobs.

1. Create CustomTabsIntent and set start and exit animation from above xml files using CustomTabsIntent.builder().
2. Define chrome Toolbar color same as your App’s toolbar color.

Finally, on button click launch chrome with applied configuration.

File Location: App→java→Your package

package com.androidcss.chromecustomtabs;

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;

public class MainActivity extends AppCompatActivity {

    // website to be visited
    static final String SITE_URL = "http://androidcss.com/";

    // Define variables for custom tabs and its builder
    CustomTabsIntent customTabsIntent;
    CustomTabsIntent.Builder intentBuilder;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        // Set toolbar(tab) color of your chrome browser
        intentBuilder.setToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary));

        // Define entry and exit animation
        intentBuilder.setExitAnimations(this, R.anim.right_to_left_end, R.anim.left_to_right_end);
        intentBuilder.setStartAnimations(this, R.anim.left_to_right_start, R.anim.right_to_left_start);
        intentBuilder.setSecondaryToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary));

        // build it by setting up all
        customTabsIntent = intentBuilder.build();

    }

    // triggers when button clicked
    public void ButtonClicked(View arg0) {

        // go to website defined above
        customTabsIntent.launchUrl(this, Uri.parse(SITE_URL));

    }

}

activity_main.xml

Layout file for MainActivity.java.

File Location: App→res→values

<?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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go To androidcss.com"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="41dp"
        android:onClick="ButtonClicked"/>
    
</RelativeLayout>