Docs / Bottom bars / 22

BloomBottomBar

Flat bar whose selected icon fills in on an accent orb that blooms out of it, with its label unrolling beside it.

Edge to edge
Any tab
Icon only

Preview

Bloom bottom bar in light theme, switching between tabs — Light

Bloom bottom bar in dark theme, switching between tabs — Dark

A flat bar of icon-only tabs. The selected icon fills in on an accent orb with its label beside it. On a new selection the orb blooms out of the icon with a little overshoot while the label unrolls, and the other tabs shift to make room.

Usage

BloomBarItem has no center item: any tab can be selected. The bar only shows icons until a tab is selected; the selected one switches to its selectedIcon on an accent orb and shows its label beside it. The rest of the time label is read out by TalkBack.

Imports

import com.nameisjayant.bottombar.bloom.BloomBarItem
import com.nameisjayant.bottombar.bloom.BloomBottomBar
import com.nameisjayant.bottombar.bloom.BloomBottomBarDefaults

BloomBottomBar.kt

val items = listOf(
    BloomBarItem("Home", Icons.Outlined.Home, Icons.Filled.Home),
    BloomBarItem("Wallet", Icons.Outlined.AccountBalanceWallet, Icons.Filled.AccountBalanceWallet),
    BloomBarItem("Analysis", Icons.Outlined.PieChart, Icons.Filled.PieChart),
    BloomBarItem("Profile", Icons.Outlined.Person, Icons.Filled.Person),
)

BloomBottomBar(
    items = items,
    selectedIndex = selectedIndex,
    onItemClick = { selectedIndex = it },
)

Sizing and behavior

The bar is a flat, full-width BarHeight (72dp) strip. Tabs are spread edge to edge inside ContentPadding (24dp each side), so they shift over as the selected label unrolls. The orb is OrbSize (40dp) and the label sits LabelSpacing (8dp) from it.

Colors

Colors come from BloomBottomBarDefaults.colors(darkTheme), lightColors(...) and darkColors(...). Start from either palette and override only what you need.

Color	Used for
`containerColor`	The bar
`orbColor`	The orb behind the selected icon
`orbContentColor`	The selected icon
`unselectedContentColor`	Icons of the other tabs
`labelColor`	The selected label (defaults to `orbColor`)

Theming

BloomBottomBar(
    items = items,
    selectedIndex = selectedIndex,
    onItemClick = { selectedIndex = it },
    // Follow your app's theme instead of the system one.
    colors = BloomBottomBarDefaults.colors(darkTheme = isDarkTheme),
)

API

The full signature of the composable and its item class:

com.nameisjayant.bottombar.bloom

fun BloomBottomBar(
    items: List<BloomBarItem>,
    selectedIndex: Int,
    onItemClick: (index: Int) -> Unit,
    modifier: Modifier = Modifier,
    colors: BloomBottomBarColors = BloomBottomBarDefaults.colors(),
    labelStyle: TextStyle = BloomBottomBarDefaults.LabelStyle,
    shadowElevation: Dp = 0.dp,
    windowInsets: WindowInsets = BloomBottomBarDefaults.windowInsets,
)

class BloomBarItem(
    val label: String,
    val icon: ImageVector,
    val selectedIcon: ImageVector = icon,
)