Custom Tabs are a feature in Android browsers that gives app developers a way to add a customized browser experience directly within their app.
Loading web content has been a part of mobile apps since the early days of smartphones, but older options can present challenges for developers. Launching the actual browser is a heavy context switch for users that isn't customizable, while WebViews don't support all features of the web platform, don't share state with the browser and add maintenance overhead.
Custom Tabs offer a better user experience than simply opening an external browser. They allow users to remain within the app while browsing, increasing engagement and reducing the risk of users abandoning the app. They accomplish this by being powered directly by the user's preferred browser, and automatically sharing the state and features offered by it. You don't need to write custom code to manage requests, permission grants, or cookie stores.
What can Custom Tabs do?
By using a Custom Tab, your web content will load in whatever rendering engine powers your user's preferred browser. Any API or web platform feature is available there, and will be available in your Custom Tab. Their browsing session, saved passwords, payment methods, and addresses will all show up just like they are accustomed to already.
What can I customize in a Custom Tab?
Quite a bit! Custom Tabs give you fine grained control over a lot of the browser chrome and user experience. Within your app, you launch a Custom Tab via an Intent. When this Intent is called, you can add a number of attributes to the CustomTabIntent to get the exact experience you want. Some of the customizations that you are able to add are listed below.
Custom entrance and exit animations to match the rest of your app
Modifing the toolbar color to match your app's branding.
Color consistency that can stay with your app, even if they switch between light and dark themes.
Custom actions and entries to the browser's toolbar, and menus.
Control the launch height of the Custom Tab, enabling things like streaming your videos while interacting with your web store.
That is far from everything. Custom Tabs are very powerful, and under active development. Each browser needs to add support for these features as they become available. While nearly all have some level of support, it is important to know what may or may not be available in your user's browsers. We created a feature comparison table to quickly check the availability of the different features across popular Android browsers.
You can test this now with our sample on GitHub.
When should I use Custom Tabs?
- Security: Custom Tabs use 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.
- Speed up the page load time by speculatively loading URLs in advance.
- Lifecycle management: Apps launching a Custom Tab won't be evicted by the system during the Tabs use - its importance is raised to the "foreground" level.
- Shared cookie jar and permissions model so users don't have to sign-in to sites they are already connected to, or re-grant permissions they have already granted.
- Browser features like Data Saver are shared, if enabled - loading content faster and cheaper.
- Synchronized AutoComplete across devices for better form completion.
- Users can easily return to app with an integrated back button.
Custom Tabs vs Trusted Web Activity
Trusted Web Activities extend the Custom Tabs protocol and shares most of its benefits. But, instead of providing a customized UI, it allows developers to open a browser tab without any UI at all. It is recommended for developers who want to open their own Progressive Web App, in full screen, inside their own Android app.
Where are Custom Tabs available?
Custom Tabs is a feature supported by browsers on the Android platform. It was originally introduced by Chrome, on version 45. The protocol is supported by most Android browsers.
In addition to the GitHub Demo, we have a number of guides to help you get started with Custom Tabs.
- Getting started
- Customizing the UI
- Adding custom interactivity
- Warm-up and pre-fetch: using the Custom Tabs Service
- Multi-tasking with Partial Custom Tabs
- Measuring user engagement
For questions, check the chrome-custom-tabs tag on StackOverflow.