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.
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 footerActionMode.OPPOSING_ACTIONS
, which aligns the buttons on opposite ends of the footerActionMode.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.
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 tofalse
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¶
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);