In this tutorial, we will learn how to use Material Dialogs in android. A dialog is a small window that asks the user to make a choice or enter more information. Dialog does not take up the entire screen and is typically used for modal events in which users must take action before proceeding.
Contents
Material Dialogs in android
- Date Picker
- Alert dialog
- Progress dialog
- Custom dialog
1. Date Picker
In your own user interface, you may
Learn Java Programming & get a Certificate
Android Date Picker to select a date that includes the day, month, and year. Android provides DatePicker and DatePickerDialog components for this purpose.
2 . Alert Dialog
The Android AlertDialog class can be used to display a dialog message with buttons for OK and Cancel. It can be used to interrupt the user and ask if he or she wants to continue or stop.
3 . Progress Dialog
Android Progress Dialog is a user interface that displays the progress of a task. For example, if you want the user to wait until the current lined-up task is completed, you can use the progress dialog.
for example: downloading and uploading, sending, etc.
4 . Custom Dialog
In Android Studio, the custom dialog uses the DIALOG to produce a custom alert. Dialogs display a small window, or popup, that calls the user’s attention to the activity before they proceed. The dialog appears on top of the current window, displaying the material specified in it.
Preview: Material dialog
<–Material Dialog Example
- dependency for material component
–> Add the given below code to your file build.gradle (app).
// dependency for material component implementation 'com.google.android.material:material:1.4.0'
File: activity_main.xml
–> Add the given below code to your file activity_main.xml.
<?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/Datepicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="98dp"
android:onClick="datepicker"
android:text="Datepicker"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/alertdialouge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="64dp"
android:onClick="openalert"
android:text="Alert Dialouge"
app:layout_constraintStart_toStartOf="@+id/Datepicker"
app:layout_constraintTop_toBottomOf="@+id/Datepicker" />
<Button
android:id="@+id/progressbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:onClick="progressDialouge"
android:text="Progress diaolge"
app:layout_constraintBottom_toTopOf="@+id/custompicker"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/alertdialouge"
app:layout_constraintTop_toBottomOf="@+id/alertdialouge"
app:layout_constraintVertical_bias="0.091" />
<Button
android:id="@+id/custompicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="136dp"
android:onClick="custompicker"
android:text=" Custom dialouge"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/alertdialouge"
app:layout_constraintVertical_bias="0.857" />
<EditText
android:id="@+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="26dp"
android:hint="Date Preview"
android:textAlignment="center"
android:inputType="datetime"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center_horizontal" />
</androidx.constraintlayout.widget.ConstraintLayout>
File: item_view_dialog.xml
–> Create a New Layout Resource File and Add the given below code to your 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">
<androidx.cardview.widget.CardView
android:id="@+id/cardview"
android:layout_width="0dp"
android:layout_height="250dp"
android:layout_margin="10dp"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/cardview_bg"
android:orientation="vertical">
<Spinner
android:layout_width="50dp"
android:layout_height="wrap_content"
android:id="@+id/spinner"
android:layout_marginTop="10dp"
android:background="@drawable/ic_baseline_arrow_drop_down_circle_24"
android:dropDownWidth="wrap_content"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:textSize="30sp"
android:layout_marginTop="10dp"
android:textStyle="bold"
android:textAlignment="center"
android:layout_height="wrap_content"
android:text="Developer Dome"
android:gravity="center_horizontal" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
File: cardview_bg.xml
–> Create a New drawable file and Add the given below code to your file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/purple_500"/>
<corners android:radius="20dp"/>
<stroke android:width="2dp"/>
</shape>
File: MainActivity.kt
–> Add the given below code to your file MainActivity.kt.
package com.example.materialdialogue
import android.app.DatePickerDialog
import android.app.ProgressDialog
import android.os.Bundle
import android.view.View
import android.view.Window
import android.view.WindowManager
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import java.io.InterruptedIOException
import java.util.*
class MainActivity : AppCompatActivity() {
lateinit var c: Calendar
private lateinit var dt: String
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN)
setContentView(R.layout.activity_main)
}
fun datepicker(view: View) {
c = Calendar.getInstance()
val dp =
DatePickerDialog(
this,
{ datepicker, yy, mm, dd ->
dt = "$dd-${mm + 1}-$yy"
findViewById<EditText>(R.id.edittext).setText(dt)
},
c.get(Calendar.YEAR),
c.get(Calendar.MONTH),
c.get(Calendar.DAY_OF_MONTH)
)
dp.show()
}
fun openalert(view: View) {
val ad = AlertDialog.Builder(this)
ad.setMessage("Are you enjoying")
ad.setTitle("Enjoying confirm")
ad.setIcon(R.drawable.ic_baseline_sports_handball_24)
ad.setPositiveButton("yes") { dialog, which ->
Toast.makeText(this, "yes button pressed", Toast.LENGTH_SHORT).show()
}
ad.setNegativeButton("No") { dialog, which ->
Toast.makeText(this, "No button pressed ", Toast.LENGTH_SHORT).show()
}
ad.show()
}
fun progressDialouge(view: View) {
val pd = ProgressDialog(this)
pd.setTitle("Downloading")
pd.setMessage("File installing")
pd.max = 100
pd.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL)
pd.show()
Thread(Runnable {
var count = 0
while (count <= 100) {
try {
pd.progress = count
count += 10
Thread.sleep(1000)
} catch (i: InterruptedIOException) {
}
}
pd.dismiss()
}).start()
}
fun custompicker(view: View) {
val ad = AlertDialog.Builder(this)
ad.setMessage("Are you made it ")
ad.setTitle("Enjoying confirm")
//////setview is main use of it
ad.setView(R.layout.item_view_dialouge)
ad.setPositiveButton("yes") { dialog, which ->
Toast.makeText(this, "yes button pressed ", Toast.LENGTH_SHORT).show()
}
ad.setNegativeButton("No") { dialog, which ->
Toast.makeText(
this, "" +
"No button pressed ", Toast.LENGTH_SHORT
).show()
}
ad.show()
}
}
- Listview in Android with Example | Kotlin
- Webview Example Tutorial in Android Studio
- Android RecyclerView in Kotlin with Example
- To learn how to correctly build and use dialogues on Android, you should read the official material design guidelines for dialogs.
Pingback: Custom Alert Dialog Box with Example - Developers Dome
Pingback: How to Create Alert Dialog Box in Android - Developers Dome
Pingback: Android Toggle Button Example | Kotlin - Developers Dome
Pingback: Using Android CheckBox multiple selections - Developers Dome