Compose WebView Part 1 Load URL

WebView With Jetpack Compose in Android Studio | Kotlin | Jetpack Compose | Android Tutorials

In Android, a Compose WebView is an extension of View Class that allows us to display webpages. In simpler words, if you want to display a webpage in Activity Layout, then you can implement a WebView to display it. 

Add INTERNET permission in the AndroidManifest.xml file

Navigate to the AndroidManifest.xml file and add INTERNET permission as shown below.

  <!-- Add this permission -->
<uses-permission android:name="android.permission.INTERNET"/>

..

Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

package com.blogspot.boltuix

import android.os.Bundle
import android.view.ViewGroup
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.AndroidView

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WebViewPage("https://www.boltuix.com/")
        }
    }
}




@Composable
fun WebViewPage(url: String){
    // Adding a WebView inside AndroidView
    // with layout as full screen
    AndroidView(factory = {
        WebView(it).apply {
            layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
            webViewClient = WebViewClient()
            loadUrl(url)
        }
    }, update = {
        it.loadUrl(url)
    })

}

..

Android: Cleartext HTTP traffic not permitted Android 9

Starting with Android 9.0 (API level 28), cleartext support is disabled by default.

AndroidManifest.xml -

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

..

GET full source code on Github:

https://github.com/BoltUIX/Compose-Web-View

..

..