We have seen different ways to alert the user in many apps such as Wallpaper app (when the wallpaper is changed), Facebook (when we post something on the app), YouTube (when we upload a video), web browsers (when a file is downloading or the download is completed or when some error occurs in the app) etc. It is mainly used to show simple alerts to the user. An "alerter" will make the UI of your Android app more beautiful and interactive and also help the user to remember it for a long time.
What is Tapadoo Alerter ?
To show simple message in android app we have Android Toast and Snackbar but there are many usecases where we want some customization and this type of customizations are not possible with the Toast and Snackbar. So to do this we need an external library and Tapadoo Alerter is the library which is used to do this type of customizations in android studio apps. You can learn more about Tapadoo Alerter from GitHub here.
So let's implement a simple Tapadoo Alerter 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 Tapadoo Alerter dependency
To show the Alerter in our app we have to implement the Tapadoo Alerterin 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 Tapadoo Alerter Library
implementation 'com.tapadoo.android:alerter:2.0.4'
}
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 different alerts as shown below:
<!-- Simple vertical Linear Layout -->
<LinearLayout
android:layout_alignParentBottom = "true"
android:orientation = "vertical"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "Simple Alert "
android:id = "@+id/btn1"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "with Background Color "
android:id = "@+id/btn2"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "with Icon"
android:id = "@+id/btn3"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "with On Screen Duration "
android:id = "@+id/btn4"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "without Title "
android:id = "@+id/btn5"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "with OnClickListener "
android:id = "@+id/btn6"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:id = "@+id/btn7"
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "with Verbose Text"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "with Swipe To Dismiss"
android:id = "@+id/btn8"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "with Progress Bar"
android:id = "@+id/btn9"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
<Button
android:background = "@color/colorAccent"
android:textColor = "#ffffff"
android:textStyle = "bold"
android:textSize = "24dp"
android:padding = "8dp"
android:layout_margin = "10dp"
android:text = "with Visibility Callbacks"
android:id = "@+id/btn10"
android:layout_width = "match_parent"
android:layout_height = "48dp"/>
</LinearLayout>
As you can see in the code above, we have added 10 different buttons because we will add different behaviors to all these buttons. You don't need to add all the buttons, just keep the one you need. This is just for example purpose.
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 com.tapadoo.alerter.Alerter;
import com.tapadoo.alerter.OnHideAlertListener;
import com.tapadoo.alerter.OnShowAlertListener;
Next, we create the objects of Android Button inside MainActivity class as shown below
// creating object of Button class
Button btn1, btn2,btn3, btn4,btn5, btn6,btn7, btn8,btn9, btn10 ;
Now we create different methods for different alerts as shown below:
public void simpleAlert() {
Alerter.create(MainActivity.this).setTitle("Alert Title").setText("Alert text...").show();
}
public void withBackgroundColor() {
Alerter.create(this).setTitle("Alert Title").setText("Alert text...").setBackgroundColorRes(R.color.colorAccent) // or setBackgroundColorInt(Color.CYAN)
.show();
}
public void withIcon() {
Alerter.create(this).setText("Alert text...").setIcon(R.drawable.ic_launcher_foreground).setIconColorFilter(0) // Optional - Removes white tint
.show();
}
public void withOnScreenDuration() {
Alerter.create(this).setTitle("Alert Title").setText("Alert text...").setDuration(10000) //set the dration in milli seconsds
.show();
}
public void withoutTitle() {
Alerter.create(this).setText("Alert text...").show();
}
public void withOnClickListener() {
Alerter.create(this).setTitle("Alert Title").setText("Alert text...").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("Alert Title").setText("The alert scales to accommodate larger bodies of text. " + "The alert scales to accommodate larger bodies of text. " + "The alert scales to accommodate larger bodies of text.").show();
}
public void withSwipeToDismiss() {
Alerter.create(this).setTitle("Alert Title").setText("Alert text...").enableSwipeToDismiss() // enabled swip to dismiss
.show();
}
public void withProgressBar() {
Alerter.create(this).setTitle("Alert Title").setText("Alert text...").enableProgress(true) // enables the progress
.setProgressColorRes(R.color.colorAccent) //set color of the progress
.show();
}
public void withVisibilityCallbacks() {
Alerter.create(this).setTitle("Alert Title").setText("Alert text...").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();
}
Now inside the onCreate() method, we initialize the Button and add the OnClick Listener and call the respective method inside onClick():
// initializing the Buttons
btn1 = (Button) findViewById(R.id.btn1);
btn2 = (Button) findViewById(R.id.btn2);
btn3 = (Button) findViewById(R.id.btn3);
btn4 = (Button) findViewById(R.id.btn4);
btn5 = (Button) findViewById(R.id.btn5);
btn6 = (Button) findViewById(R.id.btn6);
btn7 = (Button) findViewById(R.id.btn7);
btn8 = (Button) findViewById(R.id.btn8);
btn9 = (Button) findViewById(R.id.btn9);
btn10 = (Button) findViewById(R.id.btn10);
btn1.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
simpleAlert();
}
});
btn2.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withBackgroundColor();
}
});
btn3.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withIcon();
}
});
btn4.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withOnScreenDuration();
}
});
btn5.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withoutTitle();
}
});
btn6.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withOnClickListener();
}
});
btn7.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withVerboseText();
}
});
btn8.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withSwipeToDismiss();
}
});
btn9.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withProgressBar();
}
});
btn10.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
withVisibilityCallbacks();
}
});
Once you have added all the above code in your Main activity, then we are ready to run our app.
Output:
In the below snapshots, you can see how the Tapadoo Alerter will look in the android application.
Simple Alert:
With background color:
With icon:
With On-Screen duration:
Without Title:
With OnClickListener:
With Verbose Text:
With Swipe To Dismiss:
With Progress Bar:
With Visibility Callback Show:
Conclusion:
In just 4 simple steps we have integrated and shown you the basic example for creating an Alert using Tapadoo Alerter 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:
