Flashbar

A highly customizable, powerful and easy-to-use alerting library for Android.

Specs

This library allows you to show messages or alerts in your app quickly and easily. It can be used as an alternative to Snackbar or Toast and offers a plethora of useful features and customization options for you to play with.

It has been written 100% in Kotlin. ❤️

Table of Contents

• Download
• Sample Project
• Usage
  • Basics
  • Gravity
  • Title
  • Message
  • Background & Overlay
    • Background
    • Overlay
  • Actions
    • Primary
    • Positive/Negative
  • Icon & Progress
    • Icon
    • Progress
  • Animations
    • Enter/Exit
    • Icon
  • Event Listeners
    • Show
    • Dismiss
    • Taps
  • Miscellaneous
    • Swipe-to-dismiss
    • Shadow
    • Vibration
• Roadmap
• Contribution
• License

Spread Some :heart:

Download

This library is available in jCenter which is the default Maven repository used in Android Studio. You can also import this library from source as a module.

dependencies {
    // other dependencies here
    implementation 'com.andrognito.flashbar:flashbar:{latest_version}'
}

Sample Project

We have an exhaustive sample project demonstrating almost every feature of the library in both languages - Java & Kotlin.

Checkout the Java samples here and the Kotlin samples here.

Usage

It is recommended to check the sample project to get a complete understanding of all the features offered by the library.

The library offers a huge amount of customization options and leverages the Builder pattern for ease of use. You will find details of each of these features described below.

Basics

Flashbar attaches a full-height, full-width view (FlashbarContainerView) to the decor view of the Activity and places a full width, dynamic height view(FlashbarView) inside it. These classes are internal classes and are not exposed for public use.

Here's an example of showing a basic flashbar,

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.BOTTOM)
        .message("This is a basic flashbar")
        .build()

You can specify the duration (in millis) for which you want the flashbar to be displayed. The default duration is infinite, i.e. it won't dismiss automatically if you do not specify any duration. You can also use these constants, DURATION_SHORT or DURATION_LONG for convenience.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .duration(500)
        .message("This is a flashbar with duration")
        .build()

Gravity

You can show the flashbar either at the top or at the bottom of the screen using the gravity property. By default, it is shown at the bottom.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .message("Flashbar is shown at the top")
        .build()

Or,

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.BOTTOM)
        .message("Flashbar is shown at the bottom")
        .build()

Title

You can show an optional title in the flashbar. You can also customize the color, size, typeface and appearance of it.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.BOTTOM)
        .title("Hello World!")
        .build();

You can change the color using titleColor(), size using titleSizeInSp(), titleSizeInPx(), typeface using titleTypeface() and appearance using titleAppearance(). Also, look out for other variants of this methods.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.BOTTOM)
        .title("Hello World!")
        .titleColorRes(R.color.white)
        .titleSizeInSp(12f)
        .titleAppearance(R.style.CustomTextStyle)
        .titleTypeface(Typeface.createFromAsset(getAssets(), "ShineBright.ttf"))
        .build();

Message

You can show an optional message in the flashbar. You can also customize the color, size and appearance of it.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.BOTTOM)
        .message("This is a short message. But your message can be of any length and the view will dynamically adjust itself.")
        .build();

You can change the color using messageColor(), size using messageSizeInSp(), messageSizeInPx(), typeface using messageTypeface() and appearance using messageAppearance(). Also, look out for other variants of this methods.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .message("This is a short message")
        .messageColor(ContextCompat.getColor(this, R.color.white))
        .messageSizeInSp(16f)
        .messageTypeface(Typeface.createFromAsset(assets, "BeautifulAndOpenHearted.ttf"))
        .build()

Background & Overlay

You can change the background color of the flashbar and add a modal overlay as well.

Background

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .title("Hello World!")
        .message("The background color can be changed to any color of your choice.")
        .backgroundColorRes(R.color.colorPrimaryDark)
        .build()

You can also change the background using drawables, like the above, to have a cool gradient effect.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .title("Hello World!")
        .message("You can have gradients by setting background drawable.")
        .backgroundDrawable(R.drawable.bg_gradient)
        .build()

Overlay

The overlay creates a dim effect over the entire screen bringing more focus on the flashbar and its content. It is automatically added/removed along with the flashbar.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .title("Hello World!")
        .message("You can show a modal overlay to give a dim effect in the entire screen.")
        .backgroundColorRes(R.color.colorPrimaryDark)
        .showOverlay()
        .build()

You can also customize the overlay color using overlayColor() and also make the overlay block any click/touch events using overlayBlockable().

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .title("Hello World!")
        .message("You can show a modal overlay to give a dim effect in the entire screen.")
        .backgroundColorRes(R.color.colorPrimaryDark)
        .showOverlay()
        .overlayColorRes(R.color.modal)
        .overlayBlockable()
        .build()

Actions

There are three types of action buttons available - primary (placed at the right side), positive and negative (placed at the bottom).

Primary

You can customize the primary action button's text color, size, typeface, appearance and also listen to its tap events.

The quickest way to show an action button is to put some text into it.

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .title("Hello World!")
        .message("You can click on the primary action button.")
        .primaryActionText("TRY NOW")
        .build()

You can also customize its appearance in a lot of ways,

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .title("Hello World!")
        .backgroundColorRes(R.color.colorPrimaryDark)
        .message("You can click on the primary action button.")
        .primaryActionText("TRY")
        .primaryActionTextColorRes(R.color.colorAccent)
        .primaryActionTextSizeInSp(20f)
        .build()

You can also listen to its tap/click events through the OnActionTapListener,

Flashbar.Builder(this)
        .gravity(Flashbar.Gravity.TOP)
        .title("Hello World!")
        .message("You can click on the primary action button.")
        .primaryActionText("TRY")
        .primaryActionTapListener(object : Flashbar.OnActionTapListener {
            override fun onActionTapped(bar: Flashbar) {
                bar.dismiss()
            }
        })
        .build()

Positive/Negative

You ca