Signup/Sign In

Alert Dialog Using SweetAlert Dialog in Android App

Posted in Programming   LAST UPDATED: AUGUST 21, 2021

    We have seen different types of alerts in many different apps such as Wallpaper app (when we want to download the wallpaper), Gallery App (when we try to delete some image or video ), File Manager (when we try to move file or rename the file), etc. It is mainly used to show simple message to the user or an alert. It will make the UI of your Android app more beautiful and interactive and also help the user to remember it for long time.

    What is SweetAlert?

    Some app need a way to show user a message of what it is doing like showing a alert before deleting the file. So to do this we need external library and Sweet Alert is the library which is used to do this type customizations in our android studio app. So it will make the app more attractive and UI friendly with minimal code. You can learn more about Sweet Alert from GitHub here.

    So let's implement a simple Sweet Alert in our android app.

    Step 1: Create a new Project

    1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)

    2. Choose "Empty Activity" from the project template window and click Next

    3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ) and minimum SDK(we are using API 19: Android 4.4 (KitKat))

    4. Next click on Finish button after filling the above details

    5. Now wait for the project to finish building.

    Step 2: Adding the Sweet Alert dependency

    To show the SweetAlert in our app we have to implement the SweetAlert in our app, to do so follow the below steps.

    Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top:

    dependencies {
     // Adding Sweet Alert Library
        implementation 'com.github.f0ris.sweetalert:library:1.6.2'
    }

    Step 3: Modify activity_main.xml

    Now go to app -> res -> layout -> activity_main.xml and add a LinearLayout with orientation vertical. and inside LinearLayout we add buttons for

    showing different types of alerts as shown below:

      <!-- Simple vertical Linear Layout  -->
        <LinearLayout
            android:orientation = "vertical"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content">
            
            <Button
                android:background = "#4CAF50"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " basic message "
                android:id = "@+id/btn1"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
            
            <Button
                android:background = "#9C27B0"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " title with a text under "
                android:id = "@+id/btn2"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:background = "#FF0000"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " error message "
                android:id = "@+id/btn3"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:background = "#FFC107"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " warning message "
                android:id = "@+id/btn4"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:background = "#2FE437"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " success message "
                android:id = "@+id/btn5"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:id = "@+id/btn6"
                android:background = "#009688"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "2dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " message with a custom icon "
                android:layout_width = "match_parent"
                android:layout_height = "56dp"/>
    
            <Button
                android:background = "#00F30A"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = "confirm button listener  "
                android:id = "@+id/btn7"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:background = "#FF2D1E"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = "cancel button listener "
                android:id = "@+id/btn8"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                   android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:id = "@+id/btn9"
                android:layout_width = "match_parent"
                android:layout_height = "56dp"
                android:background = "#673AB7"
                android:text = "Change dialog style on confirming"
                android:textColor = "#ffffff"
                android:textSize = "20dp"
                android:textStyle = "bold" />
    
        </LinearLayout>

    Complete code of activity_main.xml is shown below :

    <?xml version  =  "1.0" encoding  =   "utf-8" ?>
    <RelativeLayout
        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">
    
        <!-- Simple vertical Linear Layout  -->
        <LinearLayout
            android:orientation = "vertical"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content">
            
            <Button
                android:background = "#4CAF50"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " basic message "
                android:id = "@+id/btn1"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
            
            <Button
                android:background = "#9C27B0"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " title with a text under "
                android:id = "@+id/btn2"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:background = "#FF0000"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " error message "
                android:id = "@+id/btn3"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:background = "#FFC107"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " warning message "
                android:id = "@+id/btn4"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:background = "#2FE437"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " success message "
                android:id = "@+id/btn5"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:id = "@+id/btn6"
                android:background = "#009688"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "2dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = " message with a custom icon "
                android:layout_width = "match_parent"
                android:layout_height = "56dp"/>
    
            <Button
                android:background = "#00F30A"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = "confirm button listener  "
                android:id = "@+id/btn7"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                android:background = "#FF2D1E"
                android:textColor = "#ffffff"
                android:textStyle = "bold"
               android:textSize = "20dp"
                android:padding = "8dp"
                     android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:text = "cancel button listener "
                android:id = "@+id/btn8"
                android:layout_width = "match_parent"
                android:layout_height = "48dp"/>
    
            <Button
                   android:layout_marginTop = "20dp"
                android:layout_marginRight = "40dp"
                android:layout_marginLeft = "40dp"
                android:id = "@+id/btn9"
                android:layout_width = "match_parent"
                android:layout_height = "56dp"
                android:background = "#673AB7"
                android:text = "Change dialog style on confirming"
                android:textColor = "#ffffff"
                android:textSize = "20dp"
                android:textStyle = "bold" />
    
        </LinearLayout>
    
    </RelativeLayout>

    Step 4: MainActivity.java file

    Now open the MainActivity.java file and import some basic classes as shown below:

    //importing required classes
    import android.view.View ;
    import android.widget.Button ;
    import android.widget.Toast ;
    import cn.pedant.SweetAlert.SweetAlertDialog ;

    Next we create the objects of Button inside MainActivity class as shown below

    // creating object of  Button class
    Button button1, button2,button3, button4,button5, button6,button7, button8,button9;
    

    Next we create different methods or functions for different styles and toes of alerts as shown below

    public void BasicMessage() {
    	new SweetAlertDialog(this).setTitleText("Here's a message!").show();
    }
    
    public void titleWithText() {
    	new SweetAlertDialog(this).setTitleText("Here's a message!").setContentText("It's pretty, isn't it?").show();
    }
    
    public void errorMessage() {
    	new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE).setTitleText("Oops...").setContentText("Something went wrong!").show();
    }
    
    public void warningMessage() {
    	new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?").setContentText("Won't be able to recover this file!").setConfirmText("Yes,delete it!").show();
    }
    
    public void successMessage() {
    	new SweetAlertDialog(this, SweetAlertDialog.SUCCESS_TYPE).setTitleText("Good job!").setContentText("You clicked the button!").show();
    
    }
    
    public void withCustomIcon() {
    	new SweetAlertDialog(this, SweetAlertDialog.CUSTOM_IMAGE_TYPE).setTitleText("Sweet!").setContentText("Here's a custom image.").setCustomImage(R.drawable.ic_launcher_foreground).show();
    
    }
    
    public void withConfirmButton() {
    	new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?").setContentText("Won't be able to recover this file!").setConfirmText("Yes,delete it!").setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {@Override
    		public void onClick(SweetAlertDialog sDialog) {
    			// Showing simple toast message to user
    			Toast.makeText(MainActivity.this, " You Clicked me ", Toast.LENGTH_SHORT).show();
    
    			sDialog.dismissWithAnimation();
    		}
    	}).show();
    }
    
    public void withCancelButtonListener() {
    	new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?").setContentText("Won't be able to recover this file!").setCancelText("No,cancel plx!").setConfirmText("Yes,delete it!").showCancelButton(true).setCancelClickListener(new SweetAlertDialog.OnSweetClickListener() {@Override
    		public void onClick(SweetAlertDialog sDialog) {
    			// Showing simple toast message to user
    			Toast.makeText(MainActivity.this, " You clicked Cancel ", Toast.LENGTH_SHORT).show();
    			sDialog.cancel();
    		}
    	}).show();
    }
    
    public void changeOnConfirm() {
    
    	new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?").setContentText("Won't be able to recover this file!").setConfirmText("Yes,delete it!").setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {@Override
    		public void onClick(SweetAlertDialog sDialog) {
    			sDialog.setTitleText("Deleted!").setContentText("Your imaginary file has been deleted!").setConfirmText("OK").setConfirmClickListener(null).changeAlertType(SweetAlertDialog.SUCCESS_TYPE);
    		}
    	}).show();
    
    }

    Now inside the onCreate method we initialize the Button and add the OnClick Listener and call the respective method inside onClick

    // initializing the Buttons
    button1 = (Button) findViewById(R.id.btn1);
    button2 = (Button) findViewById(R.id.btn2);
    button3 = (Button) findViewById(R.id.btn3);
    button4 = (Button) findViewById(R.id.btn4);
    button5 = (Button) findViewById(R.id.btn5);
    button6 = (Button) findViewById(R.id.btn6);
    button7 = (Button) findViewById(R.id.btn7);
    button8 = (Button) findViewById(R.id.btn8);
    button9 = (Button) findViewById(R.id.btn9);
    
    button1.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		BasicMessage();
    	}
    });
    
    button2.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		titleWithText();
    	}
    });
    
    button3.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		errorMessage();
    	}
    });
    
    button4.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		warningMessage();
    	}
    });
    
    button5.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		successMessage();
    	}
    });
    
    button6.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		withCustomIcon();
    	}
    });
    
    button7.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		withConfirmButton();
    	}
    });
    
    button8.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		withCancelButtonListener();
    	}
    });
    
    button9.setOnClickListener(new View.OnClickListener() {@Override
    	public void onClick(View view) {
    		changeOnConfirm();
    	}
    });

    The complete code of the MainActivity.java is shown below:

    package com.studytonight.project;
    
    import android.os.Bundle;
    import androidx.appcompat.app.AppCompatActivity;
    
    //importing required classes
    import android.view.View;
    import android.widget.Button;
    import android.widget.Toast;
    import cn.pedant.SweetAlert.SweetAlertDialog;
    
    public class MainActivity extends AppCompatActivity {
    
    	// creating object of  Button class
    	Button button1,
    	button2,
    	button3,
    	button4,
    	button5,
    	button6,
    	button7,
    	button8,
    	button9;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		// initializing the Buttons
    		button1 = (Button) findViewById(R.id.btn1);
    		button2 = (Button) findViewById(R.id.btn2);
    		button3 = (Button) findViewById(R.id.btn3);
    		button4 = (Button) findViewById(R.id.btn4);
    		button5 = (Button) findViewById(R.id.btn5);
    		button6 = (Button) findViewById(R.id.btn6);
    		button7 = (Button) findViewById(R.id.btn7);
    		button8 = (Button) findViewById(R.id.btn8);
    		button9 = (Button) findViewById(R.id.btn9);
    
    		button1.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				BasicMessage();
    			}
    		});
    
    		button2.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				titleWithText();
    			}
    		});
    
    		button3.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				errorMessage();
    			}
    		});
    
    		button4.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				warningMessage();
    			}
    		});
    
    		button5.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				successMessage();
    			}
    		});
    
    		button6.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				withCustomIcon();
    			}
    		});
    
    		button7.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				withConfirmButton();
    			}
    		});
    
    		button8.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				withCancelButtonListener();
    			}
    		});
    
    		button9.setOnClickListener(new View.OnClickListener() {@Override
    			public void onClick(View view) {
    				changeOnConfirm();
    			}
    		});
    
    	}
    
    	public void BasicMessage() {
    		new SweetAlertDialog(this).setTitleText("Here's a message!").show();
    	}
    
    	public void titleWithText() {
    		new SweetAlertDialog(this).setTitleText("Here's a message!").setContentText("It's pretty, isn't it?").show();
    	}
    
    	public void errorMessage() {
    		new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE).setTitleText("Oops...").setContentText("Something went wrong!").show();
    	}
    
    	public void warningMessage() {
    		new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?").setContentText("Won't be able to recover this file!").setConfirmText("Yes,delete it!").show();
    	}
    
    	public void successMessage() {
    		new SweetAlertDialog(this, SweetAlertDialog.SUCCESS_TYPE).setTitleText("Good job!").setContentText("You clicked the button!").show();
    
    	}
    
    	public void withCustomIcon() {
    		new SweetAlertDialog(this, SweetAlertDialog.CUSTOM_IMAGE_TYPE).setTitleText("Sweet!").setContentText("Here's a custom image.").setCustomImage(R.drawable.ic_launcher_foreground).show();
    
    	}
    
    	public void withConfirmButton() {
    		new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?").setContentText("Won't be able to recover this file!").setConfirmText("Yes,delete it!").setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {@Override
    			public void onClick(SweetAlertDialog sDialog) {
    				// Showing simple toast message to user
    				Toast.makeText(MainActivity.this, " You Clicked me ", Toast.LENGTH_SHORT).show();
    
    				sDialog.dismissWithAnimation();
    			}
    		}).show();
    	}
    
    	public void withCancelButtonListener() {
    		new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?").setContentText("Won't be able to recover this file!").setCancelText("No,cancel plx!").setConfirmText("Yes,delete it!").showCancelButton(true).setCancelClickListener(new SweetAlertDialog.OnSweetClickListener() {@Override
    			public void onClick(SweetAlertDialog sDialog) {
    				// Showing simple toast message to user
    				Toast.makeText(MainActivity.this, " You clicked Cancel ", Toast.LENGTH_SHORT).show();
    				sDialog.cancel();
    			}
    		}).show();
    	}
    
    	public void changeOnConfirm() {
    
    		new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE).setTitleText("Are you sure?").setContentText("Won't be able to recover this file!").setConfirmText("Yes,delete it!").setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() {@Override
    			public void onClick(SweetAlertDialog sDialog) {
    				sDialog.setTitleText("Deleted!").setContentText("Your imaginary file has been deleted!").setConfirmText("OK").setConfirmClickListener(null).changeAlertType(SweetAlertDialog.SUCCESS_TYPE);
    			}
    		}).show();
    
    	}
    
    }

    Output:

    In the below snapshots , you can see how Sweet Alert will look in the android application.

    When App is opened for the first time:

    Alert Dialog Using SweetAlert Dialog in Android App

    Basic Message:

    Alert Dialog Using SweetAlert Dialog in Android App

    Title with a sub-title text:

    Alert Dialog Using SweetAlert Dialog in Android App

    Error Message:

    Alert Dialog Using SweetAlert Dialog in Android App

    Warning Message:

    Alert Dialog Using SweetAlert Dialog in Android App

    Success Message:

    Alert Dialog Using SweetAlert Dialog in Android App

    Message with icon:

    Alert Dialog Using SweetAlert Dialog in Android App

    With Confirm Button Listener:

    Alert Dialog Using SweetAlert Dialog in Android App

    Cancel Button Listener:

    Alert Dialog Using SweetAlert Dialog in Android App

    Change UI On Click:

    Alert Dialog Using SweetAlert Dialog in Android App

    Conclusion:

    In just 4 simple steps we have integrated and shown you the basic example for creating an Alert using Sweet Alert in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

    You may also like:

    About the author:
    K S Lohan is an accomplished author and expert in technical writing on Android language and develop android App. He is highly skilled at communicating complex programming concepts in a clear and concise manner.
    Tags:AndroidAlert DialogSweet AlertHow To
    IF YOU LIKE IT, THEN SHARE IT
     

    RELATED POSTS