ExoPlayer layout with fixed aspect ratio

Question

I'm trying to build a YouTube like view using ExoPlayer on Android. I would like the video to appear at the top followed by some other content like title, description, etc. All my videos are 16:9 and I would like the SimpleExoPlayerView to start out in the 16:9 layout. With the layout below, the player occupies the whole screen for a couple of seconds before switching to the correct aspect ratio of the video:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:keepScreenOn="true">

  <com.google.android.exoplayer2.ui.SimpleExoPlayerView android:id="@+id/player_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:resize_mode="fixed_width">

  </com.google.android.exoplayer2.ui.SimpleExoPlayerView>

  <TextView
    android:id="@+id/text_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:text="VideoTitle"
    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

  <TextView
    android:id="@+id/text_description"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:text="description" />
</LinearLayout>

Answer 1

We are using the bundled AspectRatioFrameLayout that comes with ExpoPlayer:

https://exoplayer.dev/doc/reference/com/google/android/exoplayer2/ui/AspectRatioFrameLayout.html

That's how you use it:

<com.google.android.exoplayer2.ui.AspectRatioFrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:resize_mode="fixed_width">

    <!-- Preview image -->
    <ImageView
        android:id="@+id/imageViewVideo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:contentDescription="@string/img_content_training_video_preview"
        android:focusable="true"
        android:scaleType="centerCrop" />

    <!-- Play button -->
    <ImageView
        android:id="@+id/imageTrainingPreviewIcon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:contentDescription="@string/img_content_training_video_preview"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_play" />

    <!-- Video player -->
    <com.google.android.exoplayer2.ui.SimpleExoPlayerView
        android:id="@+id/player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorBlack"
        android:visibility="gone" />

    <!-- ProgressBar -->
    <include layout="@layout/custom_video_loading_progressbar" />

</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

Then on your Activity or Fragment you must set the aspect ratio:

aspectRatioFrameLayout.setAspectRatio(16f/9f)

You can also set the resize mode in code with setResizeMode.

Answer 2

Since the height of your SimpleExoPlayerView is "wrap_content", the system takes time to measure the correct height (it took a couple of seconds as you stated). I would recommend you to use specific values for height depending on the actual width. For example, a device with sw360 should have a height of 203, a device with sw400 should have a height of 225, a device with sw480 should have a height of 270. By that way, you can also maintain the 16:9 aspect ratio.