Implement Different Types of AlertBox using Alerter Library in Android

Last Updated : 06 Jun, 2021

In this article, we are going to implement a very important feature related to the AlertBox. Usually, we create an AlertBox to show some important content. Here we are going to learn how to implement that feature in our Android App using Alert Library. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency and JitPack Repository

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.

implementation 'com.tapadoo.android:alerter:2.0.4'

Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.

allprojects {

repositories {

...

maven { url "https://jitpack.io" }

}

}

After adding this dependency sync your project and now we will move towards its implementation.

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:keepScreenOn="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txt1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="Simple Alert "
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt2"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="with Background Color "
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt3"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="with Icon"
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt4"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="with On Screen Duration "
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt5"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="without Title "
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt6"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="with OnClickListener "
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt7"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="with Verbose Text"
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt8"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="with Swipe To Dismiss"
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt9"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="with Progress Bar"
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txt10"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:background="#fff"
        android:padding="8dp"
        android:text="with Visibility Callbacks"
        android:textColor="#000000"
        android:textSize="24dp"
        android:textStyle="bold" />
    
</LinearLayout>

Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.tapadoo.alerter.Alerter;
import com.tapadoo.alerter.OnHideAlertListener;
import com.tapadoo.alerter.OnShowAlertListener;

public class MainActivity extends AppCompatActivity {

    TextView txt1, txt2, txt3, txt4, txt5, txt6, txt7, txt8, txt9, txt10;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        txt1 = findViewById(R.id.txt1);
        txt2 = findViewById(R.id.txt2);
        txt3 = findViewById(R.id.txt3);
        txt4 = findViewById(R.id.txt4);
        txt5 = findViewById(R.id.txt5);
        txt6 = findViewById(R.id.txt6);
        txt7 = findViewById(R.id.txt7);
        txt8 = findViewById(R.id.txt8);
        txt9 = findViewById(R.id.txt9);
        txt10 = findViewById(R.id.txt10);
        
        // click on text to show alert
        txt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                simpleAlert();
            }
        });
        
        // click on text to show alert
        txt2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withBackgroundColor();
            }
        });
        
        // click on text to show alert
        txt3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withIcon();
            }
        });
        
        // click on text to show alert
        txt4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withOnScreenDuration();
            }
        });
        
        // click on text to show alert
        txt5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withoutTitle();
            }
        });
        
        // click on text to show alert
        txt6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withOnClickListener();
            }
        });
        
        // click on text to show alert
        txt7.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withVerboseText();
            }
        });
        
        // click on text to show alert
        txt8.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withSwipeToDismiss();
            }
        });
        
        // click on text to show alert
        txt9.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withProgressBar();
            }
        });
        
        // click on text to show alert
        txt10.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                withVisibilityCallbacks();
            }
        });
    }

    // show simple alert
    public void simpleAlert() {
        Alerter.create(MainActivity.this).setTitle("Geeks For Geeks")
                .setText("A portal for Computer Science Student").show();
    }

    // set background color using setBackgroundColorRes
    public void withBackgroundColor() {
        Alerter.create(this).setTitle("Geeks For Geeks")
                // or setBackgroundColorInt(Color.CYAN)
                .setText("A portal for Computer Science Student").setBackgroundColorRes(R.color.purple_200) 
                .show();
    }

    // without title
    public void withoutTitle() {
        Alerter.create(this)
                .setText("A portal for Computer Science Student").show();

    }
    
    public void withOnClickListener() {
        Alerter.create(this).setTitle("Geeks For Geeks")
                .setText("A portal for Computer Science Student").setDuration(10000).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // showing simple toast to user when clicked
                Toast.makeText(MainActivity.this, "You Clicked Me", Toast.LENGTH_LONG).show();
            }
        }).show();
    }

    public void withVerboseText() {
        Alerter.create(this).setTitle("Geeks For Geeks")
                .setText("A portal for Computer Science Student"
                        + "A portal for Computer Science Student" + "A portal for Computer Science Student").show();
    }

    // set icon using setIcon
    public void withIcon() {
        Alerter.create(this).setTitle("Geeks For Geeks")
                // Optional - Removes white tint
                .setText("A portal for Computer Science Student").setIcon(R.drawable.ic_launcher_foreground).setIconColorFilter(0) 
                .show();
    }

    // set screen duration using setDuration
    public void withOnScreenDuration() {
        Alerter.create(this).setTitle("Geeks For Geeks")
                // set the duration in milli seconds
                .setText("A portal for Computer Science Student").setDuration(10000) 
                .show();
    }

    // swipe toast to dismiss
    public void withSwipeToDismiss() {
        Alerter.create(this).setTitle("Geeks For Geeks")
                // enabled swipe to dismiss
                .setText("A portal for Computer Science Student").enableSwipeToDismiss() 
                .show();
    }

    // show progress bar
    public void withProgressBar() {
        Alerter.create(this).setTitle("Geeks For Geeks")
                // enables the progress
                .setText("A portal for Computer Science Student").enableProgress(true) 
                  // set color of the progress
                .setProgressColorRes(R.color.purple_200) 
                .show();
    }

    public void withVisibilityCallbacks() {
        Alerter.create(this).setTitle("Geeks For Geeks")
                .setText("A portal for Computer Science Student").setDuration(10000).setOnShowListener(new OnShowAlertListener() {
            @Override
            public void onShow() {
                // showing simple toast when it is shown
                Toast.makeText(MainActivity.this, "On Show ", Toast.LENGTH_SHORT).show();
            }
        }).setOnHideListener(new OnHideAlertListener() {
            @Override
            public void onHide() {
                // showing simple toast to user when  it is hidden
                Toast.makeText(MainActivity.this, "On Hide ", Toast.LENGTH_SHORT).show();

            }
        }).show();
    }
}