How to Make a Custom Exit Dialog in Android?

0 0 4 minutes read

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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    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
    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">
 
    <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
    xmlns:android="http://schemas.android.com/apk/res/android"
    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

@Override
public 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