How to Seamlessly Embed Web Content in Android Apps — Part 1
Web content can be embedded into Android applications, leveraging the power and flexibility of the web within native apps. This allows for the seamless integration of existing web content like news feeds, interactive tutorials, ads, or mini-games, without having to build everything from scratch. It essentially creates a “window to the internet” within the app.
There are two primary ways to embed web content in an Android app:
- WebView: This option is used for displaying web content directly within your app where you need a high degree of control over the UI.
- Custom Tabs: This provides a full in-app Browse experience, powered by the user’s default browser. It’s ideal for situations where users click a link and you want to keep them within the app, rather than directing them to an external browser.
Why Embed Web Content?
Embedding web content offers several benefits:
- Efficiency: You can reuse existing code from your website and build upon existing web technologies and content.
- Integration: It allows for leveraging external content from third-party providers, such as media and advertisements, within your app.
- Flexibility: Content can be updated dynamically without being restricted by predefined UIs or requiring app updates.
When to Use Web Content
There are three main use cases for integrating web content into your Android app:
- Embedding web content as primary or supporting content (using WebView): This is suitable for displaying your own web content inline as a core experience, especially when you require significant flexibility in customizing or updating the UI. It can also be used for displaying other content like ads, legal terms, or third-party content inline.
- In-app Browse (using Custom Tabs or WebView for advanced cases): Custom Tabs are recommended for providing a full in-app Browse experience when users click a link, ensuring they remain within the app instead of navigating to an external browser. For larger screens like tablets and foldables, apps can open web links in a split-screen multi-window experience, allowing users to multitask between the app and a browser. Custom Tabs also have a side panel option to open content next to your existing app content in the same task. While WebView can also offer a customizable in-app Browse experience, Custom Tabs provide an out-of-the-box solution with a seamless transition when a user wants to open a web link in their browser.
- Login or authentication flows: Android’s suggested approach for login and authentication is to use Credential Manager. However, if embedded web experiences are still necessary, WebViews can be used to provide sign-in flows for your users, including using a username and passkey (or password) specific to your app. This enables developers to unify authentication flows across platforms. For linking to third-party identity providers (e.g., “Sign in with…”), Custom Tabs are preferred as they ensure user credentials remain protected and isolated to the third-party site.
Understanding WebView
The WebView API grants developers access to a mini-browser’s capabilities for displaying web content within their application. This enables web-powered experiences to be a core or supporting part of the application.
What WebView Can Do:
- Embed web: A WebView integrates into an app’s UI like any other component, much like a button or text field.
- Load content: WebView can load content from various sources: remote URLs (just like a regular browser), local HTML, CSS, and JavaScript files stored within the app’s resources, and dynamically generated HTML content.
- Render: It uses its browser engine to parse and render HTML, CSS, and JavaScript, displaying the resulting web page within its designated area in the app’s UI.
- Execute JavaScript: WebView can execute JavaScript code within the context of the loaded web page, allowing for dynamic interactions and updates.
- Native app interaction: This is where WebView becomes more powerful, allowing for bidirectional communication between the web page and the app. JavaScript code running in WebView can call host APIs of the app, enabling access to device features like the camera, GPS, or sensors. Conversely, the app can also inject JavaScript code into WebView, manipulate the web page’s content, or respond to events triggered by the web page.
WebView vs. Standard Browsers (e.g., Chrome):
WebView is a highly custom component that provides the core functionality of a window into the web. Unlike a full browser, which provides much of the navigation bar and other user needs to navigate the web more broadly, the overall experience of WebView is shaped by your app’s design and purpose. WebView does not have its own header or UI like most other common browsers (home button, URL bar, navigation, settings, etc.). Browsers often have additional features such as bookmarks, permissions, or history.
Updates: Android WebView is a system service, and updates are automatically pushed and integrated into apps automatically on a monthly basis. In contrast, browsers rely on their corresponding app updates, which then need to be applied by end-users on their devices.
Android’s Capabilities with Web Content:
- Android is a powerful platform for native app experiences.
- It allows extending capabilities by integrating web content.
- Over 3 million Android apps utilize embedded web content.
WebView Specifics:
- Description: WebView is an Android system component that displays web pages within an activity layout. It is customizable and controllable for seamless integration with native apps, and it’s built on the open-source Chromium engine. It lacks traditional browser features like navigation controls or an address bar.
Use Cases:
- Adding web content to the main app experience where you own or control the content.
- HTML text editing.
- HTML-based web pages (articles, lists, web games).
- Content with high iteration frequency (e.g., in-app campaigns, news articles).
- Displaying third-party content like ads.
- Customization Examples: Resizing web elements, handling form submissions, and using JavaScript to interact with app code.
- Recent Updates: Integration with Family Link content controls, support for payment providers (Google Pay), support for passkeys as an authentication method, and improved startup load and rendering times through async startup API, prefetch API, and prerender API.
Custom Tabs vs. WebView: Choosing the Right Tool
Both Custom Tabs and WebView are APIs available to power your in-app experience, but choosing which one is best for you depends on your use case. Here are some advantages of each:
Custom Tabs
- Ease of integration: Integrating Custom Tabs is the simplest and easiest way to provide users an Embedded Web Browse experience.
- Shared state: Reduced user friction when logging into sites given shared cookies and permissions model with the browser.
WebViews
- More advanced UI control of the browser view.
- Ability to modify the contents of the web page itself.
- Deeper developer analytic insight into engagement / activity.
- WebView updates roll out to all devices and users consistently and globally.
@Composable
private fun MainScreen() {
val url = remember { "https://www.google.com" }
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Column(
modifier = Modifier.padding(innerPadding)
) {
WebView(
modifier = Modifier.weight(0.8f),
url = url
)
val context = LocalContext.current
Button(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
onClick = {
val customTabsIntent = CustomTabsIntent.Builder().build()
customTabsIntent.launchUrl(context, url.toUri())
}
) {
Text("Click Me")
}
}
}
}
Summary
This blog post introduces the fundamental concepts of embedding web content within Android applications using both WebView and Custom Tabs. It explores the benefits of integrating web content, such as efficiency, integration, and flexibility, and outlines key use cases including displaying primary/supporting content, in-app Browse, and authentication flows. We delve into the capabilities of WebView, how it differs from a standard browser, and its specific use cases and recent updates. Finally, we provide a high-level comparison between Custom Tabs and WebView to help developers understand their core advantages, setting the stage for more detailed discussions on their implementation in future posts.
