How to Create Material Alert Dialog in Android Using Kotlin

Alert dialogs are an essential component in Android app development as they allow developers to communicate important information or prompt users for actions.

Material Design guidelines introduced a sleek and modern design language that enhances the overall user experience. In this tutorial, we will explore how to create a material alert dialog in Android using Kotlin.

By following these steps, you’ll be able to implement an attractive and user-friendly alert dialog in your Android applications.

To follow along with this tutorial, you should have a basic understanding of Android app development and Kotlin programming. Make sure you have Android Studio installed and set up on your development machine.

Create New Project

Open Android Studio and create a new project. Give the project name MaterialAlertDialog.

How to Create a New Project in Android Studio

Add the Material Design dependency

To use Material Design components in your project, you need to add the Material Design dependency to your app-level build.gradle file. Open the file and add the following line to the dependencies block:

implementation 'com.google.android.material:material:1.11.0'

Sync your project to ensure that the dependency is downloaded and added to your project.

Design the layout

In this step, we’ll design the layout for the alert dialog. Open the activity_main.xml file for the layout you want to display the alert dialog and add a button or any other UI element that will trigger the dialog. Here, we are adding a button with the ID open_dialog:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/open_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Open Alert Dialog" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Implement the dialog logic

Next, navigate to the Kotlin file associated with your layout MainActivity.kt initialize the button, and set its click listener. Inside the click listener, we will create and display the material alert dialog.

package com.example.materialalertdialog

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.materialalertdialog.databinding.ActivityMainBinding
import com.google.android.material.dialog.MaterialAlertDialogBuilder

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.openDialog.setOnClickListener {
            openDialog()
        }
    }

    private fun openDialog() {
        val mDialog = MaterialAlertDialogBuilder(this)
        mDialog.setPositiveButton("Close") { dialogInterface, _ ->
            dialogInterface.dismiss()
        }.setNegativeButton("Cancel") { dialogInterface, _ ->
            dialogInterface.dismiss()
        }.setMessage("This is the Material Alert Dialog in Android using Kotlin.")
            .setTitle("Alert Dialog").create()
        mDialog.show()
    }
}

In the above code, we create an instance of MaterialAlertDialogBuilder and set the title and message for the dialog. We also set positive and negative buttons with their respective click listeners. Finally, we call show() to display the dialog.

Output

You have successfully implemented the material alert dialog in your Android application. Now, run the application on an emulator or a physical device to see the dialog in action.

Clicking the Open Alert Dialog button should display the material design 3 alert dialog with the specified title, message, and buttons.

In this tutorial, we learned how to create a material alert dialog in Android using Kotlin. Material Design 3 provides a modern and visually appealing style that can greatly enhance the user experience in your applications.

By following the steps outlined in this article, you can easily incorporate material alert dialogs into your Android projects. Remember to customize the dialog according to your specific requirements to create a consistent and engaging user interface.

I hope this article helps you understand how to create a material alert dialog in Android using Kotlin.

So, go ahead and try it out today!