Android memo: Chrome custom Tabs matter

$\n Malyshev Yegor \n$

Published in

AndroidPub

4 min readNov 22, 2015

I discovered that Chrome custom Tabs really cool thing and if it’s presented on your device (you have suitable browser for it) then you will feel a great experience using it.

What are Chrome custom tabs?

App developers face a choice when a user taps a URL to either launch a browser, or build their own in-app browser using WebViews.

Both options present challenges — 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 color
Enter and exit animations
Add custom actions to the Chrome toolbar and overflow menu

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

Zero step: include Chrome custom Tabs library in your build.gradle file, dependencies section. (I suggest that you use the gradle build system).

First step: prepare an empty service used by the custom tab to bind to, raising the application’s importance.

The snippet code below shows a simple empty service, nothing special.

Second step: goes through all apps that support custom tabs (can handle ACTION_VIEW & have special warmup service to warm up the browser process).

First of all we try to get the default package to handle view action. Then we resolve all apps components that are able to handle connection to custom tabs.

Ok and finally we should check some conditions in some special order to choose the best component:

If no components that can handle both things then we return nothing (null).
If there is only one suitable component to do it then pick it and return it (and keep it to reuse later and don’t repeat all stuff above).
If there are several components to do it then we try to check and choose the default handler for such actions (default package to handle view action) and if this component can handle URLs correctly (has suitable intent filter, special paths and schemes) then we choose it.
Otherwise we check four special packages (Chrome packages) and if some of them is presented then we choose it. Right now we should check only the following Chrome’s packages using particular order: stable (com.android.chrome), beta (com.chrome.beta), dev (com.chrome.dev), local (com.google.android.apps.chrome).

Third step: manage the connection to the Custom Tabs Service.

Steps to bind/unbind to/from custom tabs service:

Get package name to use
Create service connection and bind to custom tabs service using it and the found package.
When we are connected then we should keep custom tabs client and warm up the browser process. Also after all of that we want to create and keep custom tabs session (we will use the current session later to try to launch url).
When we are disconnected we just forget our custom tabs client.

Steps to open URLs:

Get package name to use
If there is a handler then create a special custom tabs intent and use the found package and the prepared intent together to launch our URLs. Otherwise use your own WebView to display URLs or just open it via view intent through the device’s browsable applications.

Please explore the code/snippet below to understand all steps more deeply.

Fourth step: build intent and provide via it all necessary options for your needs (main action button, colors, scroll behavior, menu items, …) and then open it.

Using the provided builder class (CustomTabsIntent.Builder) we can specify a lot of things:

addMenuItem (…) — Adds a menu item via label and pending intent to call it on tap.
enableUrlBarHiding (…) — Enables the url bar to hide as the user scrolls down on the page.
setActionButton (…) — Sets the action button. It’s like menu item but here we show that this is main action and also in addition we should provide some nice icon to show the action’s purpose.
setCloseButtonIcon (…) — Specifies a bitmap for close action. It’s useful because we can simulate App’s UP button.
setExitAnimations (…) — Sets the exit animations.
setShowTitle (…) — Sets whether the title should be shown in the custom tab.
setStartAnimations (…) — Sets the start animations.
setToolbarColor (…) — Sets the toolbar color. It’s a cool place to use primary color or colors that provides Palette.
…

Below you will see the code/snippet that demonstrates everything. I used custom tabs on Fragment, but it’s definitely the same as using it on Activity.

The bottom line (I like it):

Bye, bye ╭( ･ㅂ･)و ̑̑ ˂ᵒ͜͡ᵏᵎ⁾✩

BTW! I want to suggest the simplest way to do it. But it’s suitable only if you don’t need some extra features from Chrome custom Tabs (warming up for instance). You might want to use it if you just need to open some url somewhere somehow :) On Google I/O 2016 guys from support team announced a new version of support library: 24.0.0.

You should follow two easy steps to use new features from 24.0.0:

// #1. NOTE: IMO its optional, but it really helps to be faster. Warm up default custom tabs service in the background. Call it somewhere here Application#onCreate or Activity#onCreate
                                 CustomTabsClient.connectAndInitialize (context, CustomTabsClient.getPackageName (context, null));// #2. Launch a custom tab using default service. It will open your url instantly. If you want to customize it then reread my post ;) Call it when you want: for instance on some clicks.                                                      
                                                                   new CustomTabsIntent.Builder ().build ().launchUrl (activity, Uri.parse ("https://github.com"));

Cheers! (╯°□°）╯︵ ┻━┻