CODEWITHSUNDEEP
kotlinandroid-jetpack-composeexoplayerandroid-media3
Daniyal Khan
Daniyal Khan

Reputation: 43

How to add custom ui controller in Exoplayer and media 3 with jetpack compose like old views system in android?

I'm using Exoplayer with the Media 3 library. I can't add custom handles in Exoplayer like we used to do in the old view system.

I'm expecting to add customized UI with controllers same as the old view system in the new jetpack compose. So far I'm enable to play video with its default UI controller but can't do customization. Please help how can I add a customizable view in Exoplayer?

Upvotes: 3

Views: 1994

Answers (1)

Adil Raza Bangash
Adil Raza Bangash

Reputation: 295

You can add custom ui to androidx.media3 library. First of all create a layout player_controls.xml for your custom controls like below

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

   <ImageButton android:id="@id/exo_play_pause"
    android:layout_gravity="center"
    android:background="@drawable/your_custom_shape"
    style="@style/ExoStyledControls.Button.Center.PlayPause"/>

   //Add more controls you need and design them according to your needs

 </FrameLayout>

Then in your main xml with your playerview add the custom controls layout as follow

       <androidx.media3.ui.PlayerView
        android:id="@+id/video_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ads:controller_layout_id="@layout/player_controls"/>

Upvotes: 0

Related Questions