7 October 2013

How to implement an awesome fullscreen video background on Android ?


Hey folks !

I'll describe here how I managed to get this awesome fullscreen video background for my next Android Game Project : WWII.

The screenshot is in a quite low quality I am afraid !

So, first in the layout, let's add a simple VideoView into a RelativeLayout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black" >

    <VideoView
        android:id="@+id/backgroundVideo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

[...]

</RelativeLayout>

In order to stretch the video to make it fullscreen, the dirty hack resides in the four "layout_align..." values.

Ok now, let's have a look at the code :

[...]

// setup background video
mBackgroundVideoView = (VideoView) findViewById(R.id.backgroundVideo);
Uri videoUri = Uri.parse("android.resource://" + getPackageName() + "/"
    + R.raw.video_bg_home);
mBackgroundVideoView.setVideoURI(videoUri);

[...]


Now let's start and pause the video according to the Activity's lifecycle :

private int mVideoStopPosition = 0;


[...]

@Override
protected void onStart() {
 super.onStart();
 mBackgroundVideoView.seekTo(mVideoStopPosition);
 mBackgroundVideoView.start();
}

@Override
protected void onPause() {
 super.onPause();
 // store the stop position to restart the video at the correct position
 mVideoStopPosition = mBackgroundVideoView.getCurrentPosition();
 mBackgroundVideoView.pause();
 if (mAboutDialog != null) {
  mAboutDialog.dismiss();
 }
}


If you want to disable the sound of the video and make it repeat when it ends, here is how I did it :

[...]
mBackgroundVideoView.setOnPreparedListener(mPreparedListener);

[...]
// remove background video sound - enable video looping
MediaPlayer.OnPreparedListener mPreparedListener = new MediaPlayer.OnPreparedListener() {
 @Override
 public void onPrepared(MediaPlayer m) {
   try {
    if (m.isPlaying()) {
     m.stop();
     m.release();
     m = new MediaPlayer();
    }
    // disable sound
    m.setVolume(0f, 0f);
    // repeat video
    m.setLooping(true);
    m.start();
   } catch (Exception e) {
    e.printStackTrace();
   }
 }
};


That's it for now ! Watch out this blog for further cool tips through WWII advancement.
Tchuss !

No comments:

Post a Comment