In this tutorial, we are going to create a Custom Exit Dialog in Android. By default, android doesn’t provide any exit dialog, but we can create it using the dialog class in java. But most of the developers and also the user don’t like the default dialog box and also we can’t do any modification in the dialog box according to our needs, so in this article, we will create a simple custom exit dialog. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Approach:
Step 1: Creating a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that choose Java as the language though we are going to implement this project in Java language.
Step 2: Before going to the coding section first do some pre-task
Go to app -> res -> values -> colors.xml file and set the colors for the app.
XML
<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#0F9D58</color> <color name="colorPrimaryDark">#0F9D58</color> <color name="colorAccent">#05af9b</color> </resources> |
We also create a new drawable file (card_round.xml) and also refer to elasq, flaticon for an alert icon, and paste it into the drawable folder. card_round.xml code is shown below
XML
<?xml version="1.0" encoding="utf-8"?> android:shape="rectangle"> <corners android:radius="8dp" /> <padding android:bottom="8dp" android:left="8dp" android:right="8dp" android:top="8dp" /></shape> |
Step 3: Designing the UI
The activity_main.xml contains a default text and we change the text to “Press back to exit ” as shown below
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Press back to exit" android:textSize="40dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout> |
Now we create a new layout resource file (custom_exit_dialog.xml) inside it we add an ImageView, TextView, and LinearLayout as shown below as follows:
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:id="@+id/bottom_sheet_exit_linear" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/card_round" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!-- exit the app textview --> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="00dp" android:fontFamily="sans-serif-medium" android:gravity="center" android:text="Exit The App ?" android:textSize="20dp" android:textStyle="bold" /> <!-- Alert Icon ImageView --> <ImageView android:layout_width="match_parent" android:layout_height="80dp" android:layout_marginTop="16dp" android:src="@drawable/alert_icon" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="0dp" android:orientation="horizontal" android:weightSum="2"> <!-- No Text View --> <TextView android:id="@+id/textViewNo" android:layout_width="match_parent" android:layout_height="48dp" android:layout_gravity="center" android:layout_margin="8dp" android:layout_weight="1" android:background="@drawable/card_round" android:backgroundTint="#2196F3" android:elevation="8dp" android:gravity="center" android:text="NO" android:textColor="@color/white" /> <!-- Yes Text View --> <TextView android:id="@+id/textViewYes" android:layout_width="match_parent" android:layout_height="48dp" android:layout_gravity="center" android:layout_margin="8dp" android:layout_weight="1" android:background="@drawable/card_round" android:backgroundTint="#FD0001" android:elevation="8dp" android:gravity="center" android:text="Yes" android:textColor="@color/white" /> </LinearLayout> </LinearLayout></LinearLayout> |
Step 4: Coding Part
Now Open the MainActivity.java file there within the class, first of all, create the function public void customExitDialog() as shown below
Java
public void customExitDialog() { // creating custom dialog final Dialog dialog = new Dialog(MainActivity.this); // setting content view to dialog dialog.setContentView(R.layout.custom_exit_dialog); // getting reference of TextView TextView dialogButtonYes = (TextView) dialog.findViewById(R.id.textViewYes); TextView dialogButtonNo = (TextView) dialog.findViewById(R.id.textViewNo); // click listener for No dialogButtonNo.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // dismiss the dialog dialog.dismiss(); } }); // click listener for Yes dialogButtonYes.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // dismiss the dialog and exit the exit dialog.dismiss(); finish(); } }); // show the exit dialog dialog.show();} |
Kotlin
fun customExitDialog() { // creating custom dialog val dialog = Dialog(this@MainActivity) // setting content view to dialog dialog.setContentView(R.layout.custom_exit_dialog) // getting reference of TextView val dialogButtonYes = dialog.findViewById(R.id.textViewYes) as TextView val dialogButtonNo = dialog.findViewById(R.id.textViewNo) as TextView // click listener for No dialogButtonNo.setOnClickListener { // dismiss the dialog dialog.dismiss() } // click listener for Yes dialogButtonYes.setOnClickListener { // dismiss the dialog and exit the exit dialog.dismiss() finish() } // show the exit dialog dialog.show() }//THis code is written by Ujjwal kumar bhardwaj |
Now we call the customExitDialog() method inside the onBackPressed() as shown below
Java
@Overridepublic void onBackPressed() { // calling the function customExitDialog();} |
Kotlin
override fun onBackPressed() { // calling the function customExitDialog() }// This code is written by Ujjwal Kumar Bhardwaj |
Below is the complete code for the MainActivity.java file.
Java
import android.app.Dialog;import android.os.Bundle;import android.view.View;import android.widget.TextView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void customExitDialog() { // creating custom dialog final Dialog dialog = new Dialog(MainActivity.this); // setting content view to dialog dialog.setContentView(R.layout.custom_exit_dialog); // getting reference of TextView TextView dialogButtonYes = (TextView) dialog.findViewById(R.id.textViewYes); TextView dialogButtonNo = (TextView) dialog.findViewById(R.id.textViewNo); // click listener for No dialogButtonNo.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //dismiss the dialog dialog.dismiss(); } }); // click listener for Yes dialogButtonYes.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // dismiss the dialog // and exit the exit dialog.dismiss(); finish(); } }); // show the exit dialog dialog.show(); } @Override public void onBackPressed() { // calling the function customExitDialog(); }} |
Kotlin
import android.app.Dialog;import android.os.Bundle;import android.view.View;import android.widget.TextView;import androidx.appcompat.app.AppCompatActivity;class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } fun customExitDialog() { // creating custom dialog val dialog = Dialog(this@MainActivity) // setting content view to dialog dialog.setContentView(R.layout.custom_exit_dialog) // getting reference of TextView val dialogButtonYes = dialog.findViewById(R.id.textViewYes) as TextView val dialogButtonNo = dialog.findViewById(R.id.textViewNo) as TextView // click listener for No dialogButtonNo.setOnClickListener(object : OnClickListener() { fun onClick(v: View?) { //dismiss the dialog dialog.dismiss() } }) // click listener for Yes dialogButtonYes.setOnClickListener(object : OnClickListener() { fun onClick(v: View?) { // dismiss the dialog // and exit the exit dialog.dismiss() finish() } }) // show the exit dialog dialog.show() } override fun onBackPressed() { // calling the function customExitDialog() }}// This code is written by Ujjwal Kumar Bhardwaj |
Output:
