How to Add an Icon Inside an AlertDialog in Android?

In this article, we are going to see how to place an Icon inside an AlertDialog. The default AlertDialog provides a simple User interface, you can enhance the UI by adding an icon to the AlertDialog. By using the below code we can add an Icon inside an Alert Dialog

// Find the ImageView and set the icon
val iconImage: ImageView = dialogView.findViewById(R.id.dialog_icon)
iconImage.setImageResource(R.drawable.ic_alert) 

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_layout.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 an ImageView for displaying the Icon, one TextView to display the message and one cancel button to dismiss the alert dialog.

dialog_layout.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<!--LinearLayout-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:gravity="center"
    android:orientation="horizontal">

    <!--ImageView-->
    <ImageView
        android:id="@+id/dialog_icon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/ic_alert" />

    <!--TextView-->
    <TextView
        android:textStyle="bold"
        android:textColor="@color/black"
        android:gravity="center"
        android:padding="10dp"
        android:textSize="18dp"
        android:id="@+id/tv_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="msg" />

</LinearLayout>

Step 4: Working with acrivity_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

<?xml version="1.0" encoding="utf-8"?>
<!--LinearLayout-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <!--Button-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open Dialog with Icon"
        android:id="@+id/openDialog"/>

</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 an Icon inside the Alert Dialog.

MainActivity.kt:

Kotlin

package com.example.gfg

import android.annotation.SuppressLint
import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val btn_opendialog:Button=findViewById(R.id.openDialog)
        btn_opendialog.setOnClickListener {
            showDialogwithIcon(this@MainActivity)
        }
    }

    @SuppressLint("MissingInflatedId")
    // Open the Dialog With an Alert Icon
    fun showDialogwithIcon(context: Context) {
        val builder = AlertDialog.Builder(context)
        val inflater = LayoutInflater.from(context)
        val dialogView = inflater.inflate(R.layout.dialog_layout, null)

        // Find the ImageView and set the icon
        val iconImage: ImageView = dialogView.findViewById(R.id.dialog_icon)
        iconImage.setImageResource(R.drawable.ic_alert)

        // Find the TextView and set the message
        val message: TextView = dialogView.findViewById(R.id.tv_message)
        message.text = "This is an Alert Dialog With an Icon."

        // Set the custom layout to the dialog
        builder.setView(dialogView)

        // Add a negative button to cancel the dialog
        builder.setNegativeButton("Cancel") { dialog, _ ->
            dialog.dismiss()
        }

        // Show the dialog
        val dialog: AlertDialog = builder.create()
        dialog.show()
    }
}

Output: