Best Practices for Custom Tabs
Chrome Custom Tabs is a Chrome feature that allows developers open 3rd party web content from their application, with big performance improvements and a customized UI, creating a more engaging an seamless experience.
It has been out in the wild for a few months now. During this time, we’ve seen various implementations with different levels of quality. But what should an application do to achieve a high quality Custom Tabs integration?
To help answer this question, we’ve put together a checklist for developers to look at and make improvements to their application as needed.
Use the Custom Tabs service and warmup
You can save up to 700 ms when opening a link with the Custom Tabs by connecting to the service and pre-loading Chrome.
Connect to the Custom Tabs service on the onStart() method of the Activities you plan to launch a Custom Tab from. Upon connection, call warmup().
The loading happens as a low priority process, meaning that it won’t have any negative performance impact on your application, but will give a big performance boost when loading a link.
Calling mayLaunchUrl
Pre-fetching will make external content open instantly. So, if your user has at least a 50% likelihood of clicking on the link, use the mayLaunchUrl() method.
Calling mayLaunchUrl() will make Custom Tabs pre-fetch the main page with the supporting content and pre-render. This will give the maximum speed up to the page loading process, but comes with a network and battery cost.
Custom Tabs is smart and knows if the user is using the phone on a metered network or if it’s a low end device and pre-rendering will have a negative effect on the overall performance of the device and won’t pre-fetch or pre-render on those scenarios. So, there’s no need to optimize your application for those cases.
Provide a fallback for when Custom Tabs is not installed
Although Custom Tabs is available for the great majority of users, there are some scenarios where a browser that supports Custom Tabs is not installed on the device or the device does not support a browser version that has Custom Tabs enabled.
Make sure to provide a fallback that provides a good user experience by either opening the default browser or using your own WebView implementation.
Add custom animations
Custom animations will make the transition from your application to the web content smoother. Make sure the finish animation is the reverse of the start animation, as it will help the user understand she’s returning to the content where the navigation started.
Adding text to the Action Button
Adding an Action Button will make users engage more with your app features. But, if there isn’t a good icon to represent the action your Action Button will perform, create a bitmap with a text describing the action.
Remember the maximum size for the bitmap is 24dp height x 48dp width.
Don't forget to add the referrer
It's usually very important for websites to track where their traffic is coming from. Make sure you let them know you are sending them users by setting the referrer on your Custom Tab.
Preparing for other browsers
Remember the user may have more than one browser installed that supports Custom Tabs. If there's more than one browser that supports Custom Tabs and none if them is the preferred browser, ask the user how she wants to open the link.
Allow the user to opt out of Custom Tabs
Add an option into the application for the user to open links in the default browser instead of using a Custom Tab. This is specially important if the application opened the link using the browser before adding support for Custom Tabs.
Let native applications to handle the content
Some URLs can be handled by native applications. If the user has the Twitter app installed and clicks on a link to a tweet. She expects that the Twitter application will handle it.
Before opening an url from your application, check if a native alternative is available and use it.
Customizing the toolbar color
Customize with your application's primary color if you want the user to feel that the content is a part of your application.
If you want to make it clear for the user that she has left your application, don’t customize the color at all.
Add a Share Action
Make sure you add the Share Action to the overflow menu, as users expect to be able to share the link to the content they are seeing in most use cases, and Custom Tabs doesn’t add one by default.
A simple implementation of a Broadcast Receiver that implements the sharing intent can be found here.
Customizing the close button
Customize the close button to make the Custom Tab feel it is part of your application.
If you want the user to feel like Custom Tabs is a modal dialog, use the default “X” button. If you want the user to feel the Custom Tab is part of the application flow, use the back arrow.
Handling Internal Links
When intercepting clicks on links generated by android:autoLink or overriding clicks on links on WebViews, make sure that your application handles the internal links and let's Custom Tabs handle the external ones.
Handling multiple clicks
If you need to do any processing between the user clicking on a link and opening the Custom Tab, make sure it runs in under 100ms. Otherwise people will see the unresponsiveness and may try to click multiple times on the link.
If it's not possible to avoid the delay, make sure you application is prepared for when a user clicks multiple times on the same link and does not open a Custom Tab multiple times.
