I am trying to make an ExoPlayer custom texture view. I intend to make it so that the video should fill in the whole UI container for a given fixed width & height. For instance, I know most of my videos are of 9:16 aspect ratio so I kept the UI container with fixed width and height in the same ratio (Example, 180dpx320dp). For videos with other aspect ratios such as landscape, I want the video to fit inside the container width-wise.
I used AspectRatioFrameLayout for that and used the resize mode FIT, but it is not filling up the full width of the container. I checked the video aspect ratio inside the onVideoSizeChanged method and it was correctly in the 9:16 aspect ratio but still, this issue is happening. I tried using resize mode ZOOM, but then it is cropping the video. Can anyone help here? I am not able to understand where I am going wrong with this.
Here's the video view with resize mode FIT
The code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_marginHorizontal="10dp">
<androidx.cardview.widget.CardView
android:id="@+id/video_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="18dp"
app:cardElevation="0dp"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<com.example.test.ExoPlayerView
android:id="@+id/video_player_view"
android:layout_width="match_parent"
android:layout_height="320dp"
android:visibility="gone"
app:resize_mode="fit"
app:surface_type="texture_view"
tools:visibility="visible" />
</androidx.cardview.widget.CardView>
<com.magicpin.local.common.views.TypefacedTextView
android:id="@+id/title_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="4dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toTopOf="@id/video_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/video_container"
app:layout_constraintVertical_bias="0"
app:layout_constraintVertical_chainStyle="packed"
app:lineHeight="20sp"
tools:text="Test title" />
</androidx.constraintlayout.widget.ConstraintLayout>
ExoPlayerView XML
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.exoplayer2.ui.AspectRatioFrameLayout
android:id="@id/exo_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<!-- Video surface will be inserted as the first child of the content frame. -->
<com.google.android.exoplayer2.ui.SubtitleView
android:id="@id/exo_subtitles"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>
</merge>
UPDATE
This was fixed. Turned out I was using this inside a pager and the view pager page width was causing the extra width inside the page despite the fixed width provided to the page item layout.
I fixed it using the overridden getPageWidth()
method to take into consideration the intended item UI fixed with for calculating the pageWidth ratio w.r.t screen width.
Example
override fun getPageWidth(position: Int): Float {
val screenWidth = getScreenWidthInPx(context)
return (itemWidthInPx + horizontalMarginInPx) / screenWidth
}