How to Implement a Video Player Inside an AlertDialog in Android?
Last Updated :
04 Jul, 2023
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:
Similar Reads
How to Add an Icon Inside an AlertDialog in Android? In this tutorial, you will learn how to display an Icon inside a custom AlertDialog in an Android app using Kotlin. While the default AlertDialog offers basic styling, customizing its layout allows you to add icons, colors, and other UI components to enhance the user experience.Step By Step Implemen
3 min read
How to Implement YoutubePlayerView Library in Android? If you are looking to display YouTube videos inside your app without redirecting your user from your app to YouTube then this library is very helpful for you to use. With the help of this library, you can simply play videos from YouTube with the help of a video id inside your app itself without redi
7 min read
How to Set Buttons Inside an Alert Dialog in Android? In this article, we are going to see how can we set two buttons inside an Alert Dialog. For example, we can see when an alert dialog is pop up then their two types of buttons available one is the Ok or Positive Button another one is Cancel or Negative Button. Alert dialogs are most frequently used i
4 min read
How to Create a Full Screen AlertDialog in Android? AlertDialog in Android is an alert message programmatically displayed to the user over the change of course of action. This appears as a pop-up and has four elements i.e., a title, a message, a positive button, and a negative button. Typically, AlertDialog is non-customized and appears as an overlay
2 min read
AlertDialog in Android using Jetpack Compose AlertDialog shows the Alert message and gives the answer in the form of yes or no. Alert Dialog displays the message to warn you and then according to your response, the next step is processed. Android Alert Dialog is built with the use of three fields: Title, Message area, and Action Button.We have
3 min read
How to Customize AlertDialog Dimensions in Android? AlertDialog in Android is a kind of pop-up message that alerts the user about the activity usages. This is specifically developed by a developer to perform any operations or ask for any permissions and not an Android OS call. Alert Dialog in general has no fixed dimension values and rather varies fr
3 min read