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>

score 6 · Answer 1 · answered May 27 '19 at 10:29

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.

thanks this solved the problem for me in portrait mode but in landscape the the video layout goes beyond the display width and the timeline can't be seen. any specific guideline for landscape mode? — Mohit Yadav, Sep 11 '20 at 17:51
@MohitYadav I have this same problem of the layout in landscape. Did you ever find a solution? — Panama Jack, May 25 '22 at 02:10

score 1 · Answer 2 · answered Feb 22 '18 at 20:13

1

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.

answered Feb 22 '18 at 20:13

Theo

69
4

How exactly would you implement this? I have now a somewhat working solution that uses `DisplayMetrics` to get the width of the screen and calculate the height accordingly and set it as height layout parameter of the exo player. It works, but it seems strange that there is no smarter way... – schneida Feb 28 '18 at 09:36

Kyle Venn · Answer 3 · 2018-02-28T15:01:40.040

0

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.

edited Feb 28 '18 at 15:01

answered Feb 22 '18 at 19:38

Kyle Venn

4,597
27
41

I tried your solution but the FixedAspectRatioFrameLayout you suggested always takes 50% of the height - how does it need to be configured? – schneida Feb 28 '18 at 09:37
Just updated on how to set the aspect ratio. As for the height of the view, you set that like you'd set the height of any view. – Kyle Venn Feb 28 '18 at 15:02

ExoPlayer layout with fixed aspect ratio

3 Answers3