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 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(); }} |
Output:
