Integrating video file in android app as app background

I need to use video as my background. First I placed the video file in drawable folder and called as background of LinearLayout in main.xml. But while running the app, I saw only a black screen. Then I tried to use VideoView and called it like following:

  <VideoView
    android:id="@+id/video"
    android:layout_width="320px"
    android:layout_height="240px"
    android:layout_gravity="center"
    android:background="@raw/hp"/>

In my activity file I called it with following code snippet:

  public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);
        VideoView video=(VideoView) findViewById(R.id.video);
        video.start();
}

But still I am not getting the video file there. My main propose is to use a bubble video as background and putting two bubble buttons on it and gives the user a feel like water view screen. Can anyone help me?

Also the video file I want to use from the res folder. Not from SD card or any outer media folder.

Solution 1:

Well my friend, first of all you can't set a background to your VideoView and make it play in the background of your screen.

Please follow my steps and add your effort and you should be there.

Remove your video from drawable folder and add it to raw folder. Please google how to create a raw folder. It is simple though. And put your video file inside it.

First of all, create a SurfaceView in your xml like this.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
            android:id="@+id/home_container"  
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent">

<SurfaceView 
        android:id="@+id/surface" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:paddingTop="10dip" />
</Framelayout>

Now, create a class like the one below which can implement SurfaceView,

public class YourMovieActivity extends Activity implements SurfaceHolder.Callback {
    private MediaPlayer mp = null;
    //...
  SurfaceView mSurfaceView=null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mp = new MediaPlayer();
        mSurfaceView = (SurfaceView) findViewById(R.id.surface);
        mSurfaceView.getHolder().addCallback(this);
        //...
    }
}

Now your class will ask for unimplemented methods to be added. Add those methods by just clicking on "Add unimplemented methods"

Now you will be able to see a auto generated method like this,

@Override
public void surfaceCreated(SurfaceHolder holder) {

}

And inside this method,add the below code,

@Override
public void surfaceCreated(SurfaceHolder holder) {


   Uri video = Uri.parse("android.resource://" + getPackageName() + "/" 
      + R.raw.your_raw_file);

    mp.setDataSource(video);
    mp.prepare();

    //Get the dimensions of the video
    int videoWidth = mp.getVideoWidth();
    int videoHeight = mp.getVideoHeight();

    //Get the width of the screen
    int screenWidth = getWindowManager().getDefaultDisplay().getWidth();

    //Get the SurfaceView layout parameters
    android.view.ViewGroup.LayoutParams lp = mSurfaceView.getLayoutParams();

    //Set the width of the SurfaceView to the width of the screen
    lp.width = screenWidth;

    //Set the height of the SurfaceView to match the aspect ratio of the video 
    //be sure to cast these as floats otherwise the calculation will likely be 0
    lp.height = (int) (((float)videoHeight / (float)videoWidth) * (float)screenWidth);

    //Commit the layout parameters
    mSurfaceView.setLayoutParams(lp);        

    //Start video
    mp.setDisplay(holder);
    mp.start();
}

Solution 2:

/**
 * Created by zoid23 on 05/10/15.
 */
public class IntroVideoSurfaceView extends SurfaceView implements SurfaceHolder.Callback {

    private static final String TAG = "INTRO_SF_VIDEO_CALLBACK";
    private MediaPlayer mp;

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public IntroVideoSurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    public IntroVideoSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    public IntroVideoSurfaceView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public IntroVideoSurfaceView(Context context) {
        super(context);
        init();
    }

    private void init (){
        mp = new MediaPlayer();
        getHolder().addCallback(this);
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        AssetFileDescriptor afd = getResources().openRawResourceFd(R.raw.intro);
        try {
            mp.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getDeclaredLength());
            mp.prepare();
        } catch (IOException e) {
            e.printStackTrace();
        }
        int videoWidth = mp.getVideoWidth();
        int videoHeight = mp.getVideoHeight();
        int screenHeight = getHeight();
        android.view.ViewGroup.LayoutParams lp = getLayoutParams();
        lp.height = screenHeight;
        lp.width = (int) (((float)videoWidth / (float)videoHeight) * (float)screenHeight);

        setLayoutParams(lp);
        mp.setDisplay(getHolder());
        mp.setLooping(true);
        mp.start();
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        mp.stop();
    }

}

Use IntroVideoSurfaceView on your xml and put your video in raw/intro.mp4

Solution 3:

Full version of the modified version of luigi23 with avoiding some crashes.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

nothing on the main activity. you might want to make it fullscreen by adding

  <style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
  </style>

Create a file IntroVideoSurfaceView.java

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.AssetFileDescriptor;
import android.media.MediaPlayer;
import android.os.Build;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import java.io.IOException;

public class IntroVideoSurfaceView extends SurfaceView implements SurfaceHolder.Callback {

  private MediaPlayer mp;
  private boolean has_started = false;

  @TargetApi(Build.VERSION_CODES.LOLLIPOP) public IntroVideoSurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
  }

  public IntroVideoSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  public IntroVideoSurfaceView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  public IntroVideoSurfaceView(Context context) {
    super(context);
    init();
  }

  private void init() {
    mp = new MediaPlayer();
    getHolder().addCallback(this);
  }

  @Override public void surfaceCreated(SurfaceHolder holder) {
    AssetFileDescriptor afd = getResources().openRawResourceFd(R.raw.slideshow);
    try {
      if (!has_started) {
        has_started = true;
        mp.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getDeclaredLength());
      }

      mp.prepare();
      android.view.ViewGroup.LayoutParams lp = getLayoutParams();
      lp.height = getHeight();
      lp.width = getWidth();

      setLayoutParams(lp);
      mp.setDisplay(getHolder());
      mp.setLooping(true);
      mp.start();
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

  @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
  }

  @Override public void surfaceDestroyed(SurfaceHolder holder) {
    mp.stop();
  }
}

add a "slideshow.mp4" in resources/raw

modify the activity_main.xml with

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/home_container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

  <com.androidadvance.videobackground.IntroVideoSurfaceView
      android:id="@+id/surface"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      />

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Press Me"
      android:id="@+id/button"
      android:layout_gravity="center_horizontal|bottom"
      android:layout_margin="16dp"
      />
</FrameLayout>

Some notes.

Adding a video will make your apk huge so you might want to avoid this... From time to time unknown crashes occur even on high end phones (galaxy s6) It's essential to keep the file small.

Solution 4:

I have used this code for play video on surface view

public class VideoPlayOnSurfaceView extends SurfaceView implements SurfaceHolder.Callback {

    private MediaPlayer mediaPlayer;
    private boolean has_started = false;

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public VideoPlayOnSurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    public VideoPlayOnSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public VideoPlayOnSurfaceView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public VideoPlayOnSurfaceView(Context context) {
        super(context);
        init();
    }

    private void init() {
        mediaPlayer = new MediaPlayer();
        getHolder().addCallback(this);
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        AssetFileDescriptor afd = getResources().openRawResourceFd(R.raw.small);
        try {
            if (!has_started) {
                has_started = true;
                mediaPlayer.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getDeclaredLength());
            }

            mediaPlayer.prepare();
            android.view.ViewGroup.LayoutParams lp = getLayoutParams();
            lp.height = getHeight();
            lp.width = getWidth();

            setLayoutParams(lp);
            mediaPlayer.setDisplay(holder);
            mediaPlayer.setLooping(true);
            mediaPlayer.start();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }

    @Override public void surfaceDestroyed(SurfaceHolder holder) {
        mediaPlayer.stop();
    }
}

xml file

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <YourPacakageName.VideoPlayOnSurfaceView
            android:id="@+id/surface"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:paddingTop="10dip" />
</FrameLayout>