Top App Bar¶
FioriTopAppBar is a top bar that appears above the scrolling content and behaves differently depending on the scrolling strategy. FioriTopAppBar should be used along with FioriScaffold, where the scrolling behavior is intercepted and handled. The semantic tree of the FioriScaffold body should consist of only one root node and the body should be vertically scrollable.
Set up FioriTopAppBar¶
var configuration = FioriTopAppBarConfiguration(
type = TopAppBarType.SMALL, // It can also be set to 'TopAppBarType.LARGE'.
alignment = TitleAlignment.CENTERED // Determine whether the title is center-aligned or start-aligned
)
var strategy = FioriScrollStrategy.Floating
val toolbarState:FioriToolbarState by createToolbarState (configuration,strategy)
var scaffoldState by rememberFioriToolbarScaffoldState(toolbarState)
FioriScaffold(
modifier = Modifier.padding(top=20.dp),
state = scaffoldState,
scrollStrategy = strategy,
top bar = {
FioriTopAppBar(
toolbarState = toolbarState,
configuration = configuration,
leadingAction = LeadingAction(
symbol = ActionImage(icon=FioriIcon(R.drawable.ic_arrow_back)),
){
// Action to be performed on clicking the left top contextual button.
} ,
content = FioriTopAppBarModel(title = "Title"),
actions = arrayOf( // If array length is three or larger, the overflowed part will be merged.
// Overflowed menus will be displayed on clicking the trailing icon
TopAppBarAction(
title = "edit" ,
symbol = ActionSymbol(
FioriAvatarData(text = "B", textColor = Color.Black),
badge = FioriIcon(resId = R.drawable.ic_circle_unread)),
action = {}),
TopAppBarAction(title = "search", symbol = ActionSymbol( ActionImage(FioriIcon(resId =R.drawable.ic_search))),action={}),
TopAppBarAction(title = "dummy", action = {}),
),)
}) {
LazyColumn {
items(100){
index->
Text(modifier = Modifier
.fillMaxWidth()
.height(30.dp),text = "Item:$index")
}
}
}
The top app bar provides two types: TopAppBarType.SMALL and TopAppBarType.LARGE.
Scrolling Strategy¶
The scrollStrategy in FioriScaffold can be set to FioriScrollStrategy.Fix, FioriScrollStrategy.Floating, FioriScrollStrategy.Collapsing, or FioriScrollStrategy.Pinned. The latter two strategies are only valid if the top app bar type is set to TopAppBarType.LARGE. Different strategies will lead to different scrolling behaviors on scrolling up.
When the strategy is set to FioriScrollStrategy.Fix, the top bar position will be fixed and it will be pinned at the top. If the strategy is set to FioriScrollStrategy.Floating, the top bar will get hidden on scrolling up. If the strategy is set to FioriScrollStrategy.Collapsing or FioriScrollStrategy.Pinned, which indicates top app bar is of type TopAppBarType.LARGE, the top bar will be collapsed to TopAppBarType.SMALL first on scrolling up. Subsequently, if it is set to FioriScrollStrategy.Collapsing, the top app bar will get hidden as it behaves when being set to FioriScrollStrategy.Floating. If it is set to FioriScrollStrategy.Pinned, the top app bar will be pinned at the top as it behaves when being set toFioriScrollStrategy.Fix.
scrollStrategy is set to FioriScrollStrategy.Fix or FioriScrollStrategy.Floating on scrolling up
scrollStrategy is set to FioriScrollStrategy.Floating or FioriScrollStrategy.Pinned on scrolling up
Top App Bar and Scaffold Construction¶
The state variable of FioriScaffold is used to make the scaffold able to be aware of the toolbarState of the top app bar. toolbarState within FioriTopAppBar is used to describe the scrolling state of the top app bar itself. Without the state, FioriScaffold is not able to place and measure the top bar correctly.
The top bar variable in FioriScaffold does not necessarily need to be FioriTopAppBar. It can be a customized top bar that respects the toolbar state used by the scaffold. All properties in FioriToolbarState need to be handled correctly for the sake of rendering the top bar.
leadingAction is the leading element on the top bar. It can be an icon button with an assigned action or it can be a logo if its symbol is constructed using FioriImage.
actions is an array used to create trailing menus on the top bar. If the length of the array is three or greater, the generated menus can be merged into the last show-more button.
Customizing the Extended Top App Bar¶
When the top app bar type is TopAppBarType.LARGE, the extended part of the top app bar, which is the second line of the large top app bar, can be customized. Simply assign the extendedBar in FioriTopAppBar with your customization codes and they will overwrite the default implementation for the extended bar.
