Welcome to Kotlin Alertdialog With EditText Custom Dialog Builder Example.
In this tutorial, we will make one custom alert dialog in our android app using Kotlin language.
This custom alert dialog will also have three edit texts.
We will be able to fetch the text value from this edit texts and can use it as per our choice.
Developers use alert dialog to grab user’s attention on some important matter.
Most of the alert dialog do not include edit text but sometimes we may need to add edit text in alert dialog.
For example, when we are trying to get OTP from user, we can use alert dialog with edit text.
First of all, check the following video for dialog with edit text.
Step 1. Making Designing Files
Navigate to app->res->drawable directory.
Inside drawable folder, make a new layout XML file and give it a name like button.xml
You should write down the following source snippet in button.xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#9292e6"
android:centerColor="#3838c6"
android:endColor="#100669"
android:angle="270" />
</shape>
Our custom dialog will have two buttons as you have shown in the output video.
Above file will create the blue colored background for OK button.
<gradient> tag will help us to creating attractive background for the button.
Three properties of <gradient> tag will create special effect in the background with various shades of the blue color.
Now, in the same drawable folder, make another file named button_yellow.xml
Below are the source lines for button_yellow.xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#cebd0a"
android:centerColor="#cac520"
android:endColor="#d2d04c"
android:angle="270" />
</shape>
Above file is using the same <gradient> tag and it’s properties as used in the button.xml file.
Just the color values are different. Compiler will create yellow background using this button_yellow.xml file.
Now let us create third file in the drawable folder.
Set the name of this third file as edittext.xml and add the below source in it
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
<gradient android:startColor="#00c4c7a9" android:endColor="#00d6dadf" android:angle="270" />
<stroke android:width="2px" android:color="@color/colorPrimary" />
<corners android:radius="2dp" />
</shape>
</item>
<item android:state_focused="false">
<shape android:shape="rectangle">
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
<gradient android:startColor="#00c4c7a9" android:endColor="#00d6dadf" android:angle="270" />
<stroke android:width="2px" android:color="@color/colorPrimary" />
<corners android:radius="2dp" />
</shape>
</item>
</selector>
Above file making borders for the text view.
We will use the above file to set the border of the edit texts that we will display inside the custom alert dialog.
Step 2. Layout of Custom Alert Dialog
To create the fully customizable view layout for alert dialog, we need to write special XML file.
So go to the app->res->layout directory and make a new XML layout file dialog_layout.xml
Add the below coding lines in dialog_layout.xml file.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height= "wrap_content"
android:textSize="30dp"
android:gravity="center"
android:textColor="#da0c0c"
android:layout_marginTop="30dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="Enter Text Please!!"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et"
android:hint="I am Edit Text in Dialog"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et2"
android:hint="I am Edit Text in Dialog"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et3"
android:hint="I am Edit Text in Dialog"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="@+id/btnok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button"
android:textSize="20sp"
android:text="OK"
android:textColor="#ffffffff" />
<Button
android:id="@+id/btncn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/button_yellow"
android:gravity="center_vertical|center_horizontal"
android:text="Cancel"
android:textSize="20sp"
android:textColor="#ffffffff" />
</LinearLayout>
</LinearLayout>
This file includes three edit texts and two buttons.
Our custom alert dialog will inherit the layout view from the above file.
We have used various files from drawable folder in edit text and button to make our custom dialog more attractive.
Step 3. Displaying Dialog
Now open up your activity_main.xml file and write the below lines in it
<?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"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:text="Click me to fill text in below Text Box!!" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"
android:textSize="20sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv2"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"
android:textSize="20sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv3"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"
android:textSize="20sp"/>
</LinearLayout>
Above main layout file have one button and three text views.
We will set the values in text views from the edit text of the custom dialog as you have shown in the video.
Now in your MainActivity.kt file, you need to write down the following lines of code
import android.app.Activity
import android.app.Dialog
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.view.Window
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
class MainActivity : AppCompatActivity() {
private var tv: TextView? = null
private var tv2: TextView? = null
private var tv3: TextView? = null
private var btn: Button? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btn = findViewById(R.id.btn)
tv = findViewById(R.id.tv)
tv2 = findViewById(R.id.tv2)
tv3 = findViewById(R.id.tv3)
btn!!.setOnClickListener { showDialog(this@MainActivity) }
}
fun showDialog(activity: Activity) {
val dialog = Dialog(activity)
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false)
dialog.setContentView(R.layout.dialog_layout)
var et: EditText? = null
var et2: EditText? = null
var et3: EditText? = null
et = dialog.findViewById(R.id.et)
et2 = dialog.findViewById(R.id.et2)
et3 = dialog.findViewById(R.id.et3)
val btnok = dialog.findViewById(R.id.btnok) as Button
btnok.setOnClickListener {
tv!!.setText(et.getText().toString())
tv2!!.setText(et2.getText().toString())
tv3!!.setText(et3.getText().toString())
dialog.dismiss()
}
val btncn = dialog.findViewById(R.id.btncn) as Button
btncn.setOnClickListener { dialog.dismiss() }
dialog.show()
}
}
First of all, see the following
private var tv: TextView? = null
private var tv2: TextView? = null
private var tv3: TextView? = null
private var btn: Button? = null
First three lines are creating the objects for the text view class.
Similarly, fourth line will provide us the object of the Button class.
When the user clicks the button, compiler will run the below source code snippet
btn!!.setOnClickListener { showDialog(this@MainActivity) }
Above line holds the click event of the button. It will run the showDialog() method.
Following is the code snippet for showDialog() method,
fun showDialog(activity: Activity) {
val dialog = Dialog(activity)
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false)
dialog.setContentView(R.layout.dialog_layout)
var et: EditText? = null
var et2: EditText? = null
var et3: EditText? = null
et = dialog.findViewById(R.id.et)
et2 = dialog.findViewById(R.id.et2)
et3 = dialog.findViewById(R.id.et3)
val btnok = dialog.findViewById(R.id.btnok) as Button
btnok.setOnClickListener {
tv!!.setText(et.getText().toString())
tv2!!.setText(et2.getText().toString())
tv3!!.setText(et3.getText().toString())
dialog.dismiss()
}
val btncn = dialog.findViewById(R.id.btncn) as Button
btncn.setOnClickListener { dialog.dismiss() }
dialog.show()
}
As per the name suggests, this method will show the alert dialog to the user.
setContentView() method will inherit the view layout from the dialog_layout.xml file.
After this, compiler will find three edit texts using findViewById() method.
When the user clicks the OK button, compiler will first fetch the text value from the edit text.
And then it will set this fetched text value inside the TextView.
It will do this process for all the three edit texts and text views.
On the click event of the CANCEL button, compiler will simply hide the custom alert dialog from the screen.
JAVA version of this tutorial : https://demonuts.com/android-custom-dialog-edittext/