Implementing WebView With Jetpack Compose

Introduction

Hello! 😎

In this tutorial I will show you how simple it is to display a webpage using webview in an Android app that uses Jetpack Compose.

WebView is a component that allows you to display web pages directly inside your application.

Jetpack Compose is a modern toolkit for building UI in Android apps. It simplifies and accelerates UI development on Android with a lot less code and intuitive Kotlin APIs. 🤓

Requirements

Android Studio

Creating The Project

First fire up Android Studio and create a new Empty Activity project like so.

Image of creating a new project 1

Next give the new project a name, for this project I decided to go with Simple WebView, once entered click on Finish and wait for the project to finish its initial build.

Creating a new project 2

Writing The Code

Now that the new project is fully build and initialized, we can start coding.

First we need to import the following packages, add them to the top of the file:

package com.example.simplewebview  

import android.annotation.SuppressLint  
import android.os.Bundle  
import android.webkit.WebView  
import android.webkit.WebViewClient  
import androidx.activity.ComponentActivity  
import androidx.activity.compose.setContent  
import androidx.compose.foundation.layout.fillMaxSize  
import androidx.compose.material3.MaterialTheme  
import androidx.compose.material3.Surface  
import androidx.compose.runtime.Composable  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.tooling.preview.Preview  
import androidx.compose.ui.viewinterop.AndroidView  
import com.example.simplewebview.ui.theme.SimpleWebViewTheme

Next we will define the url that we want our webview to show, I have decided to define it as a variable:

const val PAGE_URL = "https://ethan-dev.com"

Feel free to change the URL to your own page or a random URL.

Next we need to define the MainActivity class, which is the following:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SimpleWebViewTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    WebViewScreen()
                }
            }
        }
    }
}

Don't worry about any errors that may pop up we will be fixing them shortly.

Next we will define the Compsable for the WebView that will show the webpage.

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun WebViewScreen() {
    AndroidView(
        factory = { context ->
            return@AndroidView WebView(context).apply {
                settings.javaScriptEnabled = true
                webViewClient = WebViewClient()

                settings.loadWithOverviewMode = true
                settings.useWideViewPort = true
                settings.setSupportZoom(false)
            }
        },
        update = {
            it.loadUrl(PAGE_URL)
        }
    )
}

The above will give you a warning about JavaScript so we suppress that warning. If the site you want to display does not use JavaScript than I recommend you turning JavaScript enabled to false.

We also initialize the WebView, apply some settings to it and in the update event we load the page.

Finally if you want you can also define a Preview like so:

@Preview(showBackground = true)
@Composable
fun WebViewScreenPreview() {
    SimpleWebViewTheme {
        WebViewScreen()
    }
}

And thats it! In just a few lines we have managed to display a webpage in a WebView with Jetpack Compose!

If you build and run the app in an emulator or on your own device, you should see the webpage being displayed. 😃

Conclusion

Here I have shown how to build a simple WebView application using Jetpack Compose. It was a lot easier to implement than I had imagined. 😸

Also it seems you can't preview the WebView? If you can manage to preview the WebView component, please tell me how you did it. 👀

As always you can find the sample code for the above on my Github: https://github.com/ethand91/compose-webview

Happy Coding! 😎

Like my work? I post about a variety of topics, if you would like to see more please like and follow me. Also I love coffee.

If you are looking to learn Algorithm Patterns to ace the coding interview I recommend the [following course](https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch