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
}
}
Output:
Project Link: Click Here