Custom Alert Dialog Box

Custom Alert Dialog Box with Example

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.

http://theudaipurstore.com

This Post Has One Comment

Leave a Reply