I have got two problems, scrolling through LazyColumn or VerticalPager with AndroidView filling the whole screen as a child item lags the screen and the scrolling behavior for a couple of milliseconds as well as overlapping items. In my code the AndroidView creates PlayerView, I also tried to replace PlayerView with a TextView to check maybe the problem is with PlayerView itself. I can't seem to find the root of the problem exactly, maybe with the AndroidView or the implementation of the VerticalPager itself, or maybe because it fills the whole screen?
ViewScreen
@OptIn(ExperimentalPagerApi::class)
@Composable
fun VideoScreen() {
val pagerState = rememberPagerState()
Box {
VerticalPager(
count = videos.size,
state = pagerState,
horizontalAlignment = Alignment.CenterHorizontally,
itemSpacing = 10.dp
) { index ->
VideoPlayer(
vid = videos[index],
shouldPlay = false
)
}
}
}
VideoPlayer
@Composable
fun VideoPlayer(
vid: Video,
shouldPlay: Boolean
) {
val exoPlayer = rememberExoPlayerWithLifecycle(vid.url)
val playerView = rememberPlayerView(exoPlayer)
AndroidView(
factory = { playerView },
modifier = Modifier,
update = {
exoPlayer.playWhenReady = shouldPlay
}
)
DisposableEffect(key1 = true) {
onDispose {
exoPlayer.release()
}
}
}
rememberExoPlayerWithLifecycle
@Composable
fun rememberExoPlayerWithLifecycle(
url: String
): ExoPlayer {
val context = LocalContext.current
val exoPlayer = remember(url) {
ExoPlayer.Builder(context).build().apply {
videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT
repeatMode = Player.REPEAT_MODE_ONE
setHandleAudioBecomingNoisy(true)
val defaultDataSource = DefaultHttpDataSource.Factory()
val source = ProgressiveMediaSource.Factory(defaultDataSource)
.createMediaSource(MediaItem.fromUri(url))
setMediaSource(source)
prepare()
}
}
var appInBackground by remember {
mutableStateOf(false)
}
val lifecycleOwner = LocalLifecycleOwner.current
DisposableEffect(key1 = lifecycleOwner, appInBackground) {
val lifecycleObserver = getExoPlayerLifecycleObserver(exoPlayer, appInBackground) {
appInBackground = it
}
lifecycleOwner.lifecycle.addObserver(lifecycleObserver)
onDispose {
lifecycleOwner.lifecycle.removeObserver(lifecycleObserver)
}
}
return exoPlayer
}
rememberPlayerView
@Composable
fun rememberPlayerView(exoPlayer: ExoPlayer): PlayerView {
val context = LocalContext.current
val playerView = remember {
PlayerView(context).apply {
layoutParams = ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT)
useController = false
resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
player = exoPlayer
setShowBuffering(SHOW_BUFFERING_ALWAYS)
}
}
DisposableEffect(key1 = true) {
onDispose {
playerView.player = null
}
}
return playerView
}
build.gradle (Project)
buildscript {
ext {
compose_version = '1.3.0-beta01'
}
}
plugins {
...
id 'org.jetbrains.kotlin.android' version '1.7.10' apply false
}
...
build.gradle (Module)
...
dependencies {
...
//Pager
implementation "com.google.accompanist:accompanist-pager:0.26.2-beta"
//Media 3
def mediaVersion = "1.0.0-beta02"
implementation "androidx.media3:media3-exoplayer:$mediaVersion"
implementation "androidx.media3:media3-ui:$mediaVersion"
...
}
Overlapping Items
