How to load html page with jetpack compose?

Last updated Sep 06, 2021

In this Jetpack compose tutorial we will learn How to load html page with jetpack compose in Android application using Jetpack Compose.

Jetpack compose doesn't have any direct compose functions to load html/web content. For this we will use AndroidView compose function which will load views. So to load html content we will use Webview view inside AndroidView compose API.

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Step 3:Lets add one simple example of html form page

Here is the html content

"<!DOCTYPE html>
    <html>
<body>

<h2>Fruits List</h2>

<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ul>

<h2>Language</h2>

<ol>
<li>Hindi</li>
<li>English</li>
<li>Bengali</li>
<li>Spanish</li>
</ol>

</body>
</html>"

We are going to render this html page using Webview

We know that Webview is an subclass of a View through which we can load different web pages.

Lets Add a WebView inside AndroidView where Android View is used to to render views that are not avaiable in Compose.

AndroidView(factory = {
  WebView(context).apply {
  webViewClient = WebViewClient()
  loadDataWithBaseURL(null, htmlPage, "text/HTML", "UTF-8", null)
}
})

Share Intent with Jetpack Compose

To share url, content with Jetpack compose done by below code

@Composable
fun ArticleView(
    
) {
    val context = ContextAmbient.current
    val shareIntent = Intent(Intent.ACTION_SEND)
    shareIntent.type = "text/plain"
    shareIntent.putExtra(Intent.EXTRA_TEXT, "https://rrtutors.com/Jetpack-Compose")
    shareIntent.putExtra(Intent.EXTRA_SUBJECT, "Jetpacl compose Example")
    startActivity(
        context,
        Intent.createChooser(shareIntent, null),
        null
    )
}

Full Code

package com.example.jetpack

import android.os.Bundle
import android.view.WindowManager
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.viewinterop.AndroidView
import com.example.jetpack.ui.theme.JetPackTheme

class MainActivity : ComponentActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
    setContent {
      MaterialTheme {
        // A surface container using the 'background' color from the theme
        Surface(color = MaterialTheme.colors.background) {
          LoadHtml()
        }
      }
    }
  }
}

@Composable
fun LoadHtml() {
  val loadHtmlPage = remember { mutableStateOf(false) }
  val context = LocalContext.current
  val htmlPage = "\n" +
      "\n" +
      "\n" +
      "\n" +
      "

Fruits List

\n" + "\n" + "

\n" + "
- Apple
- \n" + "
  - Mango
  - \n" + "
    - Banana
    - \n" + "
    \n" + "\n" + "
    Language
    \n" + "\n" + "
    1. \n" + "
      - Hindi
      - \n" + "
        
        English
        
        \n" + "
        
        Bengali
        
        \n" + "
        
        Spanish
        
        \n" + "
    \n" + "\n" + "\n" + "" Column( content = { if (!loadHtmlPage.value) { Button(onClick = { loadHtmlPage.value = true }) { Text("Load Html Page") } } if (loadHtmlPage.value) { AndroidView(factory = { WebView(context).apply { webViewClient = WebViewClient() loadDataWithBaseURL(null, htmlPage, "text/HTML", "UTF-8", null) } }) } }, modifier = Modifier .fillMaxWidth() .fillMaxHeight() ) } @Preview(showBackground = true) @Composable fun DefaultPreview() { JetPackTheme { LoadHtml() } }

Conclusion: In this jetpack compose example we covered how to load web content/html content in webview and also learned how to share url with jetpack compose share intent feature.

Article Contributed By :

5213 Views

Projects By category