Post
Ask Question

Video Player in Android Studio

Introduction

 
In this article, we will make our own video player.
 
First, we will be displaying the list of all the "mp4" and "3gp" files in the SD Card of your phone. The video will be played when the user selects a video from the list.
 
Step 1
 
Open "main_activity" and add the following code to it:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TextView xmlns:android="http://schemas.android.com/apk/res/android"  
  3.           android:layout_width="fill_parent"  
  4.           android:layout_height="fill_parent"  
  5.           android:padding="10dp"  
  6.           android:textSize="20sp"  
  7.           android:background="#cd6959">  
  8. </TextView> 
This layout file will display the list of video files in your SD Card.
 
The layout looks like:
 
im1.jpg
 
Step 2
 
Right-click on "Layout" -> "New" -> "Layout Resource file". Name this file as "video_layout" and add the following code to it:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.               android:orientation="vertical"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="#e39e54">  
  6.   <Button  
  7.       android:id="@+id/back"  
  8.       android:layout_width="wrap_content"  
  9.       android:layout_height="wrap_content"  
  10.       android:layout_marginTop="10dp"  
  11.       android:layout_marginLeft="20dp"  
  12.       android:text="Back to List"  
  13.       android:background="@drawable/button_lay"  
  14.       android:paddingLeft="10dp"  
  15.       android:paddingRight="10dp"/>  
  16.   <VideoView  
  17.       android:id="@+id/video"  
  18.       android:layout_height="fill_parent"  
  19.       android:layout_width="fill_parent"  
  20.       android:layout_marginTop="30dp"  
  21.       android:layout_marginLeft="20dp"  
  22.       android:layout_marginRight="30dp"  
  23.       android:layout_marginBottom="10dp"  
  24.         />  
  25. </LinearLayout> 
This layout will display the video player.
 
The layout looks like:
 
im2.jpg
 
Step 3
 
For beautification, create a drawable resource file (for button background). Right-click on "Drawable" -> "New" -> "Drawable resource file". Name this file "button_lay" and add the following code to it:
  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  2.   <item android:state_enabled="false" >  
  3.     <shape android:shape="rectangle">  
  4.       <gradient  
  5.               android:startColor="#454545"  
  6.               android:endColor="#454545"  
  7.               android:angle="-90"  
  8.               android:type="linear"  
  9.                     />  
  10.       <corners android:radius="5dp" />  
  11.     </shape>  
  12.   </item>  
  13.    
  14.   <item android:state_pressed="true" android:state_enabled="true" >  
  15.     <shape android:shape="rectangle">  
  16.       <gradient  
  17.               android:startColor="#64334C"  
  18.               android:endColor="#300019"  
  19.               android:angle="-90"  
  20.               android:type="linear"  
  21.                     />  
  22.       <corners android:radius="5dp" />  
  23.     </shape>  
  24.   </item>  
  25.    
  26.   <item android:state_focused="true">  
  27.     <shape android:shape="rectangle">  
  28.       <gradient  
  29.               android:startColor="#C76699"  
  30.               android:endColor="#d9c292"  
  31.               android:angle="-90"  
  32.               android:type="linear"  
  33.                     />  
  34.       <corners android:radius="5dp" />  
  35.       <stroke android:width="2dp" android:color="#dddddd"/>  
  36.     </shape>  
  37.   </item>  
  38.    
  39.   <item>  
  40.     <shape android:shape="rectangle">  
  41.       <gradient  
  42.               android:startColor="#C76699"  
  43.               android:endColor="#d9c292"  
  44.               android:angle="-90"  
  45.               android:type="linear"  
  46.                     />  
  47.       <corners android:radius="5dp" />  
  48.     </shape>  
  49.   </item>  
  50. </selector> 
Step 4
 
Open "MainActivity.java" and add the following code to it:
  1. package com.chhavi.videofinal;  
  2. import android.app.ListActivity;  
  3. import android.content.Context;  
  4. import android.content.Intent;  
  5. import android.os.Bundle;  
  6. import android.app.Activity;  
  7. import android.os.Environment;  
  8. import android.util.Log;  
  9. import android.view.Menu;  
  10. import android.view.View;  
  11. import android.widget.AdapterView;  
  12. import android.widget.ArrayAdapter;  
  13. import android.widget.ListView;  
  14. import android.widget.MediaController;  
  15. import android.widget.VideoView;  
  16. import java.io.File;  
  17. import java.io.FilenameFilter;  
  18. import java.util.ArrayList;  
  19. public class MainActivity extends ListActivity {  
  20.  ArrayList < String > videoPath = new ArrayList < String > ();  
  21.  String ext = ".3gp";  
  22.  String ext2 = ".mp4";  
  23.  final Context context = this;  
  24.  public class GenericExtFilter implements FilenameFilter {  
  25.   private String ext;  
  26.   public GenericExtFilter(String ext) {  
  27.    this.ext = ext;  
  28.   }  
  29.   public boolean accept(File dir, String name) {  
  30.    return (name.endsWith(ext));  
  31.   }  
  32.  }  
  33.  @Override  
  34.  protected void onCreate(Bundle savedInstanceState) {  
  35.   super.onCreate(savedInstanceState);  
  36.   File files = new File(Environment.getExternalStorageDirectory() + "/");  
  37.   Log.i("files.........", files.toString());  
  38.   GenericExtFilter filter = new GenericExtFilter(ext);  
  39.   String[] list = files.list(filter);  
  40.   GenericExtFilter filter2 = new GenericExtFilter(ext2);  
  41.   String[] list2 = files.list(filter2);  
  42.   for (int i = 0; i < list.length | i < list2.length; ++i) {  
  43.    videoPath.add(i, list[i].toString());  
  44.    videoPath.add(i + 1, list2[i].toString());  
  45.   }  
  46.   setListAdapter(new ArrayAdapter < String > (this, R.layout.activity_main, videoPath));  
  47.   ListView listView = getListView();  
  48.   listView.setTextFilterEnabled(true);  
  49.   listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
  50.    @Override  
  51.    public void onItemClick(AdapterView < ? > parent, View view, int position, long id) {  
  52.     String path = "/mnt/sdcard/";  
  53.     path = path + videoPath.get(position);  
  54.     Log.i("path of video file......", path);  
  55.     video(path);  
  56.    }  
  57.   });  
  58.  }  
  59.  public void video(String path) {  
  60.   Intent i = new Intent(context, PlayVideo.class);  
  61.   i.putExtra("path", path);  
  62.   startActivity(i);  
  63.  }  
  64.  @Override  
  65.  public boolean onCreateOptionsMenu(Menu menu) {  
  66.   getMenuInflater().inflate(R.menu.main, menu);  
  67.   return true;  
  68.  }  
  69. } 
"getExternalStorageDirectory()" will direct you to the SD Card. Since video files on my phone are in the SD Card, "getExternalStorageDirectory()" will work for me. If your video files are in some other folder then you will need to specify the name of that folder. For example, if your videos are in the "video" folder of the SD Card then write File
  1. files = new File(Environment.getExternalStorageDirectory()+ "/video/"); 
"GenericExtFilter" is to be applied filter to the name of the files being stored in the array. Since we want only mp4 and 3gp files from the SD Card, we have provided the extensions mp4 and 3gp in the filter.
 
Step 5
 
Right-click on your package then select "New" -> "Java class". Name this file "PlayVideo" and add the following code to it:
  1. package com.chhavi.videofinal;  
  2.    
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.content.Intent;  
  6. import android.media.MediaPlayer;  
  7. import android.os.Bundle;  
  8. import android.util.Log;  
  9. import android.view.View;  
  10. import android.widget.Button;  
  11. import android.widget.MediaController;  
  12. import android.widget.VideoView;  
  13.    
  14. public class PlayVideo extends Activity {  
  15.     Button back;  
  16.     final Context context=this;  
  17.     VideoView v;  
  18.     String path;  
  19.     @Override  
  20.     protected void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.         setContentView(R.layout.video_layout);  
  23.         back=(Button)findViewById(R.id.back);  
  24.         back.setOnClickListener(new View.OnClickListener() {  
  25.             @Override  
  26.             public void onClick(View v) {  
  27.                 finish();  
  28.             }  
  29.         });  
  30.    
  31.         v=(VideoView)findViewById(R.id.video);  
  32.         Intent i=getIntent();  
  33.         path=i.getStringExtra("path");  
  34.         Log.i("path of video file......", path);  
  35.         v.setVideoPath(path);  
  36.    
  37.         v.setMediaController(new MediaController(context));  
  38.         v.requestFocus();  
  39.    
  40.         v.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {  
  41.             @Override  
  42.             public void onPrepared(MediaPlayer arg0) {  
  43.                 v.start();  
  44.             }  
  45.         });  
  46.    
  47.         v.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {  
  48.             public void onCompletion(MediaPlayer mp) {  
  49.                 mp.reset();  
  50.                 v.setVideoPath(path);  
  51.                 v.start();  
  52.             }  
  53.         });  
  54.     }  
  55. } 
"setMediaController" displays the video controls like play/pause, forward, reverse. "setOnPreparedListener" will simply start the video. "setOnCompletionListener" replays the video.
 
Step 6
 
Open "AndroidManifest" and make the following changes:
  1. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     package="com.chhavi.videofinal"  
  3.     android:versionCode="1"  
  4.     android:versionName="1.0" >  
  5.   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>  
  6.    
  7.   <uses-sdk  
  8.       android:minSdkVersion="7"  
  9.       android:targetSdkVersion="16" />  
  10.    
  11.   <application  
  12.       android:allowBackup="true"  
  13.       android:icon="@drawable/ic_launcher"  
  14.       android:label="@string/app_name"  
  15.       android:theme="@style/AppTheme" >  
  16.     <activity  
  17.         android:name="com.chhavi.videofinal.MainActivity"  
  18.         android:label="@string/app_name" >  
  19.       <intent-filter>  
  20.         <action android:name="android.intent.action.MAIN" />  
  21.    
  22.         <category android:name="android.intent.category.LAUNCHER" />  
  23.       </intent-filter>  
  24.     </activity>  
  25.     <activity android:name=".PlayVideo"  
  26.               android:label="Player"/>  
  27.   </application>  
  28. </manifest> 
Note that if you do not add the permission added above then your app will not work.
 
Step 7
 
This application will not work in an emulator. You will need to run it on a real device.
 
Switch on the debugging mode of your phone. Go to "Settings" -> "Developer Options" -> "USB debugging".
 
Connect your phone to your PC. Your phone must now be visible in the Android Debug Monitor. If this does not happen, then you will need to download some drivers to your PC. For example, for the HTC One V, download http://dl4.htc.com/managed-assets/support/software/htc-sync/htc_sync_setup_3.3.21.exe
 
Now go to "Select/Run configurations" -> "Edit configurations" -> "Target device USB device".
 
Now run your application project (Shift+F10).
 
Output snapshots:
 
My SD Card consists of only two video files:
 
im3f.png
 
Now you can select any one video file to play it. The player screen will look like:
 
im4f.png
 
Clicking on "Back to List" will give you the list of video files again.
 
Thank you...... Enjoy coding :)


Similar Articles