Define custom color for chrome tabs(toolbar) and transition for chrome to meet your UI guideline when launching chrome browser from your app.
You might encounter a 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 the picture.
Chrome tabs customization using CustomTabsIntent will let you do many things like Defining overflow menu, action button, animation etc. In this example, you likely to find, how to apply custom animation and change toolbar/action bar color of chrome.
Video Demo
Chrome Custom Tabs Implementation
Let’s see the files and methods required to build our Chrome Custom Tabs.
Adding Dependencies
Open your filegradle.build(Module:app)
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 custom tabs 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 it’s layout file activity_main.xml
MainActivity.java
The code on onCreate()
method will do the following jobs.
- Create CustomTabsIntent and set start and exit animation from above XML files using
CustomTabsIntent.builder()
- 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>
September 28, 2016 at 10:55 am
Hi Gururaj,
Thanks for this blog/example. My self mahaveer and currently i am working on the automation of the reference app which uses the custom chrome tab for login(Auth2.0) using Espresso tool. Could you please give me an example how we can test the login functionality which uses chrome custom tab for login.(In automation i need to enter the user name and password in the text fields and then need to click on the login button). How can i perform the actions on the chrome custom tab for login.