How to Seamlessly Embed Web Content in Android Apps — Part 2
In my previous blog post, “How to Seamlessly Embed Web Content in Android Apps — Part 1”, I introduced the fundamental concepts of embedding web content within Android applications. I discussed the two primary approaches: WebView and Custom Tabs, highlighting their general uses and benefits.
This second part of the series will dive deeper into Custom Tabs, exploring what they are, why and when a developer should choose them, and how to get started with their implementation.
What are Custom Tabs?
Custom Tabs are a feature in Android browsers that allows app developers to provide a customized browser experience directly within their app. Unlike launching a full browser, which can be a heavy context switch for users and lacks customization , Custom Tabs enable users to remain within the app while Browse, thereby increasing engagement and reducing the risk of users abandoning the application.
Custom Tabs are powered directly by the user’s preferred browser and automatically share the state and features offered by it. This means developers don’t need to write custom code to manage requests, permission grants, or cookie stores. When using a Custom Tab, your web content loads in whatever rendering engine powers your user’s preferred browser. Any API or web platform feature available in the browser is also available in your Custom Tab. User’s Browse sessions, saved passwords, payment methods, and addresses all appear as they are accustomed to.
Why Choose Custom Tabs?
Choosing Custom Tabs offers several advantages for developers:
- Ease of Integration: Custom Tabs provide the simplest and easiest way to offer users an embedded web Browse experience.
- Shared State: They reduce user friction by sharing cookies and the permissions model with the default browser, meaning users don’t have to sign in to sites they are already connected to or re-grant permissions they have already granted.
- Security: Custom Tabs utilize Google’s Safe Browse to protect the user and the device from dangerous sites.
- Performance Optimization: They support pre-warming the browser in the background without stealing resources from the application and can speed up page load times by speculatively loading URLs in advance.
- Lifecycle Management: Apps launching a Custom Tab won’t be evicted by the system during the tab’s use, as the importance of the Custom Tab is raised to the foreground level.
- Browser Features: Features like autofill for better form completion are available out-of-the-box.
- User Experience: Users can return to the app with an integrated back button and can minimize a Custom Tab to interact with the underlying app, then restore it without losing progress.
When to Choose Custom Tabs?
While there’s no single “correct” way to load web content , Custom Tabs are generally a better choice when your app directs users to URLs outside of your own domains, due to the built-in shared state. This makes them ideal for in-app Browse experiences where users click a link, and you want to keep them within your application context instead of launching an external browser. For larger screens like tablets and foldables, Custom Tabs can even open web links in a split-screen multi-window experience, allowing users to multitask. For linking to third-party identity providers or login experiences (e.g., “Sign in with…”), Custom Tabs are preferred as they ensure user credentials remain protected and isolated to the third-party site.
Getting Started with Custom Tabs
To begin using Custom Tabs in your Android application, you’ll first need to include the Custom Tabs library in your build.gradle file.
dependencies {
implementation("androidx.browser:browser:1.8.0")
}Launching Your First Custom Tab
Once the dependency is added, launching a Custom Tab is straightforward. You’ll typically use CustomTabsIntent.Builder to construct an intent and then launch it.
@Composable
fun CustomTabsView() {
val context = LocalContext.current
val url = "https://www.google.com"
Column(
modifier = Modifier.fillMaxSize()
.padding(16.dp)
) {
Button(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
onClick = {
val customTabsIntent = CustomTabsIntent.Builder().build()
customTabsIntent.launchUrl(context, url.toUri())
}
) {
Text("Basic Custom Tabs")
}
}
}
Opening a Custom Tab for links within a WebView is also possible, and this advanced integration will be explored in the next blog post.
Customizing Custom Tabs
The CustomTabsIntent.Builder provides a variety of methods to customize the appearance and behavior of the Custom Tab. You can configure elements like the toolbar color, add custom actions, and even set custom entrance and exit animations to match your app's branding. Some customization examples include:
- Custom entrance and exit animations to match the rest of your app
- Modifying 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
- Controlling the launch height of the Custom Tab
val customTabsIntent = CustomTabsIntent
.Builder()
.setShowTitle(true)
.setStartAnimations(context, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(context, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build()
customTabsIntent.launchUrl(context, url.toUri())
You can find a comprehensive list of customization functions in the Chrome developer documentation.
Conclusion
Custom Tabs offer a powerful and seamless way to embed web content within Android applications. They provide a customizable in-app Browse experience, leveraging the user’s default browser for shared states like cookies and permissions, enhancing security, and optimizing performance. Custom Tabs are particularly beneficial for external links and third-party authentication, allowing users to multitask and stay within the app context. By choosing Custom Tabs, developers can deliver a smooth and integrated web experience, balancing control with ease of implementation.
