In today’s tutorial, we will learn how to implement WebView in Kotlin Compose Multiplatform (KMP, KMM) for both Android & iOS platforms. We will cover a step-by-step guide to loading HTTP and HTTPS URLs in WebView, showing a progress indicator while loading.

WebView in Kotlin Compose Multiplatform (KMP, KMM):

In our previous article, we learned about Navigation in Compose Multiplatform. We will be using Navigation in our current tutorial. With the help of navigation, we will add two screens to our tutorial. The first screen is the Home Screen, and the Second is the WebView screen. On the Webview screen, we have added a Top bar where the URL will be shown loaded in the WebView. There is a catch. Currently, the KMP does not have its own WebView component when creating this tutorial. So we will use the Native WebView component for Android and the Native iOS WKWebView component.

1. Add Navigation in the KMP KMM App:

Please visit my Navigation in Compose Multiplatform article and add the required navigation dependency in your Compose Multiplatform project.

After setting up the navigation, we will follow the file structure below.

File structure:

1. composeApp -> src -> androidMain -> kotlin -> package -> webview -> WebViewScreen.kt
2. composeApp -> src -> iosMain -> kotlin -> package -> webview -> WebViewScreen.kt
3. composeApp -> src -> commonMain -> kotlin -> package -> webview -> WebViewScreen.kt
4. composeApp -> src -> commonMain -> kotlin -> package -> navigation -> Navigation.kt
5. composeApp -> src -> commonMain -> kotlin -> package -> screens -> HomeScreen.kt
6. composeApp -> src -> commonMain -> kotlin -> package -> screens -> CustomWebView.kt
7. composeApp -> src -> commonMain -> kotlin -> package -> App.kt

We will be working mainly on seven files.

Start coding for the app:

1. Add Internet permission for Android:

To use WebView in Android, we must add Internet permission in composeApp -> src -> androidMain -> AndroidManifest.xml file.

Complete source code of my AndroidManifest.xml file after adding the above permission:

2. Add Internet permission for iOS:

We must also add internet permission for iOS in App -> iosApp -> iosApp -> Info.plist file.

Complete source code of my Info.plist file after adding the above permission:

3. Creating a common WebViewScreen composable:

Create a composable file in composeApp -> src -> commonMain -> kotlin -> package -> webview -> WebViewScreen.kt .

Code explanation:

1. navController: To access the Navigation.
2. url: The webpage URL to load.
3. modifier: To apply size, padding, or other UI changes.
4. enableJavaScript: Whether JavaScript should be enabled or not.

4. Implement Android native WebView:

Creating a file in composeApp -> src -> androidMain -> kotlin -> package -> webview -> WebViewScreen.kt .

Code explanation:

1. isLoading is a state variable used to track the loading state of WebView.
2. TopAppBar shows the URL as the title.
3. An IconButton with a close (X) icon calls navController.popBackStack() to go back.
4. WebView.settings.javaScriptEnabled enables or disables JavaScript based on the passed parameter.
5. onPageStarted sets isLoading to true.
6. onPageFinished sets isLoading to false.
7. loadUrl(url) loads the specified web page.
8. A CircularProgressIndicator shows while loading the WebView.

5. Implement iOS native WebView:

Creating a file in composeApp -> src -> iosMain -> kotlin -> package -> webview -> WebViewScreen.kt

Code explanation:

1. TopAppBar is used to show the page URL as the title.
2. UIKitView embeds a native iOS WKWebView into the Compose UI.
3. WKWebViewConfiguration is configured to enable or disable JavaScript based on the enableJavaScript parameter.

6. Creating Navigation:

Creating a file in composeApp -> src -> commonMain -> kotlin -> package -> navigation -> Navigation.kt .

7. Creating Home Screen:

Creating a file in composeApp -> src -> commonMain -> kotlin -> package -> screens -> HomeScreen.kt .

Screenshot of Home screen:

8. Creating Custom WebView Screen:

Creating a file in composeApp -> src -> commonMain -> kotlin -> package -> screens -> CustomWebView.kt .

9. Creating App.kt file:

Screenshot on an Android device:

Screenshot is on an iOS device:

Happy coding.