We are going to learn Custom tabs which are using to load URL in the Android apps, Currently, we are using the Webview to load URLs in the app. The custom tab is faster than Webview to load Web pages with beautiful Toolbar and Animation. It is also called Chrome custom tabs.
Benefits of Custom Tabs
- Performance:- Better performance to load URL in the app.
- Safety and security:- It is safe and secured because it is using Google chrome.
- UI Customize:- Set best UI customization with control custom Action on Toolbar and Overflow menu.
- Quick return:- Easy to return to the app single back button.
- Auto-completion:- Used auto-complete in form completion.
- Data saver: If the Data saver is on it will benefit from it and etc.
How to use it in the app?
To use this library first you need to add the Custom tab library in your build Gradle
|
1 2 3 4 |
dependencies { ... compile 'com.android.support:customtabs:23.3.0' } |
Click on the Sync button on the top right corner. After completion of the sync process launch your first URL by Custom tab with few lines of code.
|
1 2 3 4 5 |
public void loadUrl(View view) { CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(); CustomTabsIntent intent = builder.build(); intent.launchUrl(this, Uri.parse("https://mobikul.com/")); } |
Call this method when you need to launch the Custom tab and load the URL. Replace your URL link place of https://mobikul.com/ It will load your URL with Chrome browser in your app if available if in any case chrome is not exists on your device then it will open with the device default browser.
Please look when this method called and load the URL
It automatically provides an overflow menu and a beautiful action bar you can optimize its UI, look below how can we set action bar color by CustomTabsIntent.
|
1 |
builder.setToolbarColor(ContextCompat.getColor(this,R.color.colorPrimary)); |
For animation, you can set start to enter and exit animation like below.
|
1 2 |
builder.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left); builder.setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right); |
For this animation, the below animation file should exist in your anim folder.
slide_out_left
slide_out_right
To boost performance, you need to create a service.
The CustomTabsClient#bindCustomTabsService the method takes away the complexity of connecting to the Custom Tabs service.
Create a class that extends CustomTabsServiceConnection and use onCustomTabsServiceConnected to get an instance of the CustomTabsClient. This instance will be needed for the next steps.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public static final String CUSTOM_TAB_PACKAGE_NAME = "com.webkul.mobikul"; // Change when in stable CustomTabsServiceConnection connection = new CustomTabsServiceConnection() { @Override public void onCustomTabsServiceConnected(ComponentName name, CustomTabsClient client) { mCustomTabsClient = client; } @Override public void onServiceDisconnected(ComponentName name) { } }; boolean ok = CustomTabsClient.bindCustomTabsService(this, mPackageNameToBind, connection); |
Warm up the Browser Process
Warms up the browser process and loads the native libraries. The warmup is asynchronous, the return value indicates whether the request has been accepted. Multiple successful calls will also return true.
Returns true for success.
You can check more feature on this link – https://developer.chrome.com/multidevice/android/customtabs
Reference – https://developer.chrome.com/multidevice/android/customtabs
You can check more interesting Mobile app blogs on – https://mobikul.com/blog/
Thank you for Reading! Happy coding!