Section Header Footer¶
The Section Header Footer is designed to display a section header or footer with optional text and buttons. It provides flexibility in layout and styling, making it suitable for various sectional use cases in your Compose UI.
Anatomy¶
The header text is positioned at the start of the container, and the optional primary button (text button) is placed at the end. You can also swap the positions of the text and the button if required.
Usage¶
The Section Header Footer can be implemented with the SectionHeaderFooter
view provided by the SDK.
Construction¶
A Section Header Footer can be created either by using the constructor in code or by declaring a SectionHeaderFooter
element in XML, as shown below:
<com.sap.cloud.mobile.fiori.section.SectionHeaderFooter
android:id="@+id/section_header_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
A Section Header Footer may also be customized in XML using its attributes:
<com.sap.cloud.mobile.fiori.section.SectionHeaderFooter
android:id="@+id/section_header_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:headerText="Vacation Request"
app:showPrimaryButton="true"
app:showSecondaryButton="true"
app:primaryButtonText="Approve"
app:secondaryButtonText="Cancel"
app:primaryAtStart="false"
app:secondaryAtStart="false"
/>
All SectionHeaderFooter
attributes are optional and can also be set in code. Below is a brief description of the most commonly used attributes:
app:primaryButtonText="Accept"
: Sets the primary button's text.app:showPrimaryButton="true"
: If set to true, the primary button will be displayed.app:footerButtonStyleDefault="@style/FioriButton.Flat"
: Sets the default button style.app:footerButtonStyleTonal
: Sets the tonal button style.app:footerButtonStyleEmphasized="@style/FioriButton.Contained"
: Sets the style for emphasized buttons.app:isPrimaryButtonEmphasized="true"
: If set to true, the primary button will adopt the emphasized button style.app:showSecondaryButton="false"
: If set to false, the secondary button will be hidden.app:helperText="Choose One"
: Sets the helper text, which is only visible in opposing actions layout.
Fields¶
Header Text¶
The following example shows methods that can be applied to the helper text:
mSectionHeaderFooter.setHeaderText(Charsequence);
mSectionHeaderFooter.setHeaderTextAppearance(@StyleRes int);
Primary Button¶
The following example shows methods that can be applied to the primary button.
mSectionHeaderFooter.setPrimaryText(Charsequence);
mSectionHeaderFooter.setPrimaryActionClickListener(View.OnClickListener);
mSectionHeaderFooter.setPrimaryTextAppearance(@StyleRes int);
mSectionHeaderFooter.setPrimaryActionEmphasized(Boolean);
The primary button is also accessible and can be retrieved for further customization
mSectionHeaderFooter.primaryButton;
Secondary Button¶
The following example shows methods that can be applied to the secondary button.
mSectionHeaderFooter.showSecondaryButton(Boolean);
mSectionHeaderFooter.setSecondaryEnabled(Boolean);
mSectionHeaderFooter.setSecondaryText(Charsequence);
mSectionHeaderFooter.setSecondaryActionClickListener(View.OnClickListener);
mSectionHeaderFooter.setSecondaryTextAppearance(@StyleRes int);
The secondary button is also accessible and can be retrieved for further customization.
mSectionHeaderFooter.secondaryButton;
Add Icons to Buttons¶
The Section Header Footer also provides utility methods to add leading or trailing icons to the buttons. Use the methods below to add icons to the primary and secondary buttons, respectively:
mSectionHeaderFooter.setPrimaryActionIcon(Drawable, @IconGravity int, ColorStateList);
mSectionHeaderFooter.setSecondaryActionIcon(Drawable, @IconGravity int, ColorStateList)
Setting Custom Button Styles¶
To set a custom button style, use any of these methods:
mSectionHeaderFooter.setFooterButtonStyleDefault(@StyleRes int);
mSectionHeaderFooter.setFooterButtonStyleEmphasized(@StyleRes int);
mSectionHeaderFooter.setFooterButtonStyleTonal(@StyleRes int);
mSectionHeaderFooter.setFooterButtonStyleTonalNegativeSemantic(@StyleRes int);
mSectionHeaderFooter.setFooterButtonStyleTextNegativeSemantic(@StyleRes int);
Note: These methods won't automatically apply the style to the buttons. Refer to the section "Converting Buttons" for more information.
Converting Buttons¶
The Section Header Footer provides an easy way to convert buttons into different styles, which can also be used at runtime.
Filled Buttons¶
Pass true
as the parameter for the following methods to convert the primary and secondary buttons into filled buttons, respectively:
mSectionHeaderFooter.setPrimaryActionFilled(true);
mSectionHeaderFooter.setSecondaryActionFilled(true);
Text Buttons¶
Pass false
as the parameter for the following methods to convert the primary and secondary buttons into text buttons, respectively:
mSectionHeaderFooter.setPrimaryActionFilled(false);
mSectionHeaderFooter.setSecondaryActionFilled(false);
Text Buttons with Negative Semantic¶
Use the following methods to convert the primary and secondary buttons to text buttons with a negative semantic, respectively:
mSectionHeaderFooter.setPrimaryActionFlatNegativeSemantic();
mSectionHeaderFooter.setSecondaryActionFlatNegativeSemantic();
Tonal Buttons¶
Use the following methods to convert the primary and secondary buttons to tonal buttons, respectively:
mSectionHeaderFooter.setPrimaryActionTonal();
mSectionHeaderFooter.setSecondaryActionTonal();
Tonal Buttons with Negative Semantic¶
Use the following methods to convert the primary and secondary buttons to tonal buttons with a negative semantic, respectively:
mSectionHeaderFooter.setPrimaryActionTonalNegativeSemantic();
mSectionHeaderFooter.setSecondaryActionTonalNegativeSemantic();
Icon Buttons¶
Use the following methods to convert the primary and secondary buttons to icon buttons, respectively:
mSectionHeaderFooter.setPrimaryActionAsIconButton(Drawable);
mSectionHeaderFooter.setSecondaryActionAsIconButtonl(Drawable);