How do you change the orientation of a videoview on Android?

ByJael Lawler

The Android VideoView is a component used to display videos within an app. By default, videos play in landscape orientation. However, you may want to change the orientation of the VideoView to portrait mode or rotate between orientations based on device rotation.

Modifying the orientation allows you to optimize the video playback experience. Playing videos in their preferred aspect ratio prevents stretching or cropping. Rotating the VideoView also enables fullscreen playback while holding the device upright. This provides flexibility and improves user experience.

In this article, we will discuss how to programmatically change the orientation of a VideoView in an Android app. We’ll cover detecting orientation, setting requested orientation, modifying VideoView layout, scaling the surface, handling orientation changes, and saving state. Follow along to learn how to rotate your Android VideoView with ease.

Understanding Android Orientations

Android devices can operate in either portrait or landscape orientation. Portrait orientation has the device held vertically, with the height longer than the width. Landscape orientation has the device held horizontally, with the width longer than the height.

Android provides display metrics to detect the current orientation. The DisplayMetrics class contains a widthPixels and heightPixels field that represent the current pixel dimensions of the display. Comparing these values allows determining if the device is in portrait or landscape orientation.

For example:

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);

int width = metrics.widthPixels;
int height = metrics.heightPixels;

if (width < height) {
  // Portrait orientation
} else { 
  // Landscape orientation  
}

This code snippet gets the current display metrics and compares the width and height pixel values to determine the orientation.

The VideoView Component

The VideoView class in Android provides a way to display video content directly within your app's user interface. As the name implies, VideoView is a UI widget that is specifically designed for playing videos. The video content can come from various sources, including a local file on the device, a URL, or other applications like YouTube.

Some of the key properties and methods of VideoView include:

  • setVideoPath() - Sets the path to the video file to play.
  • setVideoURI() - Sets a URI for the video to play, allowing videos from remote URLs.
  • start() - Starts video playback.
  • pause() - Pauses video playback.
  • seekTo() - Seeks to specified time position in video.
  • setMediaController() - Adds a MediaController to manage video playback.

By leveraging the capabilities of VideoView, you can seamlessly integrate video playback directly into the user experience of your Android app. Proper use of VideoView allows you to play, pause, seek, and control the video just like a native media player.

Getting the Current Orientation

To get the current orientation of the screen in an Android app, we can use the getResources().getConfiguration() method. This returns a Configuration object that contains details about the current device configuration, including the orientation.

We can check the orientation field of the Configuration to see if the device is currently in portrait or landscape mode. The orientation will be either Configuration.ORIENTATION_PORTRAIT or Configuration.ORIENTATION_LANDSCAPE.

For example:

Configuration config = getResources().getConfiguration();
if (config.orientation == Configuration.ORIENTATION_LANDSCAPE) {
  // Landscape mode
} else {
  // Portrait mode
}

This allows us to programmatically determine the current orientation in our Android app and perform different logic or layout changes depending on the device orientation.

Setting Requested Orientation

The easiest way to change the orientation of a VideoView in Android is to use the setRequestedOrientation() method on the Activity. This allows you to programmatically set the preferred orientation that the Activity should be displayed in.

The setRequestedOrientation() method takes an integer parameter which corresponds to one of the orientation flags defined in ActivityInfo:

  • SCREEN_ORIENTATION_UNSPECIFIED - Default value, allow system to select orientation
  • SCREEN_ORIENTATION_LANDSCAPE - Landscape orientation
  • SCREEN_ORIENTATION_PORTRAIT - Portrait orientation
  • SCREEN_ORIENTATION_USER - Use user preferred orientation from settings
  • SCREEN_ORIENTATION_BEHIND - Keep orientation behind activity in stack
  • SCREEN_ORIENTATION_SENSOR - Use orientation sensor to determine orientation

For example, to set the VideoView to landscape orientation:


setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

This will trigger the Activity and all its views, including the VideoView, to redraw in landscape mode. Using setRequestedOrientation() provides a simple way to programmatically control orientation.

Modifying the VideoView Layout

The size and position of the VideoView can be modified by adjusting the width, height, and margin parameters of the View. This allows the video to be resized and repositioned within its parent layout to achieve the desired orientation.

To resize the VideoView, the android:layout_width and android:layout_height attributes can be set to specific dp values or to match_parent and wrap_content. For example:


<VideoView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

This will make the VideoView fill the width of the parent view and adjust its height to fit the video dimensions. The layout_marginTop, layout_marginBottom, layout_marginStart and layout_marginEnd attributes can also be used to control spacing and positioning relative to other views.

Additionally, the scaleType property on VideoView can be set to fitXY to force the video to fill the entire view size. This may cause distortion if the aspect ratios do not match.

Together, these layout parameters give full control over the size and position of the VideoView within its parent layout. This allows the orientation and scaling of the video surface to be modified as needed.

Scaling the Video Surface

To properly scale the VideoView for both portrait and landscape orientations, you need to override the onMeasure() and onSizeChanged() methods of the VideoView class. These allow you to calculate the correct scaling factor to stretch or shrink the video to fill the available layout space.

In onMeasure(), you can calculate the width and height of the view based on the current orientation, then set the dimension of the view using setMeasuredDimension(). This tells the parent layout the size requirements of the VideoView.

In onSizeChanged(), you get the actual width and height that is given to the VideoView after layout. Here you can calculate the scale factor needed to make the video fill the area. A simple calculation is:

scaleX = viewWidth / videoWidth
scaleY = viewHeight / videoHeight

Then set the scale on the VideoView using videoView.setScaleX(scaleX) and videoView.setScaleY(scaleY). This will scale the video to fill the entire view area.

To handle both orientations, you can check the width and height to determine if it is in landscape or portrait. Then apply the proper scaling for each orientation.

This allows the VideoView to dynamically scale the video as the device orientation changes. The key is calculating the scale factor each time based on the available layout space.

For more details, see the Android documentation on handling orientation changes with VideoView.

Animating the Change

When transitioning between portrait and landscape orientations, using animations can provide a smooth user experience. The TransitionManager class in Android allows you to animate layout changes between Start and End layout states. For example:

TransitionManager.beginDelayedTransition(container); 
// Change layout e.g. resize video view

This will automatically animate the layout changes to the video view. You can customize the transition animation using the transitionName XML attribute. For more complex animations, you can create a custom Animation class and pass it to TransitionManager.

Here is an example of a custom slide animation when rotating the device:

public class CustomSlide extends Animation {

  @Override
  public applyTransformation(float interpolatedTime, Transformation t) {
    // Animate view sliding in/out
  }

}

TransitionManager.beginDelayedTransition(sceneRoot, new CustomSlide());

Using custom animation classes allows you to have full control over the transition animations between orientation changes.

Saving State on Rotation

When the device orientation changes in Android, the Activity is destroyed and recreated by default. This will cause the state of the VideoView component to be lost when the orientation changes. To preserve the playback state, we need to override the Activity lifecycle methods.

The key method to override is onSaveInstanceState(). This method is called before the Activity is destroyed. Here we can save any state we want to persist across the orientation change. For VideoView, we may want to save the current playback position.

To save state, we create a Bundle instance and add our state values:

@Override
protected void onSaveInstanceState(Bundle outState) {
  super.onSaveInstanceState(outState);
  
  outState.putInt("position", videoView.getCurrentPosition()); 
}

In onCreate() we can then restore this state. We retrieve the Bundle and extract our state values:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  if (savedInstanceState != null) {
    int position = savedInstanceState.getInt("position");
    videoView.seekTo(position);
  }
}

By saving and restoring state like this, we can maintain the playback position and other state across orientation changes. The video playback will continue seamlessly as the Activity is recreated. This results in a much better user experience.

Conclusion

Modifying the orientation of a VideoView in Android requires understanding the device's current orientation, setting a requested orientation if needed, adjusting the VideoView layout params, and properly scaling and animating the video surface.

The key techniques covered include:

  • Getting the current orientation from the Display object
  • Calling setRequestedOrientation() to set a specific orientation
  • Updating the VideoView layout parameters like width, height, gravity, etc.
  • Scaling the video surface to fit the new orientation
  • Animating layout changes for a smooth transition
  • Saving the playback state when the orientation changes

It's recommended to save and restore the playback state and animate changes between orientations for the best user experience. Also be sure to properly scale the video surface rather than just switch the width and height. Testing on different devices is key as there may be quirks.

With the techniques covered, you should have the knowledge to dynamically modify a VideoView for any device orientation. Proper implementation will lead to a robust, polished user experience.

Leave a Reply

Your email address will not be published. Required fields are marked *