AlertDialog with Custom XML Layout in Kotlin Android

We use AlertDialog class to show popups in Android. But sometimes default AlertDialog’s layout is not enough to fulfill our requirement. So that we have to create Alert Dialog with custom layout. This article explains how to create AlertDialog with Custom XML Layout in Kotlin Android.

Basic Kotlin Code to populate Custom XML Layout in AlertDialog

var dialog: AlertDialog? = null
val builder = AlertDialog.Builder(this)
// set the custom layout
val view = layoutInflater.inflate(R.layout.layout_dialog, null)

val tvTitle: TextView = view.findViewById(R.id.tv_title) // Get reference of your XML views

builder.setView(view)
// create and show the alert dialog
dialog = builder.create()
dialog.show()

An Example of Custom XML Layout in AlertDialog

In this example, we will create a custom AlertDialog using Kotlin, as shown in the following screenshot.

AlertDialog with Custom XML Layout in Kotlin
How to populate Custom Layout in AlertDialog in Kotlin Android

XML Layout File

layout_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:paddingBottom="10dp">

<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Dialog Title"
android:textSize="20sp"
android:textStyle="bold"
android:gravity="center"
android:background="#0000ff"
android:textColor="#fff"
android:padding="15dp"/>

<TextView
android:id="@+id/tv_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Detail of dialog"
android:textSize="17sp"
android:textColor="#000"
android:padding="15dp"
android:layout_below="@+id/tv_title"/>

<Button
android:id="@+id/bt_done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Done"
android:layout_below="@+id/tv_detail"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
/>

</RelativeLayout>

Kotlin Code

Following is the Kotlin code to Populate above XML layout in an AlertDialog.

var dialog: AlertDialog? = null
val builder = AlertDialog.Builder(this)
// set the custom layout
val view = layoutInflater.inflate(R.layout.layout_dialog, null)
// Get Views references from your layout
val tvTitle: TextView = view.findViewById(R.id.tv_title)
val tvDetail: TextView = view.findViewById(R.id.tv_detail)
val btDone: Button = view.findViewById(R.id.bt_done)

tvTitle.setText("Dialog Title")
tvDetail.setText("This is title detail")

btDone.setOnClickListener(View.OnClickListener {
    dialog?.dismiss()
})

builder.setView(view)
// create and show the alert dialog
dialog = builder.create()
dialog.show()

In the above code, You can see I have got the reference to my XML TextViews and button. You can modify this section of code according to your own custom layout.

That’s it. Enjoy 🙂

For other helping, code snippets have a look at our Kotlin Articles List.

Please share this post:
Native Mobile Application Developer (Android + IOS) having experience in Java, Swift, Kotlin, Objective C, Unity, C#, C/C++, NODE JS & PHP.

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: