Skip to content

Instantly share code, notes, and snippets.

@rock3r
Created June 16, 2022 16:13
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rock3r/65642c73de8602ac40a340c84e20b16a to your computer and use it in GitHub Desktop.
Save rock3r/65642c73de8602ac40a340c84e20b16a to your computer and use it in GitHub Desktop.
WebView Compose scroll example
package dev.sebastiano.webviewcompose
import android.annotation.SuppressLint
import android.content.Context
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.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import dev.sebastiano.webviewcompose.ui.theme.WebviewComposeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
WebviewComposeTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(Modifier.fillMaxSize()) {
var scrollY by remember { mutableStateOf(0) }
PageBodyWithWebView(
pageUrl = "https://www.google.it",
onWebpageScroll = { _, y -> scrollY = y },
modifier = Modifier
.fillMaxWidth()
.weight(1f)
)
Text(
text = "Y: $scrollY",
style = MaterialTheme.typography.subtitle1,
modifier = Modifier
.background(Color.Red)
.fillMaxWidth()
.padding(16.dp)
)
}
}
}
}
}
}
@SuppressLint("SetJavaScriptEnabled")
@Composable
fun PageBodyWithWebView(
pageUrl: String,
onWebpageScroll: (x: Int, y: Int) -> Unit,
modifier: Modifier = Modifier
) {
val context = LocalContext.current
AndroidView(
modifier = modifier
.fillMaxWidth()
.fillMaxHeight(),
factory = {
MyWebView(context).apply {
settings.javaScriptEnabled = true
webViewClient = WebViewClient()
onScrollListener = onWebpageScroll
loadUrl(pageUrl)
}
})
}
class MyWebView(context: Context) : WebView(context) {
var onScrollListener: ((x: Int, y: Int) -> Unit)? = null
override fun onScrollChanged(l: Int, t: Int, oldl: Int, oldt: Int) {
super.onScrollChanged(l, t, oldl, oldt)
onScrollListener?.invoke(l, t)
}
}
@coderforlife
Copy link

@rock3r In a ModalBottomSheet none of the scroll events seem to fire at all inside the WebView.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment