How to Implement a Video Player Inside an AlertDialog in Android?

Mainly alert dialogues are used to display an important message to the user. It is possible to embed a video player inside it. This allows developers to create dynamic and interactive video-based dialogs that are useful in various use cases. In this article, we will explore the step-by-step process of implementing a video player inside an AlertDialog in Android. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio and select the language as Kotlin.

Step 2: Change the StatusBar Color

Navigate to app > res > values > themes > themes.xml and add the below code under the style section in the themes.xml file.

<item name="android:statusBarColor" tools:targetApi="l">#308d46</item>

Step 3: Creating a layout for Alert Dialog

Navigate to the app > res > layout > create a file named dialog_video_player.xml and add the below code to that file. Below is the code for the dialog_layout.xml file.  It represents the UI of our Alert Dialog, It contains the Video View to play the video, TextView, and a Close button to dismiss the alert dialog.

dialog_video_player.xml:

XML

<!-- Layout for the video player dialog -->
<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" />

</RelativeLayout>

Step 4: Working with activity_main.xml

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. This xml file represents our app UI, our UI contains one button by clicking it the Alert dialog is opened.

activity_main.xml:

XML

<!-- layout for the main activity -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/vdo_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open Video Dialog"/>

</LinearLayout>

Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt and follow the below code. Below is the code for the MainActivity.kt. Comments are added inside the code to understand the code in more detail. This activity contains the main logic to create an Alert dialog and add a Video Player inside the Alert Dialog.

MainActivity.kt:

Kotlin

package com.example.gfg

import android.app.AlertDialog
import android.content.Context
import android.net.Uri
import android.os.Bundle
import android.view.LayoutInflater
import android.widget.Button
import android.widget.MediaController
import android.widget.VideoView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // Get the path for the sample video
        val videoUri = Uri.parse("android.resource://" + packageName + "/" + R.raw.sample_video)
        // Find the video dialog button and set the click listener
        var btn_video_dialog = findViewById<Button>(R.id.vdo_dialog)
        btn_video_dialog.setOnClickListener {
            showVideoPlayerAlertDialog(this, videoUri)
        }
    }

    // Function to show the video player dialog
    private fun showVideoPlayerAlertDialog(context: Context, videoUri: Uri) {
        // Inflate the dialog layout
        val dialogLayout = LayoutInflater.from(context).inflate(R.layout.dialog_video_player, null)
        // Find the VideoView in the dialog layout
        val videoView = dialogLayout.findViewById<VideoView>(R.id.videoView)
        // Set the video URI to the VideoView
        videoView.setVideoURI(videoUri)
        // Create a MediaController and set it as
          // the anchor view for the VideoView
        val mediaController = MediaController(context)
        mediaController.setAnchorView(videoView)
        videoView.setMediaController(mediaController)
        // Start playing the video
        videoView.start()
        // Create an AlertDialog builder
        val builder = AlertDialog.Builder(context)
            .setTitle("Video Player Dialog")
            .setView(dialogLayout)
            .setPositiveButton("Close") { dialog, _ -> dialog.dismiss() }
        // Create and show the dialog
        val dialog = builder.create()
        dialog.show()
    }
}

Output: