Set a video as background

Question

I am making a login screen for my Android app and was wondering how can I use a video as a background rather than having an image or simple colors?

I want to make it

Answer 1

You just need a few steps to set the video as the background of your app.

1. Create a video view and make sure it takes up the whole area. If you are using constraint layout, you need to set all the constraints of your video view to parent.
2. Create a new directory called "raw" under your "res" directory
3. Place your video file into the "raw" directory
4. Play the video

   VideoView videoview = (VideoView) findViewById(R.id.videoview);
   Uri uri = Uri.parse("android.resource://"+getPackageName()+"/"+R.raw.test);
   videoview.setVideoURI(uri);
   videoview.start();
   

   I have made a video that explains how to create JOOX login screen in android which looks more or less like the Spotify app. Feel free to check it out and let me know if it helps :)

https://youtu.be/tPeDn18FrGY

Answer 2

First make new XML and add the VideoView inside it:

my_video_background.xml

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

<VideoView
    android:id="@+id/videoView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_gravity="center" />

</RelativeLayout>

Then include this file inside your main layout that have Buttons, let's say:

splash.xml

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

<include layout="@layout/my_video_background" />

<!--Like Spotify image-->

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="46dp"
    android:src="@android:drawable/ic_dialog_map" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">

    <Button
        android:id="@+id/login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:background="#FF2D2D2D"
        android:text="LOG IN"
        android:textColor="@android:color/white" />

    <Button
        android:id="@+id/signUp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:background="#FF669900"
        android:text="SIGN IN"
        android:textColor="@android:color/white" />

</LinearLayout>
</RelativeLayout>

That's it!

Answer 3

NatureDevil answer and video is great but 2 things are missing first if you click on a button and open a new activity like sing-up and decided to click on back arrow on the device, the home screen will give black screen because the video will not restart so you need to add this

@Override
protected void onResume() {
    super.onResume();
    // to restart the video after coming from other activity like Sing up
    mVideoView.start();


}

other thing for the VideoView to stretch from left to right full screen add:

android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"