Skip to content

Banner Messages

A banner displays a prominent message and related optional actions.

Anatomy

A banner consists of an optional image, up to three lines of text, and either one or two buttons.

Banner Anatomy

Usage

A banner appears by sliding in from the top of the layout and exits by sliding out the top. There should only be one instance of a banner per layout at any time. Banners are persistent and non-modal, allowing the user to either ignore them or interact with them at any time.

Construction

A banner can be created by the constructor in code:

Banner banner = new Banner(getContext());

A banner can also be created by declaring a Banner element in XML like this:

<com.sap.cloud.mobile.fiori.banner.Banner
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:bannerDetailImage="@drawable/ic_error_black_24dp"
    app:bannerDetailImageDescription="@string/banner_image_desc"
    app:message="@string/banner_message"
    app:messageTextAppearance="@style/TextAppearance.Body"
    app:confirmButtonText="@string/banner_confirm_button"
    app:dismissButtonText="@string/banner_dismiss_button"
    app:bannerButtonTextAppearance="@style/Button.Flat"
    app:bannerButtonBackground="@drawable/button_bg"
    app:bannerLines="3"
    app:bannerSeparatorEnabled="true"
    app:bannerSeparatorColor="@color/gray">

</com.sap.cloud.mobile.fiori.banner.Banner>

The above XML declaration creates a Banner with the following attributes:

  • app:bannerDetailImage – The image to display.
  • app:bannerDetailImageDescription – A description of the image (to support accessibility).
  • app:message – The main message to display.
  • app:messageTextAppearance – The properties of the main message text.
  • app:confirmButtonText – The text on the right-hand button (in left-to-right locales).
  • app:dismissButtonText – The text on the left-hand button (in left-to-right locales).
  • app:bannerButtonTextAppearance – The properties of the text on the button(s).
  • app:bannerButtonBackground – The properties of the background on the button(s).
  • app:bannerLines="3" – The message displays up to three lines.
  • app:bannerSeparatorEnabled="true" – Display the separator line at the bottom of the banner.
  • app:bannerSeparatorColor – The color of the separator.

Fields

Image

An image acts as an optional supporting illustration to supplement the banner message. If an image is not provided, more horizontal space is available to the message.

banner.setDetailImage(R.drawable.image);
banner.setDetailImageDescription(R.string.imageDesc);

Message

The message displays important and concise information. The message can be up to a maximum of three lines on a mobile device and two lines on a tablet.

banner.setHeadline(R.string.messageText);

It is highly recommended to stay within the intended maximum number of lines for conciseness, but in the case that the text exceeds the maximum, the following behavior occurs:

The text will be truncated with an ellipsis (...) if the value passed into setHeadlineLines(int lines) is equal to the maximum. If the value is greater than the maximum, there will be no ellipsis, but the message text will still not display beyond the maximum line number. By default, there will be no ellipsis.

Confirm Button

The confirm button represents a confirming action (such as "Sign In" or "Update") related to the banner message. If the dismiss button is also displayed, the confirm button will appear to its right (in left-to-right locales). If no text is provided, the button will not be displayed.

banner.setConfirmButtonText(R.string.confirmText);

Dismiss Button

The dismiss button represents a dismissive action (such as "Continue as a Guest" or "Remind Me Later") related to the banner message. If the confirm button is also displayed, the dismiss button will appear to its left (in left-to-right locales). If no text is provided, the button will not be displayed.

banner.setDismissButtonText(R.string.dismissText);

Separator

The separator is a line at the bottom of the banner that separates it from the rest of the layout. By default, the separator is colored gray and is visible. The color and visibility can be customized.

banner.setSeparatorColor(R.color.gray);
banner.setSeparatorEnabled(true);

Appearing/Dismissing

The animations for the banner appearing and being dismissed can be triggered as follows:

banner.show();
banner.dismiss();

The timing of when the animation begins and its speed can be customized:

banner.show(500, 1000); // 500ms animation duration, 1000ms delay
banner.dismiss(300, 0); // 300ms animation duration, no delay

Sticky Banners

The banner can push content downwards if they are on the same elevation, and they will scroll off the screen together:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.sap.cloud.mobile.fiori.banner.Banner
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.sap.cloud.mobile.fiori.banner.Banner>

    <!-- Rest of content goes here -->

</LinearLayout>

Alternatively, the banner can stay on the screen while the content scrolls beneath it:

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.sap.cloud.mobile.fiori.banner.Banner
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.sap.cloud.mobile.fiori.banner.Banner>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!-- Rest of content goes here -->

        </LinearLayout>
    </ScrollView>
</LinearLayout>

Last update: August 12, 2020