Skip to content
Related Articles

Related Articles

Improve Article

How to Create AlertDialog Box Using SweetAlert Dialog Library?

  • Difficulty Level : Medium
  • Last Updated : 27 May, 2021

In this article, we will learn about how to add Custom Alert Dialog in an app using SweetAlert Dialog Library. It is a pop-up box which 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 if 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 status of the transaction. 
Advantages:
 

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

Approach:
Step 1: Add the support Library in build.gradle file and add dependency in the dependencies section. This library has inbuilt alert dialog which can be directly used.
 

XML




dependencies {        
        implementation 'com.github.f0ris.sweetalert:library:1.5.1'        
}

Step 2: Now add the following code in activity_main.xml file. This code adds five buttons in the activity. Each button is used to call different style of Alert Dialog Box.
 

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:onClick="showDialog"
        android:id="@+id/basic_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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:onClick="showDialog"
        android:id="@+id/error_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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:onClick="showDialog"
        android:id="@+id/warning_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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:onClick="showDialog"
        android:id="@+id/success_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="256dp"
        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:onClick="showDialog"
        android:id="@+id/custom_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="156dp"
        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 3: Add the following code in MainActivity.java file. Now on clicking any button the showDialog() function is started and corresponding Alert Dialog Box is displayed. onClickListner can also be added to the button instead of showDialog function.
 



MainActivity.java

package org.geeksforgeeks.gfgbottomnav;

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("Thi is custom dialog")
                        .setCustomImage(R.drawable.ic_android_black)
                        .show();
                break;
        }
    }
}

Output:
 

Reference Link: https://github.com/F0RIS/sweet-alert-dialog
 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :