How to Use StyledPlayerControlView of Exoplayer in Jetpack Compose

Question

I am trying to use the custom controller in ExoPlayer and I used AndroidView Composable but don't know how to set its custom controller layout and confused that whether it would be an XML layout or a Composable. Thank You.

Answer 1

@Composable
fun VideoPlayer(videoUrl: String) {
    val context = LocalContext.current

    val exoPlayer = remember {
        ExoPlayer.Builder(context).build().apply {
            addMediaItem(MediaItem.fromUri(videoUrl))
            prepare()
            playWhenReady = true
        }
    }

    val playerView = remember {
            StyledPlayerView(context, null, 0).apply {
            player = exoPlayer
        }
    }

    Surface(color = Color.Black) {
        AndroidView(
           modifier = Modifier.fillMaxSize(),
           factory = {
               playerView
           }
        )
    }
}

Answer 2

In order to use a custom controller for exoPlayer using JetpackCompose, you must use the android ViewBinding API. Look here for more detail.

DisposableEffect(AndroidViewBinding(
        modifier = modifier,
        factory = ExoPlayerAbbreviatedBinding::inflate
    ) {
        this.exoPlayer.apply {
            hideController()
            useController = true
            resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
            player = exoPlayer
            layoutParams = FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
        }
    }) {
        onDispose {

            exoPlayer.pause()
            exoPlayer.release()
            
        }
    }

The ExoPlayerAbbreviatedBinding is a custom exoPlayerView, with a custom controller layout set.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/exo_player"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:controller_layout_id="@layout/custom_player_controller_abbreviated"/>

</FrameLayout>