Skip to content

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.

Section Header Footer

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);

Last update: December 13, 2024