How to Create AlertDialog Box Using SweetAlert Dialog Library
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.
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.
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.
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 differnt style of Alert Dialog Box.
<?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.
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;
}
}
}
Resource: https://www.geeksforgeeks.org/how-to-create-alertdialog-box-using-sweetalert-dialog-library/?ref=rp
No comments:
Post a Comment