What is Custom Alert Dialog Box?
The custom dialog uses DIALOG to create a custom alert or pop-up in Android Studio. A dialog box will appear above the current window, which defines its contents in it.
Both Alert Dialog and Custom Alert Dialog display a small window to make a decision.
Sometimes with AlertDialog, we need to gather user input or adapt the dialogue to meet our needs. As a result, we construct our own AlertDialogs/ Custom alert Dialog. This article will demonstrate how to customize AlertDialogs and use their input.
Content:
Preview: Custom Alert Dialog Box
File: MainActivity.kt
File: activity_main.xml
File: custom_item.xml
Preview
<– Alert Dialog Box
File: MainActivity.kt
–> In MainActivity.kt file initilize variable and implement setonclicklistener and called a CustomDialogBox() function inside CustomDialogBox() create a alert dialog box and implements alert dialog methods.
package com.sagar.customdialogboxinandroid
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
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)
findViewById<Button>(R.id.button).setOnClickListener {
CustomDialogBox()
}
}
fun CustomDialogBox() {
val builder= AlertDialog.Builder(this)
builder.setTitle("Name")
val customLayout: View = layoutInflater
.inflate(
R.layout.custom_item,
null
)
builder.setView(customLayout)
builder
.setPositiveButton(
"OK"
) { dialog, which ->
val editText: EditText = customLayout
.findViewById(
R.id.edit_txt
)
sendmessage(
editText
.text
.toString()
)
}
.setNegativeButton("Cancel"){
dialog, which ->
Toast.makeText(
this,
"Cancel",
Toast.LENGTH_SHORT
)
.show()
}
val dialog: AlertDialog = builder.create()
dialog.show()
}
private fun sendmessage(MSG: String) {
Toast.makeText(
this,
MSG,
Toast.LENGTH_SHORT
)
.show()
}
}
File: activity_main.xml
–> activity_main.xml file contains a textview and button inside a ConstraintLayout.When you click the button, the AlertDialog box appears.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/teal_200"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="124dp"
android:fontFamily="sans-serif-black"
android:text="Custom Dialog Box"
android:textColor="@color/black"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center_horizontal" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="104dp"
android:text="Show Dialog Box"
android:backgroundTint="@color/black"
android:textColor="@color/teal_200"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
File: custom_item.xml
–> Make a custom layout.xml XML file. In custom layout.xml, add the following code. This code adds a textView and edittext to the alert dialog box.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/teal_200">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="124dp"
android:fontFamily="sans-serif-black"
android:text="Developers Dome"
android:textColor="@color/black"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/edit_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="276dp"
android:background="@color/black"
android:ems="10"
android:gravity="center_horizontal"
android:hint=" Enter Name"
android:inputType="textPersonName"
android:textAlignment="center"
android:textColor="@color/white"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
- We hope that this guide will assist you in quickly creating a simple Alert dialog/ Custom alert dialog box in Android . If you have any problems, please post them in the comments section and we will gladly assist you.
Pingback: Material Dialogs in Android with Example - Developers Dome