Introducing Custom Chrome Tabs for better Web Experience in android development

Chrome “Custom Tabs” is a support library for developers to create browsers inside of their apps, to make it a part of the application experience, while retaining the full functionality and performance of a complete web browser. The most important feature of chrome custom tabs is it is faster than WebView and chrome browser. It allows you to customize how chrome looks and feels. You can change the toolbar color, title text hide and show, animation effect and you can add your own action to chrome toolbar and its overflow/dropdown menu.

To implement custom chrome tabs, firstly you have to add library reference as your project dependencies in your app gradle file.

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

Now your Build.gradle file something looks like below.

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0'
compile 'com.android.support:customtabs:23.1.0+'
}
        

than open your activity where you want to open a browser and write some line of codes to bind the CustomTabsService and initialize the CustomtabsClient in it’s callback.

mCustomTabsServiceConnection = new CustomTabsServiceConnection() {
@Override
public void onCustomTabsServiceConnected(ComponentName componentName, CustomTabsClient customTabsClient) {
mCustomTabsClient= customTabsClient;
mCustomTabsClient.warmup(0L);
mCustomTabsSession = mCustomTabsClient.newSession(null);
}

@Override
public void onServiceDisconnected(ComponentName name) {
mCustomTabsClient= null;
}
};  
        

After this, we bind the Service.

CustomTabsClient.bindCustomTabsService(this, CUSTOM_TAB_PACKAGE_NAME, mCustomTabsServiceConnection);    
        

next is to define a few launch options for Chrome Custom Tab. We do this using the CustomTabsIntent Builder.

mCustomTabsIntent = new CustomTabsIntent.Builder(mCustomTabsSession)
.setShowTitle(true)
.build();   
        

Finally with every setup done, we’re set to actually tell Chrome to load our URL.

 mCustomTabsIntent.launchUrl(MainActivity.this, Uri.parse(googleURL));
        

THANKS

Related Tags

mobile application

Kotlin

Dart

Flutter

ios

css

swift

React Native

phonegap

cordova

titanium

Share On:

About Author

Jitendra Negi

Jitendra is an Android application developer, specializing in native Android apps. He knows a lot about architecture, communications, jni material design and a lot of other things.