Skip to content

Persistent Footer

The Persistent Footer is a footer that is designed to be placed at the bottom of its parent container. Like the navigation bar, it provides immediate actions to the user, however, the key difference is that the navigation bar is strictly used for navigation, whereas the footer supports other important actions (as well as navigation, if needed).

The footer supports 1-3 actions on small screens and 1-4 actions on larger screens. The actions are described in order of significance: primary button, secondary button, tertiary button (on large screens only), helper text, and an overflow icon button.

Anatomy

Structurally, the primary button is constrained to be displayed at the end of the footer and is a filled button, by default, to establish emphasis over the rest of the actions.

Persistent Footer Example 1

There are three action modes that determine how the Persistent Footer should be laid out with ActionMode.RELATED_ACTIONS being the default action mode.

  • ActionMode.RELATED_ACTIONS, which aligns the buttons at the end of the footer
  • ActionMode.OPPOSING_ACTIONS, which aligns the buttons on opposite ends of the footer
  • ActionMode.SINGLE_ACTION_FILL_MAX_WIDTH, which displays a single button that expands to the width of the footer

The following is an example of a Persistent Footer set with ActionMode.SINGLE_ACTION_FILL_MAX_WIDTH, which supports one action that fills the entire width of the footer.

Persistent Footer Example 2

Usage

The Persistent Footer should be used when the application needs to provide immediate actions to the user. The footer should be aligned at the bottom of its parent ViewGroup.

Construction

A Persistent Footer can be created either by the constructor in code or by declaring a PersistentFooter element in XML like this:

    <com.sap.cloud.mobile.fiori.footer.PersistentFooter
        android:id="@+id/persistent_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

A Persistent Footer may also be customized in XML using its attributes:

    <com.sap.cloud.mobile.fiori.footer.PersistentFooter
        android:id="@+id/persistent_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:actionMode="opposing_actions"
        app:dividerEnabled="true"
        app:elevation="0dp"
        app:footerButtonStyleDefault="@style/FioriButton.Flat"
        app:footerButtonStyleTonal="@style/FioriButton.Tonal"
        app:footerButtonStyleEmphasized="@style/FioriButton.Contained"
        app:showPrimaryButton="true"
        app:primaryButtonEnabled="false"
        app:isPrimaryButtonEmphasized="true"
        app:primaryButtonText="Primary"
        app:showSecondaryButton="false"
        app:helperText="Choose One"
        app:secondaryButtonText="Secondary"
        app:tertiaryButtonText="Tertiary" />

All PersistentFooter attributes are optional and may also be set in code instead. Here is a brief description of commonly used attributes:

  • app:actionMode="opposing_actions" The two buttons will be on opposite ends of the footer.
  • app:dividerEnabled="true" Enables the divider line at the top of the footer.
  • app:elevation="0dp" Sets the elevation.
  • 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" When true, the primary button will have the emphasized button style.
  • app:showSecondaryButton="false" Setting this attribute to false hides the secondary button.
  • app:helperText="Choose One" Sets the helper text, which is only visible in opposing actions layout.
  • overflowContentDescription Sets the content description for the overflow button.
  • tertiaryButtonText Sets the text for the tertiary button.

Fields

Action Mode

The ActionMode describes the visual layout of the footer. There are three modes: ActionMode.RELATED_ACTIONS, ActionMode.OPPOSING_ACTIONS, and ActionMode.SINGLE_ACTION_FILL_MAX_WIDTH. The default mode is ActionMode.RELATED_ACTIONS.

mPersistentFooter.setActionMode(PersistentFooter.ActionMode.OPPOSING_ACTIONS);

Elevation

The default elevation of the Persistent Footer is 3Dp, however there are cases when no elevation is desired (such as when the footer is contained in a popup dialog).

mPersistentFooter.setElevation(float);

Divider

A standard Fiori divider that can be enabled or disabled. It is disabled by default and it is aligned to the top of the footer.

mPersistentFooter.setDividerEnabled(Boolean);

Primary Button

The following example shows methods that can be applied to the primary button.

mPersistentFooter.setPrimaryText(Charsequence);
mPersistentFooter.setPrimaryActionClickListener(View.OnClickListener);
mPersistentFooter.setPrimaryTextAppearance(@StyleRes int);
mPersistentFooter.setPrimaryActionEmphasized(Boolean);

The primary button is also exposed and may be retrieved for further customization.

mPersistentFooter.primaryButton;

Secondary Button

The following example shows methods that can be applied to the secondary button.

mPersistentFooter.showSecondaryButton(Boolean);
mPersistentFooter.setSecondaryEnabled(Boolean);
mPersistentFooter.setSecondaryText(Charsequence);
mPersistentFooter.setSecondaryActionClickListener(View.OnClickListener);
mPersistentFooter.setSecondaryTextAppearance(@StyleRes int);

The secondary button is also exposed and may be retrieved for further customization.

mPersistentFooter.secondaryButton;

Tertiary Button

The tertiary button is only available on larger screens and when the ActionMode is set to ActionMode.RELATED_ACTIONS. The following example shows methods that can be applied to the tertiary button:

mPersistentFooter.showTertiaryButton(Boolean);
mPersistentFooter.setTertiaryEnabled(Boolean);
mPersistentFooter.setTertiaryText(Charsequence);
mPersistentFooter.setTertiaryActionClickListener(View.OnClickListener);
mPersistentFooter.setTertiaryTextAppearance(@StyleRes int);

The tertiary button is also exposed and may be retrieved for further customization.

mPersistentFooter.tertiaryButton;

Helper Text

The helper text is only available in ActionMode.OPPOSING_ACTIONS. The following example shows methods that can be applied to the helper text:

mPersistentFooter.showHelperText(Boolean);
mPersistentFooter.setHelperText(Charsequence);
mPersistentFooter.setHelperTextAppearance(@StyleRes int);

Overflow Button

The overflow button is only available in ActionMode.RELATED_ACTIONS. It is currently up to the application to provide the popup menu and its contents via the View.OnClickListener. The following methods can be used for the overflow button:

mPersistentFooter.showOverflowButton(Boolean, @Nullable Drawable, @Nullable View.OnClickListener, @Nullable CharSequence);
mPersistentFooter.setOverflowButtonContentDescription(Charsequence)

Add Icons to Buttons

The Persistent Footer also provides utility methods to add leading or trailing icons to the buttons. Use the methods below to add icons to the primary, secondary, and tertiary buttons, respectively:

mPersistentFooter.setPrimaryActionIcon(Drawable, @IconGravity int, ColorStateList);
mPersistentFooter.setSecondaryActionIcon(Drawable, @IconGravity int, ColorStateList)
mPersistentFooter.setTertiaryActionIcon(Drawable, @IconGravity int, ColorStateList)

Swap Buttons at Runtime

Use this feature to swap the buttons. It only swaps the primary and secondary buttons.

mPersistentFooter.swapButtons();

Setting Custom Button Styles

Persistent Footer Example 3

To set a custom button style, use any of these methods:

mPersistentFooter.setFooterButtonStyleDefault(@StyleRes int);
mPersistentFooter.setFooterButtonStyleEmphasized(@StyleRes int);
mPersistentFooter.setFooterButtonStyleTonal(@StyleRes int);
mPersistentFooter.setFooterButtonStyleTonalNegativeSemantic(@StyleRes int);
mPersistentFooter.setFooterButtonStyleTextNegativeSemantic(@StyleRes int);

Note: These methods won't automatically apply the style to the buttons, see the following section on "Converting Buttons".

Converting Buttons

The Persistent Footer provides an easy way to convert buttons to different styles. These may also be used at runtime.

Filled Buttons

Pass true as the parameter for the following methods for the primary, secondary, and tertiary buttons to become filled buttons, respectively:

mPersistentFooter.setPrimaryActionEmphasized(true);
mPersistentFooter.setSecondaryActionEmphasized(true);
mPersistentFooter.setTertiaryActionEmphasized(true);

Text Buttons

Pass false as the parameter for the following methods for the primary, secondary, and tertiary buttons to become text buttons, respectively:

mPersistentFooter.setPrimaryActionEmphasized(false);
mPersistentFooter.setSecondaryActionEmphasized(false);
mPersistentFooter.setTertiaryActionEmphasized(false);

Text Buttons with Negative Semantic

Use the following methods to convert the primary, secondary, and tertiary buttons to text buttons with a negative semantic, respectively:

mPersistentFooter.setPrimaryActionFlatNegativeSemantic();
mPersistentFooter.setSecondaryActionFlatNegativeSemantic();
mPersistentFooter.setTertiaryActionFlatNegativeSemantic();

Tonal Buttons

Use the following methods to convert the primary, secondary, and tertiary buttons to tonal buttons, respectively:

mPersistentFooter.setPrimaryActionTonal();
mPersistentFooter.setSecondaryActionTonal();
mPersistentFooter.setTertiaryActionTonal();

Tonal Buttons with Negative Semantic

Use the following methods to convert the primary, secondary, and tertiary buttons to tonal buttons with a negative semantic, respectively:

mPersistentFooter.setPrimaryActionTonalNegativeSemantic();
mPersistentFooter.setSecondaryActionTonalNegativeSemantic();
mPersistentFooter.setTertiaryActionTonalNegativeSemantic();

Icon Buttons

Use the following methods to convert the primary, secondary, and tertiary buttons to icon buttons, respectively:

mPersistentFooter.setPrimaryActionAsIconButton(Drawable);
mPersistentFooter.setSecondaryActionAsIconButtonl(Drawable);
mPersistentFooter.setTertiaryActionAsIconButton(Drawable);

Last update: June 23, 2023