How to Use Custom Chrome Tabs in Android?

Last Updated : 07 Aug, 2024

Many apps have to display different types of web pages inside their application. For displaying webpages in Android there are so many features with which we can display webpages in our Android app. Developers generally prefer to use WebView or redirect users to any browser inside their application. But opening the webpage inside a browser as well as displaying a webpage in Android WebView sometimes becomes a heavy task which we have to perform. Instead of using WebView and opening a webpage in the browser. We can simply use the custom chrome tabs in our application to make this task easier and lighter. Many apps use this feature of custom chrome tabs for redirecting their users from their application to any webpage via custom Chrome tabs. So in this article, we will take a look at the implementation of Custom Chrome tabs in Android.

Implementation of Custom Chrome Tabs in Android

Using the Custom Chrome tab we will be simply displaying GFG webpage on a button click in our Android app. A sample GIF is given below from which you will get to know what we are going to do in this article. Note that we are using Java language for the implementation of Chrome tabs in Android.

Step-by-Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency to build.gradle(Module:app)

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.

implementation 'androidx.browser:browser:1.2.0'

Now sync option will appear at the top right corner click on the sync now option.

Step 3: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/idBtnCustomChromeTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Custom Chrome Tabs" />

</RelativeLayout>

Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;
import androidx.browser.customtabs.CustomTabsIntent;
import androidx.core.content.ContextCompat;

public class MainActivity extends AppCompatActivity {

    Button customChromeTabBtn;
    
    // url for loading in custom chrome tab
    String url = "https://www.geeksforgeeks.org/";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // initializing button for opening custom chrome tabs.
        customChromeTabBtn = findViewById(R.id.idBtnCustomChromeTab);
        customChromeTabBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                
                // initializing object for custom chrome tabs.
                CustomTabsIntent.Builder customIntent = new CustomTabsIntent.Builder();
                
                // below line is setting toolbar color 
                // for our custom chrome tab.
                customIntent.setToolbarColor(ContextCompat.getColor(MainActivity.this, R.color.purple_200));
                
                // we are calling below method after 
                // setting our toolbar color.
                openCustomTab(MainActivity.this, customIntent.build(), Uri.parse(url));
            }
        });
    }

    public static void openCustomTab(Activity activity, CustomTabsIntent customTabsIntent, Uri uri) {
        // package name is the default package
        // for our custom chrome tab
        String packageName = "com.android.chrome";
        if (packageName != null) {
            
            // we are checking if the package name is not null
            // if package name is not null then we are calling 
            // that custom chrome tab with intent by passing its
            // package name.
            customTabsIntent.intent.setPackage(packageName);
            
            // in that custom tab intent we are passing 
            // our url which we have to browse.
            customTabsIntent.launchUrl(activity, uri);
        } else {
            // if the custom tabs fails to load then we are simply 
            // redirecting our user to users device default browser.
            activity.startActivity(new Intent(Intent.ACTION_VIEW, uri));
        }
    }
}

Output:

How to Create a Custom Intro Slider of an Android App?

chaitanyamunje

Improve

Article Tags :

Practice Tags :

Java