What will you learn?
- How to use a VideoView element to play videos on your Android app. If needed, you can read more about the VideoView widget in detail before proceeding.
Note: Find the full code of the project towards the end of the post. Read the entire post for further clarification and explanations.
Contents
Building the Interface of our Video Player Android app
Of all our apps that we have created up until now, you will see that this has the simplest of interfaces. We need two elements in our Activity.
Start with an Empty Activity
Next, drag and drop a button and then a VideoView. If you don’t want to keep adjusting, and make the app work for all devices and orientations, drop in a LinearLayout before you drop your elements. If you have forgotten why we are using the LinearLayout here, then give this article a quick read. It tells us about the different layouts in Android Studio and which ones to use when.
Components Used:
- Layouts > LinearLayout
- Widgets > Button
- Images > VideoView
Here’s a screenshot of the Interface we have built. You’ll find the full code in the XML file towards the end of the article.
Attaching a function to the button
Once you highlight the button, a list of its properties comes up on the right-hand side. Once here, find the label ‘onClick‘ and in the input value, write down playVideo. This is a custom function that we will create in the MainActivity.java file.
Adding our video file in the Android App
This is just like how we did in our tutorial for playing an audio file using the MediaPlayer class. Firstly, on the left-hand side of our Android Studio, make sure we are on the PROJECT sidebar and under Android. From here, you have to go to app > res > raw. If, for whatever reason, you don’t have the raw directory, then right-click on the res folder and create a new directory with ‘raw’ as its name.
Once here, just right-click on the ‘raw‘ directory and click on ‘Reveal in Finder‘ if on MacOs and ‘Show in folder‘ if on Windows. I may be wrong about the Windows part, though, but you can figure it out.
This is the folder where you paste your video file.
Alternatively, if you copy your video file, you can right-click on the raw directory and click on paste. I find the drag and drop method to be more comfortable, though.
Just like when you are adding your audio file, remember to give a unique name with the extension and all of it in small cases.
Coding the functionality of the video player android app
Now here is the exciting part; this isn’t like how we coded our Audio Player file. It’s a bit different.
Step 1: Creating objects to our classes
We first create a new object of a class in the AppCompatActivity class.
VideoView vid; MediaController m;
Step 2: Connecting our object with our elements
Next, we have to connect this object with the VideoView we used in building the user interface.
We do this inside the onCreate function by the following code.
vid = (VideoView)findViewById(R.id.videoView);
Step 3: Playing the video
We first create the function playVideo.
public void playVideo(View v) { //Your code here }
In that function, we are setting a new MediaController.
m = new MediaController(this);
Next, we are getting the path of our video file. So go ahead and declare a new variable of data type String. To find the path of the video file, right-click on it and hit on Copy path address. And paste this address inside double-quotes. You can use this method, but we will use an alternative way.
String path = "/Users/aasemjs/AndroidStudioProjects/VideoPlayDemo/app/src/main/res/raw/trial.MOV";
An alternative way of doing this by the following code. It means the same thing, and either of the ways can be used.
String path = "android.resource://com.aasemjs.videoplaydemo/"+R.raw.trial;
Now, all we need to do is to set a new Uri and parse the string that we defined above. We set the videoUri in this set, and the file is ready to play.
Uri u = Uri.parse(path); vid.setVideoURI(u); vid.start();
Next, we need to deploy the app to our target device and watch the magic happen. For any confusion, refer to the full code below.
Check out some more of our tutorials on Android.
1 Play an Audio File using MediaPlayer class.
4 Study about different Layouts in Android and which one to use when.
The full code for our UI in the VideoPlayer App
The full code for the main functionality in the VideoPlayer App
Remember to change your package name at the beginning of the code!