Skip to content

Persistent Footer

The Persistent Footer is one of the four types of footers defined by SAP Fiori for Android.

Anatomy

A Persistent Footer consists of one or two buttons: a primary button and an optional secondary button. Structurally, the primary button is constrained to be displayed at the end of the footer.

By default, the primary action is a contained button to establish emphasis over the secondary action.

Persistent Footer Example 1

There are two action modes that determine how the Persistent Footer should be laid out:

. ActionMode.RELATED_ACTIONS, which aligns the buttons together as shown above. . ActionMode.OPPOSING_ACTIONS, which aligns the buttons on opposite ends of the footer.

ActionMode.RELATED_ACTIONS is the default action mode. The following is an example of a Persistent Footer set with ActionMode.OPPOSING_ACTIONS.

Persistent Footer Example 2

Usage

PersistentFooter should be used when the application needs to provide one or two immediate actions to the user. The footer should be aligned to the bottom of its parent.

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"
        app:actionMode="opposing_actions"
        app:dividerEnabled="true"
        app:footerButtonStyleDefault="@style/FioriButton.Flat"
        app:footerButtonStyleEmphasized="@style/FioriButton.Contained"
        app:isPrimaryButtonEmphasized="true"
        app:primaryButtonText="Primary"
        app:secondaryButtonEnabled="true"
        app:secondaryButtonText="Secondary" />

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:footerButtonStyleDefault="@style/FioriButton.Flat" Sets the default 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:secondaryButtonEnabled="false" Setting this attribute to false disables the secondary button.

Fields

Action Mode

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

mPersistentFooter.setActionMode(PersistentFooter.ActionMode.OPPOSING_ACTIONS);

Divider (Optional)

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

mPersistentFooter.setDividerEnabled(false);

Primary Button

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

mPersistentFooter.setPrimaryText("Next");
mPersistentFooter.setPrimaryActionClickListener(onClickListener);
mPersistentFooter.setPrimaryTextAppearance(textAppearance);
mPersistentFooter.setPrimaryActionEmphasized(true);

Secondary Button (Optional)

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

mPersistentFooter.setSecondaryEnabled(true);
mPersistentFooter.setSecondaryText("Back");
mPersistentFooter.setSecondaryActionClickListener(onClickListener);
mPersistentFooter.setSecondaryTextAppearance(textAppearance);

Swapping Buttons

Use this feature to swap the buttons.

mPersistentFooter.swapButtons();

Last update: January 12, 2021