How to Create AlertDialog Box Using SweetAlert Dialog Library in Android?

In this article, we will learn about how to add Custom Alert Dialog in an app using the SweetAlert Dialog Library. It is a pop-up box that appears in response to any action of the user. AlertBox is very useful when it comes to validation, it can be used to display confirmation messages. Suppose the user presses the Back Button without saving the changes then for warning it can be used. When the transaction is done in payment apps a short Dialog Box can be shown to the user describing the transaction’s status.

Advantages:

• It provides us with an excellent user interface which makes the user experience very good.
• It makes the work much easier so it is used over Custom Dialog, which needs the whole layout to be created.
• It provides many different types of layouts for the dialog box.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Adding Dependency to the build.gradle File

 Go to Module build.gradle file and add this dependency and click on Sync Now button.

implementation 'com.github.f0ris.sweetalert:library:1.5.1'

Step 3: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

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/basic_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="showDialog"
        android:text="Basic Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.452"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.124" />

    <Button
        android:id="@+id/error_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="showDialog"
        android:text="Error Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.452"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.284" />

    <Button
        android:id="@+id/warning_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="showDialog"
        android:text="Warning Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.452"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.45" />

    <Button
        android:id="@+id/success_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="256dp"
        android:onClick="showDialog"
        android:text="Success Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.47"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/custom_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="156dp"
        android:onClick="showDialog"
        android:text="Custom Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.464"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import cn.pedant.SweetAlert.SweetAlertDialog;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void showDialog(View view) {
        switch (view.getId()) {
            case R.id.basic_dialog:
                new SweetAlertDialog(this)
                        .setTitleText("Here's a message!")
                        .setContentText("This is Basic Dialog").show();
                break;

            case R.id.error_dialog:
                new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE)
                        .setTitleText("Oops...")
                        .setContentText("Something went wrong!").show();
                break;

            case R.id.warning_dialog:
                new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE)
                        .setTitleText("Are you sure?")
                        .setContentText("Won't be able to recover this file !")
                        .setConfirmText("Yes, delete it!").show();
                break;

            case R.id.success_dialog:
                new SweetAlertDialog(this, SweetAlertDialog.SUCCESS_TYPE)
                        .setTitleText("Great!")
                        .setContentText("You completed this task.").show();
                break;

            case R.id.custom_dialog:
                new SweetAlertDialog(this, SweetAlertDialog.CUSTOM_IMAGE_TYPE)
                        .setTitleText("Android")
                        .setContentText("This is custom dialog")
                        .setCustomImage(R.drawable.ic_android_black).show();
                break;
        }
    }
}

Kotlin

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import cn.pedant.SweetAlert.SweetAlertDialog

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    fun showDialog(view: View) {
        when (view.id) {
            R.id.basic_dialog -> SweetAlertDialog(this)
                .setTitleText("Here's a message!")
                .setContentText("This is Basic Dialog").show()

            R.id.error_dialog -> SweetAlertDialog(this,
                SweetAlertDialog.ERROR_TYPE).setTitleText("Oops...")
                .setContentText("Something went wrong!").show()

            R.id.warning_dialog -> SweetAlertDialog(this,
                SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?")
                .setContentText("Won't be able to recover this file !")
                .setConfirmText("Yes, delete it!").show()

            R.id.success_dialog -> SweetAlertDialog(this,
                SweetAlertDialog.SUCCESS_TYPE).setTitleText("Great!")
                .setContentText("You completed this task.").show()

            R.id.custom_dialog -> SweetAlertDialog(this,
                SweetAlertDialog.CUSTOM_IMAGE_TYPE).setTitleText("Android")
                .setContentText("This is custom dialog")
                .setCustomImage(R.drawable.ic_android_black).show()
        }
    }
}

Output: