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--><Buttonandroid: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--><TextViewandroid: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"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="10dp"><EditTextandroid:id="@+id/dialogNameEt"android:hint="Enter Name"android:inputType="textPersonName"android:layout_width="match_parent"android:layout_height="wrap_content" /><EditTextandroid:id="@+id/dialogEmailEt"android:hint="Enter Email"android:inputType="textEmailAddress"android:layout_width="match_parent"android:layout_height="wrap_content" /><EditTextandroid:id="@+id/dialogPasswEt"android:hint="Enter Password"android:inputType="textPassword"android:layout_width="match_parent"android:layout_height="wrap_content" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center"><Buttonandroid:id="@+id/dialogLoginBtn"android:text="Login"style="@style/Base.Widget.AppCompat.Button.Colored"android:layout_width="wrap_content"android:layout_height="wrap_content" /><Buttonandroid: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.myapplicationimport android.support.v7.app.AppCompatActivityimport android.os.Bundleimport android.support.v7.app.AlertDialogimport android.view.LayoutInflaterimport 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 dialogmainLoginBtn.setOnClickListener {//Inflate the obrolan with custom viewval mDialogView = LayoutInflater.from(this).inflate(R.layout.login_dialog , null)//AlertDialogBuilderval mBuilder = AlertDialog.Builder(this).setView(mDialogView).setTitle("Login Form")//show dialogval  mAlertDialog = mBuilder.show()//login button click of custom layoutmDialogView.dialogLoginBtn.setOnClickListener {//dismiss dialogmAlertDialog.dismiss()//get text from EditTexts of custom layoutval name = mDialogView.dialogNameEt.text.toString()val email = mDialogView.dialogEmailEt.text.toString()val password = mDialogView.dialogPasswEt.text.toString()//set the input text in TextViewmainInfoTv.setText("Name:"+ name +"\nEmail: "+ email +"\nPassword: "+ password)}//cancel button click of custom layoutmDialogView.dialogCancelBtn.setOnClickListener {//dismiss dialogmAlertDialog.dismiss()}}}}

Step 4: Run Project

Output