15 min read

Well, most of us know tabs from every day Internet browsing. It doesn’t really matter which browser you use; all browsers support tabs and multiple tabs’ browsing. This allows us to have more than one website open at the same time and navigate between the opened instances. In Android, things are much the same, but when using WebView, you don’t have tabs. This article will give highlights about WebView and the new feature of Android 6, Chrome custom tabs.

(For more resources related to this topic, see here.)

What is WebView?

WebView is the part in the Android OS that’s responsible for rendering web pages in most Android apps. If you see web content in an Android app, chances are you’re looking at WebView. The major exceptions to this rule are some of the Android browsers, such as Chrome, Firefox, and so on.

In Android 4.3 and lower, WebView uses code based on Apple’s Webkit. In Android 4.4 and higher, WebView is based on the Chromium project, which is the open source base of Google Chrome. In Android 5.0, WebView was decoupled into a separate app that allowed timely updates through Google Play without requiring firmware updates to be issued, and the same technique was used with Google Play services.

Now, let’s talk again about a simple scenario: we want to display web content (URL-related) in our application. We have two options: either launch a browser or build our own in-app browser using WebView. Both options have trade-offs or disadvantages if we write them down. A browser is an external application and you can’t really change its UI; while using it, you push the users to other apps and you may lose them in the wild. On the other hand, using WebView will keep the users tightly inside. However, actually dealing with all possible actions in WebView is quite an overhead.

Google heard our rant and came to the rescue with Chrome custom tabs. Now we have better control over the web content in our application, and we can stitch web content into our app in a cleaner, prettier manner.

Customization options

Chrome custom tabs allow several modifications and tweaks:

  • The toolbar color
  • Enter and exit animations
  • Custom actions for the toolbar and overflow menu
  • Prestarted and prefetched content for faster loading

When to use Chrome custom tabs

Ever since WebView came out, applications have been using it in multiple ways, embedding content—local static content inside the APK and dynamic content as loading web pages that were not designed for mobile devices at the beginning. Later on we saw the rise of the mobile web era complete with hybrid applications).

Chrome custom tabs are a bit more than just loading local content or mobile-compatible web content. They should be used when you load web data and want to allow simple implementation and easier code maintenance and, furthermore, make the web content part of your application—as if it’s always there within your app.

Among the reasons why you should use custom tabs are the following:

  • Easy implementation: you use the support library when required or just add extras to your View intent. It’s that simple.
  • In app UI modifications, you can do the following:
    • Set the toolbar color
    • Add/change the action button
    • Add custom menu items to the overflow menu
    • Set and create custom in/out animations when entering the tab or exiting to the previous location
  • Easier navigation and navigation logic: you can get a callback notifying you about an external navigation, if required. You know when the user navigates to web content and where they should return when done.
  • Chrome custom tabs allow added performance optimizations that you can use:
    • You can keep the engine running, so to speak, and actually give the custom tab a head start to start itself and do some warm up prior to using it. This is done without interfering or taking away precious application resources.
    • You can provide a URL to load in advance in the background while waiting for other user interactions. This speeds up the user-visible page loading time and gives the user a sense of blazing fast application where all the content is just a click away.
  • While using the custom tab, the application won’t be evicted as the application level will still be in the foreground even though the tab is on top of it. So, we remain at the top level for the entire usage time (unless a phone call or some other user interaction leads to a change).
  • Using the same Chrome container means that users are already signed in to sites they connected to in the past; specific permissions that were granted previously apply here as well; even fill data, autocomplete, and sync work here.
  • Chrome custom tabs allow us give the users the latest browser implementation on pre-Lollipop devices where WebView is not the latest version.

The implementation guide

As discussed earlier, we have a couple of features integrated into Chrome custom tabs. The first customizes the UI and interaction with the custom tabs. The second allows pages to be loaded faster and keeps the application alive.

Can we use Chrome custom tabs?

Before we start using custom tabs, we want to make sure they’re supported. Chrome custom tabs expose a service, so the best check for support is to try and bind to the service. Success means that custom tabs are supported and can be used. You can check out this gist, which shows a helper how to to check it, or check the project source code later on at https://gist.github.com/MaTriXy/5775cb0ff98216b2a99d.

After checking and learning that support exists, we will start with the UI and interaction part.

Custom UI and tab interaction

Here, we will use the well-known ACTION_VIEW intent action, and by appending extras to the intent sent to Chrome, we will trigger changes in the UI. Remember that the ACTION_VIEW intent is compatible with all browsers, including Chrome. There are some phones without Chrome out there, or there are instances where the device’s default browser isn’t Chrome. In these cases, the user will navigate to the specific browser application.

Intent is a convenient way to pass that extra data we want Chrome to get.

Don’t use any of these flags when calling to the Chrome custom tabs:

  • FLAG_ACTIVITY_NEW_TASK
  • FLAG_ACTIVITY_NEW_DOCUMENT

Before using the API, we need to add it to our gradle file:

compile 'com.android.support:customtabs:23.1.0'

This will allow us to use the custom tab support library in our application:

CustomTabsIntent.EXTRA_SESSION

The preceding code is an extra from the custom tabs support library; it’s used to match the session. It must be included in the intent when opening a custom tab. It can be null if there is no need to match any service-side sessions with the intent.

We have a sample project to show the options for the UI called ChubbyTabby at https://github.com/MaTriXy/ChubbyTabby.

We will go over the important parts here as well. Our main interaction comes from a special builder from the support library called CustomTabsIntent.Builder; this class will help us build the intent we need for the custom tab:

CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder(); //init our Builder

//Setting Toolbar Color
int color = getResources().getColor(R.color.primary);

//we use primary color for our toolbar as well - you can define any color you want and use it.
intentBuilder.setToolbarColor(color);

//Enabling Title showing
intentBuilder.setShowTitle(true);

//this will show the title in the custom tab along the url showing at the bottom part of the tab toolbar.

//This part is adding custom actions to the over flow menu
String menuItemTitle = getString(R.string.menu_title_share);
PendingIntent menuItemPendingIntent = createPendingShareIntent();
intentBuilder.addMenuItem(menuItemTitle, menuItemPendingIntent);
String menuItemEmailTitle = getString(R.string.menu_title_email);
PendingIntent menuItemPendingIntentTwo = createPendingEmailIntent();
intentBuilder.addMenuItem(menuItemEmailTitle, menuItemPendingIntentTwo);

//Setting custom Close Icon.
intentBuilder.setCloseButtonIcon(mCloseButtonBitmap);

//Adding custom icon with custom action for the share action.
intentBuilder.setActionButton(mActionButtonBitmap, getString(R.string.menu_title_share), createPendingShareIntent());

//Setting start and exit animation for the custom tab.
intentBuilder.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left);
intentBuilder.setExitAnimations(this, android.R.anim.slide_in_left, android.R.anim.slide_out_right);
CustomTabActivityHelper.openCustomTab(this, intentBuilder.build(), Uri.parse(URL), new WebviewFallback(), useCustom);

 A few things to notice here are as follows:

  • Every menu item uses a pending intent; if you don’t know what a pending intent is, head to http://developer.android.com/reference/android/app/PendingIntent.html
  • When we set custom icons, such as close buttons or an action button, for that matter, we use bitmaps and we must decode the bitmap prior to passing it to the builder
  • Setting animations is easy and you can use animations’ XML files that you created previously; just make sure that you test the result before releasing the app

The following screenshot is an example of a Chrome custom UI and tab:

The custom action button

As developers, we have full control over the action buttons presented in our custom tab. For most use cases, we can think of a share action or maybe a more common option that your users will perform. The action button is basically a bundle with an icon of the action button and a pending intent that will be called by Chrome when your user hits the action button. The icon should be 24 dp in height and 24-48 dp in width according to specifications:

//Adding custom icon with custom action for the share action
intentBuilder.setActionButton(mActionButtonBitmap, getString(R.string.menu_title_share), createPendingShareIntent());

Configuring a custom menu

By default, Chrome custom tabs usually have a three-icon row with Forward, Page Info, and Refresh on top at all times and Find in page and Open in Browser (Open in Chrome can appear as well) at the footer of the menu.

We, developers, have the ability to add and customize up to three menu items that will appear between the icon row and foot items as shown in the following screenshot:

The menu we see is actually represented by an array of bundles, each with menu text and a pending intent that Chrome will call on your behalf when the user taps the item:

//This part is adding custom buttons to the over flow menu
String menuItemTitle = getString(R.string.menu_title_share);
PendingIntent menuItemPendingIntent = createPendingShareIntent();
intentBuilder.addMenuItem(menuItemTitle, menuItemPendingIntent);
String menuItemEmailTitle = getString(R.string.menu_title_email);
PendingIntent menuItemPendingIntentTwo = createPendingEmailIntent();
intentBuilder.addMenuItem(menuItemEmailTitle, menuItemPendingIntentTwo);

Configuring custom enter and exit animations

Nothing is complete without a few animations to tag along. This is no different, as we have two transitions to make: one for the custom tab to enter and another for its exit; we have the option to set a specific animation for each start and exit animation:

//Setting start and exit animation for the custom tab.
intentBuilder.setStartAnimations(this,R.anim.slide_in_right, R.anim.slide_out_left);
intentBuilder.setExitAnimations(this, android.R.anim.slide_in_left, android.R.anim.slide_out_right);

Chrome warm-up

Normally, after we finish setting up the intent with the intent builder, we should call CustomTabsIntent.launchUrl (Activity context, Uri url), which is a nonstatic method that will trigger a new custom tab activity to load the URL and show it in the custom tab. This can take up quite some time and impact the impression of smoothness the app provides.

We all know that users demand a near-instantaneous experience, so Chrome has a service that we can connect to and ask it to warm up the browser and its native components. Calling this will ask Chrome to perform the following:

  • The DNS preresolution of the URL’s main domain
  • The DNS preresolution of the most likely subresources
  • Preconnection to the destination, including HTTPS/TLS negotiation

The process to warm up Chrome is as follows:

  1. Connect to the service.
  2. Attach a navigation callback to get notified upon finishing the page load.
  3. On the service, call warmup to start Chrome behind the scenes.
  4. Create newSession; this session is used for all requests to the API.
  5. Tell Chrome which pages the user is likely to load with mayLaunchUrl.
  6. Launch the intent with the session ID generated in step 4.

Connecting to the Chrome service

Connecting to the Chrome service involves dealing with Android Interface Definition Language (AIDL). If you don’t know about AIDL, read http://developer.android.com/guide/components/aidl.html.

The interface is created with AIDL, and it automatically creates a proxy service class for you:

CustomTabsClient.bindCustomTabsService()

So, we check for the Chrome package name; in our sample project, we have a special method to check whether Chrome is present in all variations. After we set the package, we bind to the service and get a CustomTabsClient object that we can use until we’re disconnected from the service:

pkgName - This is one of several options checking to see if we have a version of Chrome installed can be one of the following
static final String STABLE_PACKAGE = "com.android.chrome";
static final String BETA_PACKAGE = "com.chrome.beta";
static final String DEV_PACKAGE = "com.chrome.dev";
static final String LOCAL_PACKAGE = "com.google.android.apps.chrome";

private CustomTabsClient mClient;

// Binds to the service.
CustomTabsClient.bindCustomTabsService(myContext, pkgName, new CustomTabsServiceConnection() {
 @Override
 public void onCustomTabsServiceConnected(ComponentName name,  CustomTabsClient client) {
 // CustomTabsClient should now be valid to use
 mClient = client;
 }

 @Override
 public void onServiceDisconnected(ComponentName name) {
 // CustomTabsClient is no longer valid which also  invalidates sessions.
 mClient = null;
 }
});

 After we bind to the service, we can call the proper methods we need.

Warming up the browser process

The method for this is as follows:

boolean CustomTabsClient.warmup(long flags)

//With our valid client earlier we call the warmup method.
mClient.warmup(0);

Flags are currently not being used, so we pass 0 for now.

The warm-up procedure loads native libraries and the browser process required to support custom tab browsing later on. This is asynchronous, and the return value indicates whether the request has been accepted or not. It returns true to indicate success.

Creating a new tab session

The method for this is as follows:

boolean CustomTabsClient.newSession(ICustomTabsCallback callback)

The new tab session is used as the grouping object tying the mayLaunchUrl call, the VIEW intent that we build, and the tab generated altogether. We can get a callback associated with the created session that would be passed for any consecutive mayLaunchUrl calls. This method returns CustomTabsSession when a session is created successfully; otherwise, it returns Null.

Setting the prefetching URL

The method for this is as follows:

boolean CustomTabsSession.mayLaunchUrl (Uri url, Bundle extras, List<Bundle> otherLikelyBundles)

This method will notify the browser that a navigation to this URL will happen soon. Make sure that you call warmup() prior to calling this method—this is a must. The most likely URL has to be specified first, and you can send an optional list of other likely URLs (otherLikelyBundles). Lists have to be sorted in a descending order and the optional list may be ignored. A new call to this method will lower the priority of previous calls and can result in URLs not being prefetched. Boolean values inform us whether the operation has been completed successfully.

Custom tabs connection callback

The method for this is as follows:

void CustomTabsCallback.onNavigationEvent (int navigationEvent, Bundle extras)

We have a callback triggered upon each navigation event in the custom tab. The int navigationEvent element is one of the six that defines the state the page is in. Refer to the following code for more information:

//Sent when the tab has started loading a page.
public static final int NAVIGATION_STARTED = 1;
//Sent when the tab has finished loading a page.
public static final int NAVIGATION_FINISHED = 2;
//Sent when the tab couldn't finish loading due to a failure.
public static final int NAVIGATION_FAILED = 3;
//Sent when loading was aborted by a user action.
public static final int NAVIGATION_ABORTED = 4;
//Sent when the tab becomes visible.
public static final int TAB_SHOWN = 5;
//Sent when the tab becomes hidden.
public static final int TAB_HIDDEN = 6;
private static class NavigationCallback extends CustomTabsCallback {
 @Override
 public void onNavigationEvent(int navigationEvent, Bundle  extras) {
 Log.i(TAG, "onNavigationEvent: Code = " + navigationEvent);
 }
}

Summary

In this article, we learned about a newly added feature, Chrome custom tabs, which allows us to embed web content into our application and modify the UI. Chrome custom tabs allow us to provide a fuller, faster in-app web experience for our users. We use the Chrome engine under the hood, which allows faster loading than regular WebViews or loading the entire Chrome (or another browser) application.

We saw that we can preload pages in the background, making it appear as if our data is blazing fast. We can customize the look and feel of our Chrome tab so that it matches our app. Among the changes we saw were the toolbar color, transition animations, and even the addition of custom actions to the toolbar.

Custom tabs also benefit from Chrome features such as saved passwords, autofill, tap to search, and sync; these are all available within a custom tab. For developers, integration is quite easy and requires only a few extra lines of code in the basic level. The support library helps with more complex integration, if required.

This is a Chrome feature, which means you get it on any Android device where the latest versions of Chrome are installed. Remember that the Chrome custom tab support library changes with new features and fixes, which is the same as other support libraries, so please update your version and make sure that you use the latest API to avoid any issues.

To learn more about Chrome custom tabs and Android 6, refer to the following books:

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here