New Tutorials:   NUMPY    TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
CLOSE
   Android  Alert Dialog  Sweet Alert  
   Technology    Programming

Alert Dialog Using SweetAlert Dialog in Android App

         
  DECEMBER 29, 2020   by onlyklohan

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.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.