Android Building Simple In-App Browser using Chrome Custom Tab

Webview was something developer used to for  Android apps   which required which required communication to open web URLs. 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.

Google announced the release of a new support library, known as Custom Tabs. Previously, developers had the choice of either launching the system browser or using a WebView which can often be both unreliable and unpredictable. However, a Custom Tab allows you to open web URLs within the context of your application using the Chrome Browser installed on the device. These Custom Tabs help to provide a seamless way when transitioning between your apps native content and the web. Aside from the improved User Experience from these Custom Tabs. 

When should I use Chrome Custom Tabs vs WebView?

The WebView is good solution if you are hosting your own content inside your app. If your app directs people to URLs outside your domain, we recommend that you use Chrome Custom Tabs for these reasons:

• Simple to implement. No need to build code to manage requests, permission grants or cookie stores.
• UI customization:
  • Toolbar color
  • Action button
  • Custom menu items
  • Custom in/out animations
  • Bottom toolbar
• Navigation awareness: the browser delivers a callback to the application upon an external navigation.
• Security: the browser uses Google's Safe Browsing to protect the user and the device from dangerous sites.
• Performance optimization:
  • Pre-warming of the Browser in the background, while avoiding stealing resources from the application.
  • Providing a likely URL in advance to the browser, which may perform speculative work, speeding up page load time.
• Lifecycle management: the browser prevents the application from being evicted by the system while on top of it, by raising its importance to the "foreground" level.

Shared cookie jar and permissions model so users don't have to log in to sites they are already connected to, or re-grant permissions they have already granted.

If the user has turned on Data Saver, they will still benefit from it.

Synchronized AutoComplete across devices for better form completion.

Simple customization model.

Quickly return to app with a single tap.

You want to use the latest browser implementations on devices pre-Lollipop (auto updating WebView) instead of older WebViews.

Let's get started!

Create an Android Application by selecting blank template.

Adding the Dependencies.

dependencies {
  compile fileTreeundefineddir: 'libs', include: ['*.jar'])
  testCompile 'junit:junit:4.12'
  compile 'com.android.support:appcompat-v7:24.2.1'
  compile 'com.android.support:customtabs:24.2.1'
}

Adding the Button to UI onclick() it will open a URL in Custom Tabs.

Note: if Chrome is not installed the it will use default browser to open the link.

Open the Activity_main.xml and add the code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="googlecustomtabs.androidxu.com.googlecustomtabs.MainActivity">

  <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Open AndroidXU"
  android:id="@+id/openUrl"
  android:onClick="launchtabs"
  android:layout_alignParentTop="true"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="153dp" />
</RelativeLayout>

Modify the activity_main.xml to call the custom tab intentBuilder and parse the URL.

MainActivity.java
package googlecustomtabs.androidxu.com.googlecustomtabs;

import android.net.Uri;
import android.os.Bundle;
import android.support.customtabs.CustomTabsIntent;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreateundefinedBundle savedInstanceState) {
  super.onCreateundefinedsavedInstanceState);
  setContentViewundefinedR.layout.activity_main);
  }

  public void launchChrometabsundefinedView view)
  {
  final CustomTabsIntent intent = new CustomTabsIntent.Builderundefined).buildundefined);
  final String URL="http://www.androidxu.com";
  intent.launchUrlundefinedthis, Uri.parseundefinedURL));
  }
}

Run the Application 

The Good news is this comes with some additional benefits which we will look in the next post:

• UI customization allows coloring of the toolbar, adding of action button and menu items, applying custom enter/exit animations and using a custom close icon
• Performance optimizations can be made by pre-warming the Chrome Browser, allowing it to launch more quickly. You can also provide a URL that is likely to be launched, again allowing the pre-loading of content for a quicker launch
• Users aren’t required to reconnect to sites that they are already connected to. This is because the cookie jar and permissions are shared through the Chrome browser
• Data Saver, if enabled, will still function with the use of Custom Tabs - meaning users can still benefit from Data Saving mode
• The browser is able to deliver a callback to our activity when external navigation takes place, allowing us to act accordingly.
• As of Chrome 45, Chrome Custom Tabs is now generally available to all users of Chrome, on all of Chrome's supported Android versions (Jellybean onwards).

As suggested by lots of reader to include code as a part of download . Please find the github Link

Happy Coding!!