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