App Bar¶
The app bar provides navigation, concise info, and actions relevant to the current screen. It can serve as a header for a landing page, a header for a page that requires back navigation, or to emphasize a headline.
Fiori offers two types of app bar: FioriCollapsingToolbar
and
FioriToolbar
.
FioriCollapsingToolbar
is a collapsing app bar supporting both an expanded and
collapsed state.
FioriToolbar
is an app bar with a single state that resembles
FioriCollapsingToolbar
's collapsed state.
Anatomy¶
The collapsing app bar consists of a top app bar and an expanded content area.
The top app bar consists of text labels, a menu of action items, and either
a navigation icon or a logo. You can use FioriToolbar
as a top app bar
by itself or in conjunction with FioriCollapsingToolbar
.
The expanded content area is a space below the top bar holding more content that can be displayed upon scrolling down.
![]() |
---|
Expanded State |
![]() |
---|
Collapsed State |
Construction¶
You can create a collapsing app bar using the constructor in code:
FioriCollapsingToolbar collapsingToolbar = new FioriCollapsingToolbar(getContext());
You can also create the collapsing app bar by declaring a FioriCollapsingToolbar
element in XML:
<com.sap.cloud.mobile.fiori.toolbar.FioriCollapsingToolbar
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.sap.cloud.mobile.fiori.toolbar.FioriCollapsingToolbar>
You can create the top app bar using the constructor and add it to the collapsing app bar:
FioriToolbar toolbar = new FioriToolbar(getContext());
collapsingToolbar.setToolbar(toolbar);
You can also create the top app bar and add it to the collapsing app bar
by declaring a FioriToolbar
element in XML:
<com.sap.cloud.mobile.fiori.toolbar.FioriCollapsingToolbar
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.sap.cloud.mobile.fiori.toolbar.FioriToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/FioriTheme.FioriAppBar"
app:popupTheme="@style/AppTheme.PopupOverlay">
</com.sap.cloud.mobile.fiori.toolbar.FioriToolbar>
</com.sap.cloud.mobile.fiori.toolbar.FioriCollapsingToolbar>
You can add the expanded content to the collapsing app bar,
as illustrated in the following example using ObjectHeader
:
ObjectHeader header = new ObjectHeader(getContext());
collapsingToolbar.setExpandedView(header);
You can also add the expanded content to the collapsing app bar in XML,
as illustrated in the following example using ObjectHeader
:
<com.sap.cloud.mobile.fiori.toolbar.FioriCollapsingToolbar
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.sap.cloud.mobile.fiori.object.ObjectHeader
android:id="@+id/objectHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize">
</com.sap.cloud.mobile.fiori.object.ObjectHeader>
<com.sap.cloud.mobile.fiori.toolbar.FioriToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/FioriTheme.FioriAppBar"
app:popupTheme="@style/AppTheme.PopupOverlay">
</com.sap.cloud.mobile.fiori.toolbar.FioriToolbar>
</com.sap.cloud.mobile.fiori.toolbar.FioriCollapsingToolbar>
The collapsing app bar should be utilized in an AppBarLayout
, while
the element outside of the AppBarLayout
should define the
app:layout_behavior
:
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.sap.cloud.mobile.fiori.toolbar.FioriCollapsingToolbar
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.sap.cloud.mobile.fiori.toolbar.FioriToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/FioriTheme.FioriAppBar"
app:popupTheme="@style/AppTheme.PopupOverlay">
</com.sap.cloud.mobile.fiori.toolbar.FioriToolbar>
</com.sap.cloud.mobile.fiori.toolbar.FioriCollapsingToolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</androidx.core.widget.NestedScrollView>
The top app bar can be utilized by itself in a similar fashion:
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.sap.cloud.mobile.fiori.toolbar.FioriToolbar
android:id="@+id/solo_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/FioriTheme.FioriAppBar"
app:popupTheme="@style/AppTheme.PopupOverlay">
</com.sap.cloud.mobile.fiori.toolbar.FioriToolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</androidx.core.widget.NestedScrollView>
Customization¶
Title¶
The title describes the screen. In the default expanded content area of
FioriCollapsingToolbar
, the title can wrap two lines before truncating.
collapsingToolbar.setTitle(R.string.title); // use with FioriCollapsingToolbar
toolbar.setTitle(R.string.title); // use when only using FioriToolbar
Subtitle¶
The subtitle appears under the title and helps describe the screen. It is
only displayed when using FioriToolbar
by itself.
toolbar.setSubtitle(R.string.subtitle);
Logo¶
The logo represents the branding. When the logo is set, it will replace
the navigation icon. If the logo is set and FioriCollapsingToolbar
is
not being used, then the title and subtitle will be forced to be centered.
toolbar.setLogo(R.drawable.logo);
Collapse Mode¶
The collapse mode determines how the title in the collapsing app bar transitions between the expanded and collapsed states.
collapsingToolbar.setTitleCollapseMode(TITLE_COLLAPSE_MODE_FADE); // opacity change
collapsingToolbar.setTitleCollapseMode(TITLE_COLLAPSE_MODE_SCALE); // translate and size change
Pinned Mode¶
The pinned mode determines whether the top app bar remains pinned to the top of the screen while content scrolls underneath it.
// use when FioriCollapsingToolbar is being used
collapsingToolbar.setIsPinned(true); // collapses to top app bar, then remains pinned
collapsingToolbar.setIsPinned(false); // collapses to top app bar, then scrolls off
// use when only FioriToolbar is being used
toolbar.setIsPinned(true); // top app bar remains pinned
toolbar.setIsPinned(false); // top app bar can be scrolled off
Centered Text¶
The title and subtitle can be set to be either centered or start-aligned.
The text will always be start-aligned when using FioriCollapsingToolbar
.
toolbar.setIsTextCentered(true);
Avatar¶
Any of the menu items can be designated as a FioriAvatar
.
toolbar.setItemIsAvatar(1, true); // set the second item from the center as an avatar
This item can then be customized using FioriAvatar
methods.
toolbar.getAvatar(1).setBadge(R.drawable.badge);
Overflow Button¶
The overflow button holds any items that are not displayed on the bar. This button can be toggled on and off.
toolbar.setShowOverflowButton(false);
Expanded Content¶
The expanded content area is a space below the top bar that can hold more content. By default, this space is used to provide more space for the title. If a custom expanded content is specified, the default will automatically be replaced, and the ability of the title to transition between expanded and collapsed states will be disabled.
collapsingToolbar.setExpandedView(header);
collapsingToolbar.setExpandedView(null); // return to using default expanded content
Populating the Menu¶
The menu is populated with action items using a combination of XML and code in an activity:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Edit"
android:id="@+id/appbar_edit_menu"
app:showAsAction="always"/>
<item android:title="Search"
android:id="@+id/appbar_search_menu"
app:showAsAction="ifRoom"/>
<item android:title="Add"
android:id="@+id/appbar_add_menu"
app:showAsAction="ifRoom"
android:icon="@drawable/add"/>
<item android:title="Filter"
android:id="@+id/appbar_filter_menu"
app:showAsAction="ifRoom"
android:icon="@drawable/filter"/>
</menu>
@Override
public boolean onCreateOptionsMenu(@NonNull Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.appbar_menu, menu);
return true;
}