AlertDialog with custom layout (Kotlin)

How to create Create AlertDialog With Custom Layout (Kotlin)?

     DESCRIPTION     

This tutorial will show how to create and show an AlertDialog with Custom Layout containing views such as EditTexts and Buttons etc. We will show AlertDialog on Button click. Custom layout will contain three EditTexts and two Buttons. When information is entered in EditTexts, Press Login Button, Dialog will be dismissed, and the information will be set to the TextView.

     VIDEO     

     SOURCE CODE     

Step 1: Create a new Project or open new project

Step 2: Create new Layout Resource file 'login_dialog.xml' under res>layout folder

Step 3: Code

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:padding="10dp"
    tools:context=".MainActivity">

    <!--button to show custom dialog-->
    <Button
        android:id="@+id/mainLoginBtn"
        android:text="Open Login Dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <!--the input text will show in this text view-->
    <TextView
        android:id="@+id/mainInfoTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Info"/>

</LinearLayout>

login_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <EditText
        android:id="@+id/dialogNameEt"
        android:hint="Enter Name"
        android:inputType="textPersonName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/dialogEmailEt"
        android:hint="Enter Email"
        android:inputType="textEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/dialogPasswEt"
        android:hint="Enter Password"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <Button
            android:id="@+id/dialogLoginBtn"
            android:text="Login"
            style="@style/Base.Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/dialogCancelBtn"
            android:text="Cancel"
            style="@style/Base.Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

MainActivity.kt

package com.blogspot.devofandroid.myapplication

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.app.AlertDialog
import android.view.LayoutInflater
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.login_dialog.view.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //button click to show dialog
        mainLoginBtn.setOnClickListener {
            //Inflate the dialog with custom view
            val mDialogView = LayoutInflater.from(this).inflate(R.layout.login_dialog, null)
            //AlertDialogBuilder
            val mBuilder = AlertDialog.Builder(this)
                    .setView(mDialogView)
                    .setTitle("Login Form")
            //show dialog
            val  mAlertDialog = mBuilder.show()
            //login button click of custom layout
            mDialogView.dialogLoginBtn.setOnClickListener {
                //dismiss dialog
                mAlertDialog.dismiss()
                //get text from EditTexts of custom layout
                val name = mDialogView.dialogNameEt.text.toString()
                val email = mDialogView.dialogEmailEt.text.toString()
                val password = mDialogView.dialogPasswEt.text.toString()
                //set the input text in TextView
                mainInfoTv.setText("Name:"+ name +"\nEmail: "+ email +"\nPassword: "+ password)
            }
            //cancel button click of custom layout
            mDialogView.dialogCancelBtn.setOnClickListener {
                //dismiss dialog
                mAlertDialog.dismiss()
            }
        }
    }

}

Step 4: Run Project

Output