Videoview to Match Parent Height and Keep Aspect Ratio

How can I preserve my Android VideoView's aspect ratio in proportion to its height only?

Adjust your VideoView's dimension programatically.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--parent needs to be matching the screen height-->
    <!--VideoView layout_width doesn't matter-->

    <VideoView
        android:id="@+id/video_player"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

// at onCreate or anywhere

        // post, because view dimension is not initialized yet in here
        videoView.post(new Runnable() {
            @Override
            public void run() {
                // do resizing here
                // AR = aspect ratio

                float videoARWidth = 16.f;
                float videoARHeight = 9.f;

                // Phone screen aspect ratio height
                float screenARHeight = 9.f;

                // scale to screen AR height
                float videoScale = screenARHeight / videoARHeight;

                float videoARRatio = videoARWidth / videoARHeight;

                // scale the ratio to screen
                float videoScaledARRatio = videoARRatio * videoScale;

                ViewGroup.LayoutParams layoutParams = videoView.getLayoutParams();

                // make sure the VideoView matches the screen height
                layoutParams.width = (int)(videoView.getHeight() * videoScaledARRatio);
                videoView.setLayoutParams(layoutParams);
            }
        });

This code does not care about the screen width.

The width will always scale to the screen height. Actually, it will always scale to its(VideoView) own height. But as I commented on the code, use layout_height = "match_parent" to match the screen.

I'm not sure if you want the width to fit if the screen width is bigger.

The video width will not fill the screen if the screen width is bigger.

Stretch to fill VideoView, aspect ratio of VideoView

Try to make your outer layout a relative layout and put the VideoView inside that.

Something like:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/trim_container"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >

     <LinearLayout
          android:id="@+id/buttonContainer"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal" >

     <Button
          android:id="@+id/go_back"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_gravity="center"  
          android:layout_weight="1"
          android:onClick="onclick"
          android:text="Try again" />

     <Button
          android:id="@+id/back_to_pick_song"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:text="Select another song" 
          android:onClick="onclick" />

    <Button
          android:id="@+id/btn_continue"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:layout_weight="1"
          android:onClick="onclick"
          android:text="Amazing, continue!" />
  </LinearLayout>

  <VideoView
     android:id="@+id/VideoView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_alignParentLeft="true"
     android:layout_alignParentRight="true"
     android:layout_alignParentBottom="true"
     android:layout_below="@id/buttonContainer"/>
</RelativeLayout>

Related Topics