Android Video not fitting the width in portrait of the videoview and not occupying full screen in landscape

Question

Android video not fitting the width of the videoview when in portrait, how can i make the width of my video fit the width of my videoview when in portrait, and when i change orientation of the screen to landscape i would like the video to fill the whole screen like the youtube app does. when in portrait the video is to start from the top to the middle of the screen and and when in landscape to fill the whole screen. here is what i have tried, i have also add links of the complete screenshot

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:weightSum="100" >

<VideoView
    android:id="@+id/videoview"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_weight="53" >
</VideoView>

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="7"
    android:background="@drawable/top_bar"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/settings"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <ImageView
            android:id="@+id/set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/desc"
            android:src="@drawable/settings" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/low_tab"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <ImageView
            android:id="@+id/low"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/desc"
            android:src="@drawable/low" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/high_tab"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <ImageView
            android:id="@+id/high"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/desc"
            android:src="@drawable/high" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/audio_tab"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <ImageView
            android:id="@+id/audio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/desc"
            android:src="@drawable/audio" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/full_screen"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <ImageView
            android:id="@+id/full"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/desc"
            android:src="@drawable/full" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/fresh"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <ImageView
            android:id="@+id/refresh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/desc"
            android:src="@drawable/refresh" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="7"
    android:background="@drawable/comment_bar"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/liveblog_tab"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@drawable/select"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/desc"
            android:src="@drawable/live_blog" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/addcom_tab"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/select"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="15dp"
        android:paddingTop="5dp" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/desc"
            android:src="@drawable/add_comment" />
    </LinearLayout>
</LinearLayout>

<FrameLayout
    android:id="@+id/frame"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="33" >

    <LinearLayout
        android:id="@+id/liveblog"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <WebView
            android:id="@+id/browser"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
        </WebView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/comments"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    </LinearLayout>
</FrameLayout>

</LinearLayout>

Answer 1

You need to have two different layouts. One for the portrait and the one for the landscape. Create two xml files with the same name and put them into folders "layout-land" for landscape and "layout-port" for portrait.

And Here you can take a look how to handle orientation changes.

This can be the layout to make video view full screen.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent" >
<VideoView android:id="@+id/myvideoview"
         android:layout_width="fill_parent"
         android:layout_alignParentRight="true"
         android:layout_alignParentLeft="true"
         android:layout_alignParentTop="true"
         android:layout_alignParentBottom="true"
         android:layout_height="fill_parent">
  </VideoView>
</RelativeLayout>

EDIT : This is How you can handle it in the method.

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);

  // Checks the orientation of the screen
  if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
    Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
    setContentView(Your Landscape layout);
  } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
    Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
    setContentView(Your portrait layout);
  }
}

Answer 2

For linearlayout I'm not sure. But using relativelayout you can do this as below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

<VideoView
    android:id="@+id/videoview"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" >
</VideoView>

//your other xml content 
....
....
....

</RelativeLayout>

And If you want the videoview to be filled in height too. then you need to do this code:

<VideoView
    android:id="@+id/videoview"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentBottom="true">
</VideoView>

//your other xml content 
....
....
....

</RelativeLayout>

Let me know if it's helped. Thanks.

Answer 3

  private void fitStretchClick() {
    MediaMetadataRetriever retriever = new MediaMetadataRetriever();
    retriever.setDataSource(this, Uri.parse(arrayListVideos.get(mPosition).getSongPath()));
    Bitmap bmp = retriever.getFrameAtTime();

    float width = ((float) bmp.getWidth()) / ((float) bmp.getHeight());
    int width2 = getWindowManager().getDefaultDisplay().getWidth();
    int height = getWindowManager().getDefaultDisplay().getHeight();
    float f = (float) width2;
    float f2 = (float) height;
    float f3 = f / f2;
    ViewGroup.LayoutParams layoutParams = mVideoView.getLayoutParams();
    ViewGroup.LayoutParams layoutParams2 = mVideoView.getLayoutParams();
    if (changedNow) {
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mVideoView.getLayoutParams();
        params.width = metrics.widthPixels;
        params.height = metrics.heightPixels;
        params.leftMargin = 0;
        mVideoView.setLayoutParams(params);
        Toast.makeText(this, "Stretch To Screen", Toast.LENGTH_SHORT).show();
        changedNow = false;
        return;
    } else {
        changedNow = true;
        Toast.makeText(this, "Fit To Screen", Toast.LENGTH_SHORT).show();
        if (width > f3) {
            layoutParams.width = width2;
            layoutParams.height = (int) (f / width);
            mVideoView.setLayoutParams(layoutParams);
            return;
        }
        layoutParams.width = (int) (width * f2);
        layoutParams.height = height;
        mVideoView.setLayoutParams(layoutParams);
    }

}