Chrome Custom Tabs in Android with Kotlin

Last Updated : 30 Aug, 2021

As developers, we have the option of displaying web content to a user in their browser or via WebViews, but both have their own limitations: starting the browser is a large, non-customizable context transition for users, whereas WebViews don’t support all aspects of the web platform. To address this issue, Google launched chrome custom tabs. It is a browser feature that provides apps with more control over their web experiences and enables more seamless transitions between native and web content without the usage of a WebView. They allow developers to alter the appearance and feel of the browser. It offers numerous advantages and customizations:

Ability to change toolbar color
Add enter and exit animations
Enable content sharing
Add custom actions to the browser toolbar and overflow menu
Optimizes the performance

What we are going to build in this article?

In this article, we will be using Chrome customs tabs to display the web content to users with several customizations. To give you an idea of what we’ll be doing in this article, here’s a sample video.

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 Kotlin as the programming language.

Step 2: Add the library dependency

Navigate to the Gradle Scripts > build.gradle(Module: app), add the library in the dependencies section, and sync the project.

dependencies {
      implementation 'androidx.browser:browser:1.3.0'
}

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. 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:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"> 
    
      <!--Adding a button-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_centerInParent="true"
        android:padding="15dp"
        android:text="Open Custom Chrome Tabs"
        android:textColor="#0F9D58"/> 
  
</RelativeLayout>

Step 4: Working with the MainActivity.kt file

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

Kotlin

import android.content.Context 
import android.content.pm.PackageManager 
import android.net.Uri 
import android.os.Bundle 
import androidx.appcompat.app.AppCompatActivity 
import androidx.browser.customtabs.* 
import androidx.core.content.ContextCompat 
import kotlinx.android.synthetic.main.activity_main.* 
  
class MainActivity : AppCompatActivity() { 
  
    private var GFG_URI = "https://www.geeksforgeeks.org"
    private var package_name = "com.android.chrome"; 
  
    override fun onCreate(savedInstanceState: Bundle?) { 
        super.onCreate(savedInstanceState) 
        setContentView(R.layout.activity_main) 
  
        button.setOnClickListener { 
  
            val builder = CustomTabsIntent.Builder() 
  
            // to set the toolbar color use CustomTabColorSchemeParams 
            // since CustomTabsIntent.Builder().setToolBarColor() is deprecated 
  
            val params = CustomTabColorSchemeParams.Builder() 
            params.setToolbarColor(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)) 
            builder.setDefaultColorSchemeParams(params.build()) 
  
            // shows the title of web-page in toolbar 
            builder.setShowTitle(true) 
  
            // setShareState(CustomTabsIntent.SHARE_STATE_ON) will add a menu to share the web-page 
            builder.setShareState(CustomTabsIntent.SHARE_STATE_ON) 
  
            // To modify the close button, use 
            // builder.setCloseButtonIcon(bitmap) 
  
            // to set weather instant apps is enabled for the custom tab or not, use 
            builder.setInstantAppsEnabled(true) 
  
            //  To use animations use - 
            //  builder.setStartAnimations(this, android.R.anim.start_in_anim, android.R.anim.start_out_anim) 
            //  builder.setExitAnimations(this, android.R.anim.exit_in_anim, android.R.anim.exit_out_anim) 
            val customBuilder = builder.build() 
  
            if (this.isPackageInstalled(package_name)) { 
                // if chrome is available use chrome custom tabs 
                customBuilder.intent.setPackage(package_name) 
                customBuilder.launchUrl(this, Uri.parse(GFG_URI)) 
            } else { 
                // if not available use WebView to launch the url 
            } 
        } 
    } 
} 
  
fun Context.isPackageInstalled(packageName: String): Boolean { 
    // check if chrome is installed or not 
    return try { 
        packageManager.getPackageInfo(packageName, 0) 
        true
    } catch (e: PackageManager.NameNotFoundException) { 
        false
    } 
}