CODEWITHSUNDEEP
androidexoplayer
schneida
schneida

Reputation: 809

ExoPlayer layout with fixed aspect ratio

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>

Upvotes: 5

Views: 13494

Answers (3)

Albert Vila Calvo
Albert Vila Calvo

Reputation: 15835

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.

Upvotes: 6

Kyle Venn
Kyle Venn

Reputation: 8038

We're not using SimpleExoPlayer (we're just using a Surface instead), but we wrap that in a FixedAspectRatioFrameLayout.

The SimpleExoPlayer should then be nested in that FrameLayout and the width and height be set to match_parent and it should fill the correct space.

Let me know if that works out.

[EDIT] In the FixedAspectRatioFrameLayout:

mAspectRatioWidth = a.getInt(R.styleable.FixedAspectRatioFrameLayout_aspectRatioWidth, 4);
mAspectRatioHeight = a.getInt(R.styleable.FixedAspectRatioFrameLayout_aspectRatioHeight, 3);

Where it says 4 and 3, that's where you'd put your 16 and 9.

Upvotes: 0

Theo
Theo

Reputation: 69

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.

Upvotes: 1

Related Questions