VideoView Tutorial with Example in Android Studio

A VideoView allows us to play video files in Android. It can be used with any layout. I will be using ConstraintLayout as that is the current default layout in Android. The simplest way to play a video in your app is to use the VideoView class to play the video and the MediaController class as the UI to control it.

See the video below for a quick overview:

MediaController class

The android.widget.MediaController is the UI to control the video. Specifically, it is a view that contains the media controls such as "Play/Pause", "Rewind", "Fast Forward" and a progress slider. It synchronizes the controls with the state of the MediaPlayer. You have to implement the MediaController class programmatically (i.e. you can't do it in XML). The MediaController will create a default set of controls.

Methods used:

setAnchorView(View view): setAnchorView() designates the view to which the MediaController is anchored. It controls the location of the controls on the screen.

VideoView class

The VideoView class plays the video. The android.widget.VideoView class provides methods to play and control the video player.

Methods used:

setVideoUri(Uri uri): This method is used to set the absolute path of the video file which is going to be played. This method takes a Uri object as an argument. A URI is a "Uniform Resource Identifier". A simplified way to understand it is that a URI is an address for a resource. In this project it is R.raw.mars_oceans.

setMediaController(MediaController controller): This method of VideoView is used to set the controller for the controls of video playback.

Create the VideoView

Step 1: Create a VideoView in XML to your desired dimensions:

<VideoView
    android:id="@+id/simpleVideoView"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_margin="30dp"
    app:layout_constraintTop_toTopOf="parent"/>

Step 2: Create a new directory in the res (or Resources) folder. To do that make sure you are in Android View. Right click on res, select New, select Android Resource Directory. The Directory name should be raw and the resource type should be raw.

res > New > Android Resource Directory > raw

You now have a raw directory that will house your videos.

Why use a raw directory?

Since raw is a subfolder of Resources (res), Android will automatically generate an ID for any file located inside it. This ID is then stored in the R class that will act as a reference to a file, meaning it can be easily accessed from other Android classes and methods and even in Android XML files. Using the automatically generated ID is the fastest way to have access to a file in Android.

Need a video for the VideoView? Try downloading one from NASA's free Image and Video Library.

Step 3: Choose a video and save it in the raw folder. On a Mac I do that by using the Finder to access my project in Android Studio. *Make sure the name of your video is in lowercase or snake_case. My example is named mars_oceans.

Step 4: From now on we will be working programmatically. We will use the code below to Add the MediaController object to show video playback controls using the method setMediaController(MediaController controller):

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    VideoView simpleVideoView = findViewById(R.id.simpleVideoView);

    if (mediaController == null) {
        //creates a MediaController object if one is not present 
        mediaController = new MediaController(this);
        simpleVideoView.setMediaController(mediaController);
        mediaController.setAnchorView(simpleVideoView);
    }
    
    simpleVideoView.setMediaController(mediaController);
    

This code creates default video playback controls.

A media controller with default controls and a progress slider.

Step 5: Set the path for the video using setVideoUri() method.

simpleVideoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.mars_oceans));

Step 6: Start the video

simpleVideoView.start();

Step 7: Implement a completion listener on the VideoView. What action would you like the program to take when the video finishes? Here we will be showing a toast.

simpleVideoView.setOnCompletionListener(
    new MediaPlayer.OnCompletionListener() 
    {
        @Override
        public void onCompletion(MediaPlayer mp) {
            Toast.makeText(getApplicationContext(), 
            "Thanks for watching!", Toast.LENGTH_LONG).show();
        }
    });

Step 8: Implement an onError listener on the VideoView. What action would you like the program to take if there is an error when playing the video? We'll show a toast acknowledging the error.

simpleVideoView.setOnErrorListener(new MediaPlayer.OnErrorListener() {
    @Override
    public boolean onError(MediaPlayer mp, int what, int extra) {
        Toast.makeText(getApplicationContext(),
                "Oops an error occurred while playing the video!",
                Toast.LENGTH_LONG).show();
        return false;
    }
});

Now run the app and your video will begin playing. Click on the video and the MediaController will appear on the screen.