CODEWITHSUNDEEP
android
NatureDevil
NatureDevil

Reputation: 483

Set a video as background

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 similar to the Spotify / Bible app login screen where they have a video playing and you have buttons to sign in or register.

Images -

(Click image to enlarge)

IMG:

IMG:

Upvotes: 33

Views: 43925

Answers (3)

Rida Rezzag
Rida Rezzag

Reputation: 3963

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"

Upvotes: 5

Jack Tiong
Jack Tiong

Reputation: 947

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

Upvotes: 42

Mohamed
Mohamed

Reputation: 656

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!

Upvotes: 10

Related Questions