How to optimize AndroidView composable with a lazy list layout in compose

Question

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
}

Overlapping Items

Answer 1

使用 AspectRatioFrameLayout.RESIZE_MODE_FIT

Answer 2

I was having the same issue and update verticalpager to 0.25.1 exoplater to 2.18.1 and used a StyledPlayerView instead of PlayerView and it seems to be working.