Skip to content

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 App Bar Anatomy
Expanded State
Collapsed App Bar Anatomy
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.common.FioriCollapsingToolbar
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</com.sap.cloud.mobile.fiori.common.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.common.FioriCollapsingToolbar
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.sap.cloud.mobile.fiori.common.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.common.FioriToolbar>

</com.sap.cloud.mobile.fiori.common.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.common.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.common.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.common.FioriToolbar>

</com.sap.cloud.mobile.fiori.common.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.common.FioriCollapsingToolbar
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.sap.cloud.mobile.fiori.common.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.common.FioriToolbar>

    </com.sap.cloud.mobile.fiori.common.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.common.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.common.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);

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

Last update: October 3, 2022