DEV Community

Cover image for Displaying Animated In Android Alerts with alerter.
Eddie Gulay
Eddie Gulay

Posted on

Displaying Animated In Android Alerts with alerter.

Alerter 🔔

Alerter is an open-source Android alerting library developed by Tapadoo source: https://github.com/Tapadoo/Alerter. that provides a flexible and customizable way to create alerts in your Android applications. It offers a wide range of features, such as custom layouts, animations, durations, and more.
I just discovered it and now i am creating this guide that will also take you a step-by-step tutorial on how to use the Alerter library to create engaging and informative alerts for your users.

Step 1: Adding the Dependency

To use the Alerter library in your Android project, you need to add the dependency to your app-level build.gradle file. Here's how you can do it:

  1. Open your app-level build.gradle file. (Module:app)
  2. In the dependencies block, add the following line:
implementation "com.tapadoo.android:alerter:3.0.0"
Enter fullscreen mode Exit fullscreen mode

This will add the latest version of the Alerter library to your project. Make sure to sync your project with the Gradle files after adding the dependency.

Step 2: Initializing Alerter

Nothing fancy just straight up class use

Alerter.< ... >
Enter fullscreen mode Exit fullscreen mode

That is the basic template that you will use.

Step 3: Creating Basic Alerts

Now, let's create some basic alerts using Alerter. You can create alerts with or without a title, customize the duration, and add text to the alert. Here are some examples:

Without Title:

Alerter.create(this@YourActivity)
    .setText("This is an alert without a title!")
    .show()
Enter fullscreen mode Exit fullscreen mode

With Title:

Alerter.create(this@YourActivity)
    .setTitle("Alert Title")
    .setText("This alert has a title and some text.")
    .show()
Enter fullscreen mode Exit fullscreen mode

Custom Duration:

You can set the duration for which the alert should be displayed using the setDuration method:

Alerter.create(this@YourActivity)
    .setTitle("Alert Title")
    .setText("This alert will be shown for 5 seconds.")
    .setDuration(5000) // Duration in milliseconds
    .show()
Enter fullscreen mode Exit fullscreen mode

Step 4: Adding Click Listeners

You can add click listeners to your alerts to perform actions when the alert is clicked. Here's how you can do it:

Alerter.create(this@YourActivity)
    .setTitle("Alert Title")
    .setText("Click me!")
    .setOnClickListener {
        Toast.makeText(this@YourActivity, "Alert clicked!", Toast.LENGTH_SHORT).show()
    }
    .show()
Enter fullscreen mode Exit fullscreen mode

In this example, a toast message will be displayed when the alert is clicked.

Step 5: Customizing Alert Appearance

Alerter provides a variety of options to customize the appearance of your alerts, including custom fonts, text appearance, and background color. Here are some examples:

Custom Fonts:

You can set custom fonts for the title and text of the alert:

Alerter.create(this@YourActivity)
    .setTitle("Custom Font Title")
    .setTitleTypeface(Typeface.createFromAsset(assets, "your_font.ttf"))
    .setText("Custom font text.")
    .setTextTypeface(Typeface.createFromAsset(assets, "your_font.ttf"))
    .show()
Enter fullscreen mode Exit fullscreen mode

Custom Text Appearance:

You can customize the appearance of the title and text using text appearance styles:

Alerter.create(this@YourActivity)
    .setTitle("Styled Title")
    .setTitleAppearance(R.style.YourTitleStyle)
    .setText("Styled text.")
    .setTextAppearance(R.style.YourTextStyle)
    .show()
Enter fullscreen mode Exit fullscreen mode

Custom Background Color:

You can set a custom background color for the alert:

Alerter.create(this@YourActivity)
    .setTitle("Colored Alert")
    .setBackgroundColorRes(R.color.your_color)
    .show()
Enter fullscreen mode Exit fullscreen mode

Step 6: Using Custom Layouts

Alerter allows you to use custom layouts for your alerts. This gives you complete control over the appearance and content of the alert. Here's how you can use a custom layout:

  1. Create a new layout file for your custom alert (e.g., custom_alert_layout.xml).
  2. Design your layout as per your requirements.
  3. Use the custom layout when creating the alert:
Alerter.create(this@YourActivity, R.layout.custom_alert_layout)
    .show()
Enter fullscreen mode Exit fullscreen mode

You can access views within your custom layout using the getLayoutContainer() method:

val textView = alerter.getLayoutContainer()?.findViewById<TextView>(R.id.textView)
textView?.text = "Custom text"
Enter fullscreen mode Exit fullscreen mode

Step 7: Adding Buttons to Alerts

You can add buttons to your alerts to provide users with options or actions. Here's how you can add buttons:

Alerter.create(this@YourActivity)
    .setTitle("Alert with Buttons")
    .setText("Click a button.")
    .addButton("Okay", R.style.ButtonStyle) {
        Toast.makeText(this@YourActivity, "Okay clicked!", Toast.LENGTH_SHORT).show()
    }
    .addButton("Cancel", R.style.ButtonStyle) {
        Toast.makeText(this@YourActivity, "Cancel clicked!", Toast.LENGTH_SHORT).show()
    }
    .show()
Enter fullscreen mode Exit fullscreen mode

In this example, two buttons ("Okay" and "Cancel") are added to the alert, and click listeners are set for each button to display a toast message.

Step 8: Using Progress Bar

You can display a progress bar within your alerts to indicate ongoing processes. Here's how you can enable the progress bar:

Alerter.create(this@YourActivity)
    .setTitle("Progress Alert")
    .setText("Please wait...")
    .enableProgress(true)
    .setProgressColorRes(R.color.progress_bar_color)
    .show()
Enter fullscreen mode Exit fullscreen mode

You can customize the progress bar color using the setProgressColorRes method.

Step 9: Custom Enter/Exit Animations

Alerter allows you to set custom enter and exit animations for your alerts. You can use built-in animations or create your own. Here's how you can set custom animations:

Alerter.create(this@YourActivity)
    .setTitle("Animated Alert")
    .setText("This alert has custom animations.")
    .setEnterAnimation(R.anim.your_enter_animation)
    .setExitAnimation(R.anim.your_exit_animation)
    .show()
Enter fullscreen mode Exit fullscreen mode

Replace your_enter_animation and your_exit_animation with your custom animation resources.

Step 10: Visibility Callbacks

You can receive callbacks when the alert is shown or hidden using the setOnShowListener and setOnHideListener methods:

Alerter.create(this@YourActivity)
    .setTitle("Visibility Callbacks")
    .setText("I will notify when shown or hidden.")
    .setOnShowListener {
        Toast.makeText(this@YourActivity, "Alert shown!", Toast.LENGTH_SHORT).show()
    }
    .setOnHideListener {
        Toast.makeText(this@YourActivity, "Alert hidden!", Toast.LENGTH_SHORT).show()
    }
    .show()
Enter fullscreen mode Exit fullscreen mode

Hope this is helpful. Read more about alerter from github source
https://github.com/Tapadoo/Alerter

Top comments (0)