Search code examples
androidandroid-layoutfullscreenandroid-videoviewportrait

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

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>

enter image description here

Solution

  • 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);
  }
}