Illustrated Message¶
Illustrated message is a Compose component that can be used to display the state of the application, such as an error, an empty result, or a successful transaction, etc.
It can be added to a full screen or a container within an application. The following is an example of an illustrated message displayed inside a card:
The Anatomy of Illustrated Message¶
An illustrated message can be composed of an illustration (image), a message headline, a message description, and a call to action button.
The illustrated message supports two buttons in either a horizontal or vertical layout (the layout of the buttons is independent of the layout of the entire illustrated message).
The size of the illustration can range from XS (48 x 48 dp) to XL (320 x 240 dp) while the placement of the illustration can be either on top of the message or on the left side.
Text alignment (start and center) for headline and description is also supported.
How to Create an Illustrated Message¶
To create an illustrated message, simply call the FioriIllustratedMessage composable function:
/**
* The Composable function to draw an illustrated message for displaying different states in an app.
* @param: data, a [FioriIllustratedMessageData] object specifying how the illustrated message shall be displayed.
* @param: modifier, an optional modifier.
* @param: dimensions, a [FioriIllustratedMessageDimensions] object specifying the X x Y of the component in sp.
* @param: styles, a [FioriIllustratedMessageStyles] object specifying the styles of the component.
*/
@Composable
fun FioriIllustratedMessage(
data: FioriIllustratedMessageData,
modifier: Modifier = Modifier,
dimensions: FioriIllustratedMessageDimensions = FioriIllustratedMessageDefaults.dimensions(
illustrationSize = data.illustrationSize
),
styles: FioriIllustratedMessageStyles = FioriIllustratedMessageDefaults.styles()
) {
...
}
Supply the data with a FioriIllustratedMessageData object:
/**
* The data class for [FioriIllustratedMessage].
*
* @param placement, an enum for placement of the illustrated message, between VERTICAL and HORIZONTAL.
* @param illustrationSize, an enum for the size of the illustrated message.
* @param headline, a String for the headline of the illustrated message.
* @param image, an optional [FioriImage] for displaying an image inside the illustrated message component.
* @param description, an optional String for the description of the illustrated message.
* @param largeTextSize, a Boolean determining if using large text size, default is false.
* @param buttonContent, an optional [FioriButtonContent] for displaying an action button.
* @param buttonOnClick, an optional lambda function for the button click event.
* @param button2Content, support for additional button introduced in version 24.8, an optional [FioriButtonContent] for displaying an action button.
* @param isVerticalButtonLayout a Boolean determining if using vertical button layout, horizontal otherwise. Default is true.
* @param shouldDynamicLayout if true, the layout will adjust if font size is too big, number of characters is too long, or illustration
* image is too big. False otherwise.
*/
@Parcelize
data class FioriIllustratedMessageData (
val placement: IllustratedMessagePlacement = IllustratedMessagePlacement.VERTICAL,
val illustrationSize: IllustrationSize = IllustrationSize.S,
val headline: String,
val image: FioriImage? = null,
val description: String? = null,
val largeTextSize: Boolean = false,
val buttonContent: FioriButtonContent? = null,
var buttonOnClick: (() -> Unit)? = null,
val button2Content: FioriButtonContent? = null,
var button2OnClick: (() -> Unit)? = null,
val isVerticalButtonLayout: Boolean = true,
val contentAlignment: ContentAlignment = ContentAlignment.CENTER,
val shouldDynamicLayout: Boolean = true
): Parcelable
/**
* An enum for placement of the image vs text inside the illustrated message.
*/
enum class IllustratedMessagePlacement {
VERTICAL, HORIZONTAL
}
/**
* An enum for the alignment of the text and buttons inside the illustrated message.
*/
enum class ContentAlignment {
START,
CENTER
}
/**
* An enum for the size of the illustrated message display.
*/
enum class IllustrationSize {
XS, S, M, L, XL,
}
Examples of Illustrated Message¶
To review the different variations of illustrated message, expand the Settings from the bottom sheet inside the Illustrated Message demo from the demo application of the Android SDK.
For examples:
 |
 |
|---|---|
 |
 |
|---|---|