Banners

Banners displays an important message which requires an action to be dismissed.

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

On this page

Specifications references
Accessibility
Implementation
- Jetpack Compose
  - OdsBanner API
- XML

Specifications references

Accessibility

Please follow accessibility criteria for development.

OdsBanner is built to support accessibility criteria and is readable by most screen readers, such as TalkBack. The use of an OdsBanner.Image force the developer to associate a content description to the banner image.

Implementation

Banner light

Banner dark

Jetpack Compose

You can use the OdsBanner composable like this:

OdsBanner(
    message = "Message displayed into the banner.",
    firstButton = OdsBanner.Button("Dismiss") { doSomething() },
    secondButton = OdsBanner.Button("Detail") { doSomething() },
    image = OdsBanner.Image(painterResource(id = R.drawable.placeholder), "")
)

OdsBanner API

Parameter	Default value	Description
`message: String`		Text displayed into the banner
`modifier: Modifier`	`Modifier`	`Modifier` applied to the banner
`image: OdsBanner.Image?`	`null`	Image displayed in the banner in a circle shape
`firstButton: OdsBanner.Button?`	`null`	Primary button displayed in the banner
`secondButton: OdsBanner.Button?`	`null`	Secondary button displayed into the banner next to the primary one

XML

In your layout, use the OdsBanner view as shown below:

<com.orange.ods.xml.component.banner.OdsBanner
    android:id="@+id/ods_banner"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:message="Message displayed into the banner."
    app:firstButtonText="Dismiss"
    app:secondButtonText="Detail"
    app:image="@drawable/placeholder"
    app:imageContentDescription="Banner image" />