Using Chrome Custom Tabs in your project28 Sep 2015
Until now, there hasn't been an alternative to WebView for showing rich third party web content in android. Developers are tied to using WebView which is often slow, takes user attention away and are non-customizable. Chrome custom tabs gives developers more control over their web experience, and makes transitions between native and web content more seamless without having to resort to a WebView. The entire codebase is on GitHub. Optionally you could download the APK from here.
WHAT EXACTLY IS CHROME CUSTOM TABS
Chrome Custom Tabs is a new way to show third party content in android, which allows you to change how chrome looks and feels making the transition from app to web seemless. Often developers have to use WebView or launch chrome browser straight away to show third party content. Launching the browser is a heavy weight context, so just imagine having an entry level smartphone and calling browser every time, a link is opened.
According to Chrome's documentation
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 allow an app to provide a fast, integrated, and familiar web experience for users. Custom tabs are optimized to load faster than WebViews and traditional methods of launching Chrome.
IMPLEMENTING IN YOUR APP
There are 4 basic steps to integrate Chrome Custom Tabs
Include the gradle dependency
Add this dependency to your build.gradle (app) file.
Connecting to the browser service
Chrome Warmup & Prefetching
The method warmup() should be called as a best practice. Same as the word meaning, it's telling the chrome browser to be ready.
Open the webpage in Chrome Custom Tabs
Step 3 is not mandatory, and is needed only if the user is mostly likely to open the page
SOME ADDITIONAL FEATURES
Up until now, I have implemented just the basic tab, which doesn't differentiate itself from WebView, in a big way. Chrome Custom Tabs have lots of inbuilt methods which can be used to tweak the UI.
- setToolbarColor(int colorRes)
- setStartAnimation(Context context, int enterResId, int exitResId);
- setExitAnimation(Context context, int enterResId, int exitResId);
- setCloseButtonIcon(Bitmap icon);
- setActionButton(Bitmap icon, String description, PendingIntent pendingIntent);
- addMenuItem(String label, PendingIntent pendingIntent);
ADDING ACTION BUTTON AND MENU ITEM
PendingIntent is all it needs to set an Action button as well as a Menu item.