How to Create Custom Dialog Android?

A dialogue is a small window in Android that invites the user to make a choice, provides further information, or informs the user about a certain job. The following are the primary purposes or goals of a dialogue.

Thus, we will discover how to develop Custom Dialogue in Android Studio in this article. In this project, we will first create the layout that we want to display as a custom dialogue in our activity, and then we will integrate that layout.

Example of dialogue

                                                   

 Step-by-Step Implementation
 Step 1: Create a New Project in Android ​studio (File >new  project). 


Step 2: Create an activity_main.xml file in your layout folder . path (res>layout)

Implement the same in​voke the following code inside activity_main.xml file. 

 <?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:layout_height="match_parent"
tools:context=".MainActivity">


<Button
android:id="@+id/dialogBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Dialog"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Create an dialog_layout.xml file in your layout folder . path (res>layout)

Implement the same in​voke the following code inside dialog_layout.xml file. 

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

<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:src="@drawable/baseline_delete" />

<TextView
android:id="@+id/textview"
android:layout_width="392dp"
android:layout_height="50dp"
android:layout_below="@id/imageView"
android:layout_marginTop="10dp"
android:padding="10dp"
android:text="Are you sure want to logout"
android:textAlignment="center"
android:textSize="20sp"
android:textStyle="bold" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textview"
android:layout_centerHorizontal="true"
android:layout_margin="15dp">

<TextView
android:id="@+id/okay_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="100dp"
android:text="Yes"
android:textSize="20sp"
android:textStyle="bold" />

<TextView
android:id="@+id/cancel_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginLeft="100dp"
android:layout_toRightOf="@id/okay_text"
android:text="No"
android:textSize="20sp"
android:textStyle="bold" />

</RelativeLayout>

</RelativeLayout>
Step 4: Create an MainActivity.kt file in your package folder .

Implement the same invoke the fol​lowing code inside MainActivity.kt file.

 import android.app.Dialog
import android.os.Bundle
import android.view.ViewGroup
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {

var mDialogButton: Button? = null
var okay_text: TextView? = null
var cancel_text: TextView? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mDialogButton = findViewById(R.id.dialogBtn)
val dialog = Dialog(this@MainActivity)

mDialogButton?.setOnClickListener {
dialog.setContentView(R.layout.dialog_layout)
dialog.window!!.setLayout(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT
)
dialog.setCancelable(false)

okay_text = dialog.findViewById(R.id.okay_text)
cancel_text = dialog.findViewById(R.id.cancel_text)

okay_text?.setOnClickListener {
dialog.dismiss()
Toast.makeText(this@MainActivity, "Yes clicked", Toast.LENGTH_SHORT).show()
}

cancel_text?.setOnClickListener {
dialog.dismiss()
Toast.makeText(this@MainActivity, "No clicked", Toast.LENGTH_SHORT).show()
}
dialog.show()
}

}
}

Step 5 : Output of above example.

                                                         

Happy coding!

365Bloggy July 17, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive