Chrome Custom Tabs in Android with Kotlin - GeeksforGeeks

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
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 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.Contextimport android.content.pm.PackageManagerimport android.net.Uriimport android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport androidx.browser.customtabs.*import androidx.core.content.ContextCompatimport 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
Picked
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
GridView in Android with Example
Android Listview in Java with Example
How to Change the Background Color After Clicking the Button in Android?
Kotlin Array
Android UI Layouts
Retrofit with Kotlin Coroutine in Android
Android Menus
Kotlin Setters and Getters