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:
Contact Us