Animated Splash Screen with Audio

Govind Singh

31 October 2022

In this blog, we are going to learn about “Animated Splash screen with Audio”. We will discover how to add audio to our project and have it play as the background for the splash screen. most of the app show an animated splash screen for the attractive app.

Create Resource Directory

First, you need to create a resource directory to store the animated video. We are creating a new resource directory for some steps.

In the Project window and right click on res>New > Directory then type the name of the director as “raw” now click OK

Layout

In the layout section, we are using the ‘video view’, which is the inbuild android view for easy to use and provides us more features without any third-party library.

we are creating a simple ‘ConstraintLayout’ layout and adding the ‘video view’ with match parent height and width for reference.

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"&gt;
  &lt;VideoView
      android:layout_height="match_parent"
      android:layout_width="match_parent"
      android:layout_centerInParent="true"
      android:id="@+id/VideoView" /&gt;


  &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<VideoView

android:layout_height="match_parent"

android:layout_width="match_parent"

android:layout_centerInParent="true"

android:id="@+id/VideoView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Code

Only a few lines of code to add to your kotlin/java class to perform these animated splash screens. we are creating a ‘URI’ to initialize the path of the stored video then we will provide this ‘URI’ to ‘video view’ to the play video animation.

  private fun animation() {
        val videoView: VideoView =findViewById(R.id.VideoView)
        val uri = Uri.parse("android.resource://" + packageName.toString() + "/" + R.raw.samplev)
        videoView.setVideoURI(uri)
        videoView.setBackgroundColor(Color.TRANSPARENT)
        videoView.setOnCompletionListener {
            //When the complete video then you can perform any operation here
        }
        videoView.start()
        videoView.setZOrderOnTop(true)


    }

private fun animation() {

val videoView: VideoView =findViewById(R.id.VideoView)

val uri = Uri.parse("android.resource://" + packageName.toString() + "/" + R.raw.samplev)

videoView.setVideoURI(uri)

videoView.setBackgroundColor(Color.TRANSPARENT)

videoView.setOnCompletionListener {

//When the complete video then you can perform any operation here

}

videoView.start()

videoView.setZOrderOnTop(true)

}

In this code, we created an animation function and here we are initializing the video view and setting the video URI to play the video from the raw folder.

Output

Conclusion

We learned about the ‘Animated Splash Screen with Audio’ in this blog. We learned how to use Android video view to play videos on the splash screen.

Visit the link for additional information on the video view in Android.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

Always be ready for learning 🙂