CustomTabs for Android open web pages

Generally, there are several ways to open URL:

Call default browser
Use WebView
用CustomTabsIntent

If the default browser is to jump to another app, our app will switch to the background. As for when to return, it is uncertain, and there is a risk of being recycled in the background, which is not conducive to business development. If it is opened to browse It can be used if the task is completed after the device.

WebView is commonly used by us. If the page is controllable and requires interaction, it is recommended to use webview.

CustomTabs displays the web page in the user's default browser, which is equivalent to opening the web page in the default browser in your app. The effect is similar to WebView, but it is lighter than WebView, safer, and has better performance.

Today I mainly talk about CustomTabs.

effect:

Insert picture description here
This is an App download link to open the app treasure. You can see that the loading speed is still very fast, just like opening the activity.

Introduce

Customtabs is actually under the browser package, which is under the jetpack, and is now unified into androidx.

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

use

Simple to use, just one line of code

CustomTabsIntent.Builder().build().launchUrl(context, uri)

It's that simple.

As mentioned above, opening a webpage in the rendering is like opening an activity. If it is more similar, has the theme always been more similar.

Custom ui

CustomTabsIntent also supports custom ui

//设置颜色方案
val schemeParams = CustomTabColorSchemeParams.Builder()
                .setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))
                .setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
                .build()
                
CustomTabsIntent.Builder()
                .setDefaultColorSchemeParams(schemeParams)
                .build().launchUrl(context, uri)

CustomTabColorSchemeParams支持

toolbarColor
secondaryToolbarColor
navigationBarColor
navigationBarDividerColor

See the effect
Insert picture description here

val bitmap = BitmapFactory.decodeResource(this.resources, R.mipmap.ic_setting)
val intent = Intent(context, LoginActivity::class.java)
val activity = PendingIntent.getActivity(context, 0, intent, 0)
//内置启动
CustomTabsIntent.Builder()
    .setActionButton(bitmap, "自定义Action", activity)
    .setDefaultColorSchemeParams(schemeParams)
    .build().launchUrl(context, uri)

Here PendingIntent is used to specify subsequent operations, such as opening a page or sending a broadcast.
Insert picture description here
You can see a small setting icon in the upper right corner.

In addition, there are many other APIs, such as:

addMenuItem(String label, PendingIntent pendingIntent)
setCloseButtonIcon(Bitmap icon)
setShowTitle(boolean showTitle)
and many more

Complete code


    btn_launch.setOnClickListener {
    
    
        openWebPage(this, Uri.parse("https://www.baidu.com"))
    }
 
	...

    private fun openWebPage(context: Context, uri: Uri) {
    
    
        if (context.isChromeSupported()) {
    
    
            //设置颜色方案
            val schemeParams = CustomTabColorSchemeParams.Builder()
                .setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))
                .setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
                .build()

            val bitmap = BitmapFactory.decodeResource(this.resources, R.mipmap.ic_setting)
            val intent = Intent(context, LoginActivity::class.java)
            val activity = PendingIntent.getActivity(context, 0, intent, 0)

            //内置启动
            CustomTabsIntent.Builder()
                .setActionButton(bitmap, "自定义Action", activity)
                .setDefaultColorSchemeParams(schemeParams)
                .build().launchUrl(context, uri)
        } else {
    
    
            //启动默认浏览器
            context.startActivity(Intent(Intent.ACTION_VIEW, uri))
        }
    }

    private fun Context.isChromeSupported(): Boolean {
    
    
        val serviceIntent = Intent(CustomTabsService.ACTION_CUSTOM_TABS_CONNECTION)
        serviceIntent.setPackage("com.android.chrome")
        val resolveInfos = packageManager.queryIntentServices(serviceIntent, 0)
        return !resolveInfos.isNullOrEmpty()
    }