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
-
Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)
-
Choose "Empty Activity" from the project template window and click Next
-
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))
-
Next click on Finish button after filling the above details
-
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:
Basic Message:
Title with a sub-title text:
Error Message:
Warning Message:
Success Message:
Message with icon:
With Confirm Button Listener:
Cancel Button Listener:
Change UI On Click:
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:
