The Inline Notice

Overview

The InlineNotice component is a Fiori UI element designed to display an inline notice with an icon, a label, and an optional hyperlink. It is intended for use with certain FormCell components that display generated content.

Key Features

• Displays an icon and a label.
• Supports a clickable hyperlink with a callback.
• Fully accessible with Talk-Back and keyboard navigation.
• Dynamically adjusts to font size changes.

---

Usage

1. Add the Component to Your Layout

To use the InlineNotice component, include it in your XML layout file:

<com.sap.cloud.mobile.fiori.misc.InlineNotice
    android:id="@+id/inlineNotice"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:icon="@drawable/ic_custom_icon"
    android:iconTint="@color/icon_tint"
    app:label="Your label text here"
    app:labelTextAppearance="@style/YourTextAppearance"
    app:labelTextColor="@color/label_color"
    app:hyperlink_label="Learn More"
    app:hyperlink_label_text_appearance="@style/YourHyperlinkTextAppearance"
    app:hyperlink_label_text_color="@color/hyperlink_color" />

2. Programmatically Configure the Component

You can also configure the InlineNotice programmatically in your activity or fragment:

val inlineNotice = findViewById<InlineNotice>(R.id.inlineNotice)

// Set the icon
inlineNotice.setIcon(R.drawable.ic_custom_icon)

// Set the label text
inlineNotice.setText("This is an inline notice.")

// Set the hyperlink text
inlineNotice.setHyperlinkText("Learn More")

// Set a click listener for the hyperlink
inlineNotice.setHyperlinkOnClick {
    // Handle hyperlink click
    Toast.makeText(this, "Hyperlink clicked!", Toast.LENGTH_SHORT).show()
}

Attributes

XML Attributes

Attribute	Description	Default Value
android:icon	Drawable resource for the icon.	Default icon
android:iconTint	Tint color for the icon.	Theme color sap_fiori_color_t2
app:label	Text for the label.	"Suggested by AI"
app:labelTextAppearance	Text appearance for the label.	TextAppearance_Fiori_Caption1
app:labelTextColor	Text color for the label.	Theme color sap_fiori_color_t2
app:hyperlink_label	Text for the hyperlink.	"Learn More"
app:hyperlink_label_text_appearance	Text appearance for the hyperlink.	TextAppearance_Fiori_Caption1
app:hyperlink_label_text_color	Text color for the hyperlink.	Theme color sap_fiori_color_t4

Accessibility

The InlineNotice component is designed with accessibility in mind:

• Talk-Back Support: The hyperlink is focusable and clickable with Talk-Back.
• Keyboard Navigation: The hyperlink can be navigated using the keyboard.
• Dynamic Font Scaling: Automatically adjusts to system font size changes.

Customization

Icon

• Use setIcon(resourceId: Int) to set a custom icon.
• Use setIconContentDescription(description: String) to provide an accessibility description.

Label

• Use setText(text: CharSequence) to set the label text.

Hyperlink

• Use setHyperlinkText(text: CharSequence) to set the hyperlink text.
• Use setHyperlinkOnClick(onClick: View.OnClickListener) to handle hyperlink clicks.

Notes

• Ensure that the InlineNotice component is added to a layout with sufficient space for the icon and label.
• The component automatically handles ripple effects for the hyperlink.

---

Last update: April 9, 2025