0

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 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
}
Shahbaz Hussain
  • 542
  • 4
  • 21

0 Answers0