02. Expandable app bar

An expandable app bar can be in an expanded state or collapsed state; there is no state in-between these two. If the user scrolls up while the app bar is expanded, then it collapses; if the user scrolls down while the app bar is collapsed, then it expands. If you want to show the content in full screen, you can hide the app bar.

Phone

Tablet

The titles displayed in the expanded state and collapsed state don’t need to match. When the app bar is expanded, useful information about the relevant screen can be displayed in a larger area.

Support

Smartphone users can’t use an expandable app bar while in the landscape mode of the full-screen view. In case of a multi-window view, foldable phones, and Samsung DeX, the expandable app bar is supported for both landscape and portrait mode when the height of the screen is above 580dp.

When an expandable app bar is supported

The user can resize the app bar area by scrolling it up or down, whether its default state is expanded or collapsed.

First depth screen (list/grid scrollable view)

Support an expandable app bar on the screen that has a tab, search bar, and default collapsed app bar.

Default collapsed app bar

App bar with a search field

Second and later depth screens

For the second depth and later depths, display a default collapsed app bar, but allow it expandable. It should also be expandable in list/grid view, detail view, search view, and multiselect view.

Detail view

Search view

When an expandable app bar is not supported

An expandable app bar is not supported in the following cases:

When a screen is created by using keyboard (But, it is expandable if inputting simple texts)

When a single screen needs to be completely filled with a controller, etc.

When the user’s content, such as an image or video, might be cut off by the expandable app bar

When the screen contains additional component that need to scroll up and down

Upon opening an app

Display an expandable app bar when the user enters the first main screen.
For the second and later depth screens, display a collapsed app bar as default, and an app bar can be expanded by scrolling down. However, where an expanded app bar is deemed useful, an expanded app bar can be treated as default on the second and later depth screens.

1Return to the previous value

2Back

Snap

When the user lifts their finger in the mid-point while scrolling up and down, the display of the screen in expanded view or collapsed view is determined depending on whether the threshold was exceeded at the time the finger was lifted, and then the screen snaps accordingly.

1When the finger was lifted in the mid-point, was the threshold exceeded?

Scroll stop

When the user scrolls down in the middle of a list on the screen in list/grid view, etc., and then moves to the top of the list, whether or not to stop the scrolling is determined based on whether the relevant screen’s default view is expanded or collapsed. The position at which the scrolling stops in the middle of the list is determined based on what the user sees upon entering the relevant screen.

[Case 1]

When the screen’s default view is collapsed, if the user scrolls in the middle of a list, then the scrolling stops at the top of the list.

1If the app bar is collapsed as a user enters the screen

2Scroll in the middle of the list

3Scrolling stops at the top of the list

4Scrolling down from the top of the list displays it in expanded view

[Case 2]

When the screen’s default view is expanded, if the user scrolls in the middle of a list, then the scrolling doesn’t stop and the user is moved to the screen that shows an expandable app bar instead.

1If the app bar can be expandable as a user enters the screen

2Scroll in the middle of the list

3Switch to expanded view immediately without stopping the scrolling

If the use of a search bar is essential for the app, then the search bar can be displayed on the screen. The search bar should disappear while the user is scrolling the list, and then reappear afterward.

1As the list appears, the search bar becomes hidden.

Example of device application

Phone

1Text (align: center)

239.67% of Screen Height

Tablet

1Text (align: center)

218.78% of Screen Height