Layout Design With Background Video

Android is the very popular OS now a day and everyone wants to make the application more attractive. And now a days maximum application have a playing video in background when user launch the application like on login, signup screen, etc. I am going to explain step by step how you can achieve this with attractive login UI.

How to start?

In Android for playing the video, we have many widgets but in this article, I am going to explain how to use TextureView for playing the video. TextureView is used to stream a video, OpenGL and also use to render the camera preview on TextureView.

• Add TextureView in the layout file

<TextureView
        android:id="@+id/textureView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

If you want to display a live video stream or any content stream such as a video or an OpenGL scene, you can use TextureView.

• Override the methods of TextureView.SurfaceTextureListener which helps to deal with the TextureView states.
  And pass the current class reference for that interface code below

textureView.surfaceTextureListener = this

It will override the following methods and here we will work with the onSurfaceTextureAvailable. It will call once the TextureVew will ready to render the content on it.

override fun onSurfaceTextureAvailable(surfaceTexture: SurfaceTexture?, width: Int, height: Int) {
       //  SurfaceTexture is ready for use.
    }
    override fun onSurfaceTextureUpdated(surfaceTexture: SurfaceTexture?) {
       // Specified SurfaceTexture is updated through
    }
    override fun onSurfaceTextureDestroyed(surfaceTexture: SurfaceTexture?): Boolean {
      //  SurfaceTexture is about to be destroyed.
       return false
    }
    override fun onSurfaceTextureSizeChanged(surfaceTexture: SurfaceTexture?, p1: Int, p2: Int) {
       //SurfaceTexture's buffers size changed
    }

For playing the video on TextureView we need MediaPlayer class which helps to play a video on TextureView.

• First Create a MediaPlayer instance
• And set the surface of MediaPlayer with TextureView in onSurfaceTextureAvailable method

override fun onSurfaceTextureAvailable(surfaceTexture: SurfaceTexture?, width: Int, height: Int) {
            val surface = Surface(surfaceTexture)
            mediaPlayer = MediaPlayer()
//Some code here
mediaPlayer?.setSurface(surface)
       
           //some code here
}

• Play the video inside the setOnPreparedListener of media player

mediaPlayer?.setOnPreparedListener(object : MediaPlayer.OnPreparedListener {
                override fun onPrepared(player: MediaPlayer?) {
                    player?.start()
                }
            })

• If you don’t want to stretch the video on the screen then make the video and TextureView size same at run time in MediaPlayer.OnPreparedListener.

val videoWidth = player!!.videoWidth
val videoHeight = player.videoHeight
val screenWidth = windowManager.defaultDisplay.width
val layout = textureView1.layoutParams
layout.width = screenWidth
layout.height = ((videoHeight.toFloat() / videoWidth.toFloat()) * screenWidth.toFloat()).toInt()
textureView.layoutParams = layout

• In this example, I have to use the local video which is stored in the asset folder. And will accessing this video by using the class AssetFileDescriptor

AssetFileDescriptor is user get the asset folder file like below

assetFileDescriptor = assets.openFd("video_file.mp4")

This is the full description which is required for playing a video on the login or any screen using the TextureView.

Here is the final code screenshot

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

If you want to check the complete code get it from github.

maraj91/LoginBackgroundVideo