Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it in your Kotlin files.
import com.backbase.android.design.header.TabHeaderFragment
import com.backbase.android.design.header.TopBarConfiguration
import com.backbase.android.design.header.TabListConfiguration
Usage
Basic usage
Create a TabHeaderFragment instance with navigation controller integration using TopBarConfiguration and TabListConfiguration.
// Create top bar configuration
val topBarConfiguration = TopBarConfiguration {
title = DeferredText.Resource(resId = R.string.header_tab_title)
subtitle = DeferredText.Resource(resId = R.string.header_tab_subtitle)
avatar = AvatarConfiguration {
initialsText = DeferredText.Constant("JD")
}
}
// Create tab list configuration
val tabListConfiguration = TabListConfiguration {
+TabConfiguration {
text = DeferredText.Constant("Home")
navigation = NavigationConfiguration {
navGraphId = R.navigation.nav_graph
destination = StartDestinationConfiguration()
}
}
+TabConfiguration {
text = DeferredText.Constant("Settings")
navigation = NavigationConfiguration {
navGraphId = R.navigation.nav_graph
destination = DestinationByIdConfiguration {
id = R.id.settings_fragment
}
}
}
}
// Create bundle with configurations
val bundle = Bundle().apply {
putParcelable(TabHeaderFragment.TopBarConfigurationKey, topBarConfiguration)
putParcelable(TabHeaderFragment.TabListConfigurationKey, tabListConfiguration)
}
Advanced usage
// Advanced configuration with menu and multiple tabs
val advancedTabListConfiguration = TabListConfiguration {
hideTabBarWhenSingleTab = false
+TabConfiguration {
text = DeferredText.Constant("Dashboard")
contentDescription = "Dashboard screen"
navigation = NavigationConfiguration {
navGraphId = R.navigation.main_nav
destination = DestinationByIdConfiguration {
id = R.id.dashboard_fragment
}
}
}
+TabConfiguration {
text = DeferredText.Constant("Payments")
contentDescription = "Payments screen"
navigation = NavigationConfiguration {
navGraphId = R.navigation.main_nav
destination = DestinationByIdConfiguration {
id = R.id.payments_fragment
}
}
}
+TabConfiguration {
text = DeferredText.Constant("Profile")
contentDescription = "Profile screen"
navigation = NavigationConfiguration {
navGraphId = R.navigation.main_nav
destination = DestinationByIdConfiguration {
id = R.id.profile_fragment
}
}
}
}
// Top bar with menu configuration
val topBarWithMenu = TopBarConfiguration {
title = "John Doe"
subtitle = "Premium Account"
avatar = AvatarConfiguration {
initials = "JD"
}
menu = MenuConfiguration {
menuProvider = customMenuProvider
}
}
Configuration
|
Argument key |
Type |
Default |
|---|---|---|
|
TabListConfigurationKey |
TabListConfiguration |
Required |
|
TopBarConfigurationKey |
TopBarConfiguration |
Required |
TabListConfigurationKey
The TabListConfigurationKey argument provides the tab configuration that defines the available tabs and their behavior.
// Pass tab list configuration as fragment argument
bundle.putParcelable(TabHeaderFragment.TabListConfigurationKey, tabListConfiguration)
TopBarConfigurationKey
The TopBarConfigurationKey argument provides the header configuration that defines the title, subtitle, avatar, and menu.
// Pass top bar configuration as fragment argument
bundle.putParcelable(TabHeaderFragment.TopBarConfigurationKey, topBarConfiguration)
Styling
Predefined styles
The TabHeaderFragment uses the default style from the design system which applies appropriate colors, fonts, and layout through theme attributes.
<!-- TabHeaderFragment with default styling applied through theme -->
<style name="AppTheme" parent="Theme.Backbase.Default">
<item name="tabHeaderAppBarLayoutStyle">@style/Widget.Backbase.TabHeader.AppBarLayout</item>
<item name="tabHeaderToolbarStyle">@style/Widget.Backbase.TabHeader.Toolbar</item>
<item name="tabHeaderTabLayoutStyle">@style/Widget.Backbase.TabHeader.TabLayout</item>
</style>
Custom styling
Create custom styles by overriding the theme attributes for TabHeaderFragment components.
<!-- Custom styling through theme attributes -->
<style name="CustomTabHeaderTheme" parent="Theme.Backbase.Default">
<item name="tabHeaderAppBarLayoutStyle">@style/CustomTabHeader.AppBarLayout</item>
<item name="tabHeaderToolbarStyle">@style/CustomTabHeader.Toolbar</item>
<item name="tabHeaderTabLayoutStyle">@style/CustomTabHeader.TabLayout</item>
</style>
<style name="CustomTabHeader.AppBarLayout" parent="Widget.Backbase.TabHeader.AppBarLayout">
<item name="android:background">?colorPrimary</item>
</style>
<style name="CustomTabHeader.Toolbar" parent="Widget.Backbase.TabHeader.Toolbar">
<item name="titleTextColor">?colorOnPrimary</item>
<item name="subtitleTextColor">?colorOnPrimary</item>
</style>
<style name="CustomTabHeader.TabLayout" parent="Widget.Backbase.TabHeader.TabLayout">
<item name="tabMode">fixed</item>
<item name="android:paddingStart">?spacerSmall</item>
<item name="android:paddingEnd">?spacerSmall</item>
</style>
States
Tab selection states
The TabHeaderFragment manages tab selection automatically through the TabHeaderViewModel and provides methods for programmatic control.
// Select tab programmatically
tabHeaderViewModel.selectTab(2)
Header visibility states
The header visibility can be controlled through the TabHeaderViewModel based on navigation state.
// Update header visibility
tabHeaderViewModel.updateHeaderVisibility(
requesterPosition = 0,
isVisible = false
)
Events
|
Event |
Type |
Description |
|---|---|---|
|
onMenuItemSelected |
(MenuItem) -> Boolean |
Callback executed when menu item is selected through TabHeaderMenuProvider |
// Handle menu events through TabHeaderMenuProvider
class CustomTabHeaderMenuProvider : TabHeaderMenuProvider {
override fun onMenuItemSelected(menuItem: MenuItem): Boolean = when (menuItem.itemId) {
R.id.settings -> {
// Navigate to settings
true
}
R.id.avatar -> {
// Handle avatar click
true
}
else -> false
}
}
Accessibility
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
contentDescription |
Accessible description for the header |
String |
|
TabConfiguration.contentDescription |
Accessible description for individual tabs |
String? |
Best practices
- TabHeaderFragment automatically provides accessibility support for tab navigation
- Each TabConfiguration should have a contentDescription for proper tab labeling
- Avatar interactions are automatically accessible with appropriate labels
- Tab selection changes are communicated through accessibility notifications
- Use meaningful text values for TabConfiguration to improve screen reader experience
// Configure accessibility for tabs
TabConfiguration {
text = DeferredText.Constant("Home")
contentDescription = "Home screen tab"
}
// Configure accessibility for header
TopBarConfiguration {
title = "Dashboard"
contentDescription = "Dashboard overview header"
}
Design tokens
Component styling is applied through theme attributes that reference the design system's tokens. The specific tokens used depend on the current theme configuration and are not directly exposed by this component.