Webview alternative: How to open website faster using Chrome Custom Tabs in Android using Kotlin

If we want to open an URL in android, we have 3 choices,

  • Open in Web Browser
  • Open in Webview
  • Open in Chrome Custome Tabs

As we know, launching the browser is a heavy context switch that isn’t customizable, while WebViews don’t share state with the browser and add maintenance overhead.

Chrome Custom Tabs give apps more control over their web experience, and make transitions between native and web content more seamless without having to resort to a WebView.

Chrome Custom Tabs allow an app to customize how Chrome looks and feels. An app can change things like:

  • Toolbar colour
  • Enter and exit animations
  • Add custom actions to the Chrome toolbar, overflow menu and bottom toolbar

Chrome Custom Tabs also allow the developer to pre-start Chrome and pre-fetch content for faster loading.

Opening WebURL using Chrome Custom tabs in Kotlin

Below is an example of how to implement opening URL’s in android using chrome custom tabs and the code is written in Kotlin. Firstly, we have to add library dependency in app/build.gradle as,

$ vim app/build.gradle
dependencies {
     implementation "com.android.support:customtabs:28.0.0"
}

Now, open your activities source code and add below code in it. This code basically establishes the connection with Chrome Custom tabs services

     CustomTabsClient.bindCustomTabsService(
          getContext(),
          CUSTOM_TAB_PACKAGE_NAME,
          mCustomTabsServiceConnection
     )

and once it is connected, launches an URL as,

customTabsIntent.launchUrl(getContext(), Uri.parse(website_url))

The Complete source code is as below,

import android.content.ComponentName

import android.support.customtabs.CustomTabsClien
import android.support.customtabs.CustomTabsIntent
import android.support.customtabs.CustomTabsServiceConnection
import android.support.customtabs.CustomTabsSession

class MainActivity : AppCompatActivity() {
 
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val CUSTOM_TAB_PACKAGE_NAME = "com.android.chrome";
        private var mCustomTabsServiceConnection: CustomTabsServiceConnection? = null
        private var mClient: CustomTabsClient? = null
        private var mCustomTabsSession: CustomTabsSession? = null

        mCustomTabsServiceConnection = object : CustomTabsServiceConnection() {
                    override fun onCustomTabsServiceConnected(
                        componentName: ComponentName,
                        customTabsClient: CustomTabsClient
                    ) {
                        //Pre-warming
                        mClient = customTabsClient
                        mClient?.warmup(0L)
                        mCustomTabsSession = mClient?.newSession(null)
                        val customTabsIntent = CustomTabsIntent.Builder().build()
                        customTabsIntent.intent.setPackage(CUSTOM_TAB_PACKAGE_NAME)

                        var website_url: String = "https://YOUR_WEBSITE.COM"
                        if (!website_url.startsWith("http")) {
                            Log.d("mytag", "url doesn't contains http, prepending")
                            website_url = "http://" + website_url
                        }
                        customTabsIntent.launchUrl(getContext(), Uri.parse(website_url))
                    }

                    override fun onServiceDisconnected(name: ComponentName) {
                        mClient = null
                    }
                }

                CustomTabsClient.bindCustomTabsService(
                    getContext(),
                    CUSTOM_TAB_PACKAGE_NAME,
                    mCustomTabsServiceConnection
                );
      }
}

Refer to https://developer.chrome.com/multidevice/android/customtabs for more information and customisations.

Chrome - How to Manage Extensions x
Chrome - How to Manage Extensions

Leave a Comment

Sign up to our newsletter!

ADB Commands Android Android Applications Android Build system Application Libraries Application Stack / User Interface Bash / Shell Scripts Bluetooth driver Cloud Technologies Commands and Packages Compilation Content Management System Core Kernel C Programs Development, Debugging and Performance Tools Development and Build Development Environment Setup Django & REST Api Errors & Failures Git Hardware Platforms HTML JAVA Programs Linux, OS Concepts and Networking Linux Device Drivers Linux Host, Ubuntu, SysAdmin Linux Kernel Linux Networking Middleware Libraries, HAL Multimedia NDK / Middleware / HAL Operating System Concepts PHP Programming Languages Scripting and Automation Search Engine Optimisation ( SEO ) Social Media Source Code Management ( SCM ) System Administration, Security Testing and Debugging Uncategorized Web Design and Development Website Hosting Wordpress Yocto Embedded Linux