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.
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:
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.
builder.addDefaultShareMenuItem();
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:
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:
builder.setCloseButtonIcon(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
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:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://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:
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("https://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:
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…..
How to hide toolbar
i can’t use when toolbar not hiden
how to load external URLs in chrome custom tabs and internals in webview.