A Modern WebView Alternative: AndroidX Browser for Jetpack Compose

Welcome back! In this article, we are going to learn what is androidx.browser library, and how it is the best way to display web content in our android app, also learn how to integrate this into our android studio project, and explore some customization in it for displaying web content and more. Let’s begin.

What is browser library in androidx package?

androidx.browser library helps us to display the web pages in the user’s default browser through Android Custom Tabs . For instance, in a news app, when the user clicks on the detail page for specific news that go to the specific website, we can show this webpage in our app from a user’s default browser application. It might be chrome, or any other browser they’ve set as default. This approach ensures a better user experience while leveraging the browser’s capabilities and security features.

Why android custom tabs?

Displaying web pages as a part of our application is a common requirement for android apps. I see a lot of apps that use WebView for just displaying web pages within their app. It comes with several drawbacks:

• Heavy Context Switch: It launches the actual browser, which is a heavy context switch for users that isn’t also customisable like It doesn’t include the features of a fully developed web browser, such as navigation controls or an address bar
• Compose Integration Challenges: Apart from this, WebView is from the Views System, so there is no straight forward implementation to integrate into a compose project. While interoperability APIs like AndroidView can bridge the gap, this isn’t an ideal or elegant solution.

So, why stick with WebView for displaying web pages? Instead, use Custom Tabs!

WikiNews App demo that has Custom Tab implementation

Integrating on a Compose Project

Add the dependencies for the artifacts you need in the build.gradle file for your app or module:

dependencies {
    implementation("androidx.browser:browser:1.8.0")
}

Use the CustomTabsIntent.Builder to create a CustomTabsIntent and launch the Custom Tab by calling launchUrl() and passing an Uri:

val url = "https://kotlinlang.org/docs/home.html"

val intent = CustomTabsIntent.Builder()
        .setShowTitle(true) //
        .setUrlBarHidingEnabled(true)
        .build()
    intent.launchUrl(this@MainActivity, Uri.parse(url))

Customizing the apperances

val intent = CustomTabsIntent.Builder()
…
.setShowTitle(true)
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.setUrlBarHidingEnabled(true)
.build();

• .setShowTitle(true) — Sets whether the web page title should be shown in the custom tab.
• .setStartAnimations(…) and .setExitAnimations — Enter and Exit animations when user enters and leaves the web page.
• .setUrlBarHidingEnabled — Hide the URL bar on scroll to give the user more space to explore web content.

These are just a few basic customizations. There’s much more you can do, like adding custom menu items, or integrating Chrome-specific features etc.

For a comprehensive guide, check out the official documentation here. here.

Conclusion

In this article, we explored how the androidx.browser library and Android Custom Tabs provide a modern, secure, and user-friendly alternative to WebView for displaying web content within Android applications. With features like seamless integration with the user's default browser, enhanced security, and extensive customization options, Custom Tabs offer an efficient way to enrich your app's functionality while ensuring a smooth user experience.

For real world demonstration of this custom tabs don’t forgot to checkout my WikiNews Github project.

GitHub - MubarakNative/WikiNewsFeed: WikiNewsApp: A modern Android client for fetching and…