Tuesday, July 28, 2020

Material design banner displays a prominent message in android

Material Banner is a library that provides an implementation of the banner widget from the Material design
Usage
A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.
Banners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.
Material design banner displays a prominent message in android

Setup
Add the gradle dependency
implementation "com.sergivonavi:materialbanner:1.2.0"
In your layout.xml:
<com.sergivonavi.materialbanner.Banner
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone" // don't hide if you want to show this banner everytime
    app:buttonLeftText="Dismiss"
    app:buttonRightText="Turn on wifi"
    app:icon="@drawable/ic_signal_wifi_off_40dp"
    app:messageText="You have lost connection to the Internet." />
then in your Activity/Fragment:
Banner banner = findViewById(R.id.banner);
banner.setLeftButtonListener(new BannerInterface.OnClickListener() {
    @Override
    public void onClick(BannerInterface banner) {
        // do something
    }
});
banner.setRightButtonListener(new BannerInterface.OnClickListener() {
    @Override
    public void onClick(BannerInterface banner) {
        // do something
    }
});
// show when needed
banner.show();
// and later on
banner.dismiss();
From the code using Builder:
Banner banner = new Banner.Builder(context).setParent(rootView)
    .setIcon(R.drawable.ic_signal_wifi_off_40dp)
    .setMessage("You have lost connection to the Internet. This app is offline.")
    .setLeftButton("Dismiss", new BannerInterface.OnClickListener() {
        @Override
        public void onClick(BannerInterface banner) {
            banner.dismiss();
        }
    })
    .setRightButton("Turn on wifi", new BannerInterface.OnClickListener() {
        @Override
        public void onClick(BannerInterface banner) {
            // do something
        }
    })
    .create(); // or show() if you want to show the Banner immediately
    banner.show();
Additional setup
Add listeners
If you want to know when your banner was shown or dismissed you can set appropriate listeners from BannerInterface:
banner.setOnDismissListener(new BannerInterface.OnDismissListener() {
    @Override
    public void onDismiss() {
        // do something
    }
})
banner.setOnShowListener(new BannerInterface.OnShowListener() {
    @Override
    public void onShow() {
        // do something
    }
})
Or chain these calls to the Builder:

new Banner.Builder(context)
    ...
    .setOnDismissListener(new BannerInterface.OnDismissListener() {
        @Override
        public void onDismiss() {
            // do something
        }
    })
    .setOnShowListener(new BannerInterface.OnShowListener() {
        @Override
        public void onShow() {
            // do something
        }
    })

No comments:

Post a Comment