Docs / Bottom bars / 03

CradleBottomBar

Flat bar whose top edge dips into a notch that cradles a raised orb. Icons fill in on selection.

Edge to edge
Center orb
Icon + label

Preview

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

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

A flat bar whose top edge dips into a smooth notch that cradles a raised orb. Icons and labels always show; the selected tab fills in and turns the accent color, and a ring ripples out of the orb when it is selected.

Usage

CradleBarItem works the same way: the middle item becomes the orb sitting in the notch, so pass an odd number of items. Every side tab shows its icon and label; the selected one switches to its selectedIcon and takes selectedContentColor.

Imports

import com.nameisjayant.bottombar.cradle.CradleBarItem
import com.nameisjayant.bottombar.cradle.CradleBottomBar
import com.nameisjayant.bottombar.cradle.CradleBottomBarDefaults

CradleBottomBar.kt

val items = listOf(
    CradleBarItem("Home", Icons.Outlined.Home, Icons.Filled.Home),
    CradleBarItem("Search", Icons.Outlined.Search, Icons.Filled.Search),
    CradleBarItem("Store", Icons.Outlined.Storefront, Icons.Filled.Storefront), // the orb
    CradleBarItem("Cart", Icons.Outlined.ShoppingCart, Icons.Filled.ShoppingCart),
    CradleBarItem("Profile", Icons.Outlined.Person, Icons.Filled.Person),
)

CradleBottomBar(
    items = items,
    selectedIndex = selectedIndex,
    onItemClick = { selectedIndex = it },
    shadowElevation = 8.dp,
)

Sizing and behavior

The bar is BarHeight (72dp) tall and the orb rises OrbOverhang (34dp) above it, all inside the bar's own bounds. The notch is shaped by OrbSize, OrbLift, NotchGap and NotchShoulderRadius. As with Dome, shadowElevation defaults to 0.dp and needs API 30+ because of the concave outline.

Colors

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

Color	Used for
`containerColor`	The bar background
`selectedContentColor`	Icon and label of the selected side tab
`unselectedContentColor`	Icons of the other side tabs
`unselectedLabelColor`	Labels of the other side tabs
`orbColor`	Fill of the center orb, and the ring that ripples out when it is selected
`orbContentColor`	Icon inside the orb

Theming

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

API

The full signature of the composable and its item class:

com.nameisjayant.bottombar.cradle

fun CradleBottomBar(
    items: List<CradleBarItem>,
    selectedIndex: Int,
    onItemClick: (index: Int) -> Unit,
    modifier: Modifier = Modifier,
    colors: CradleBottomBarColors = CradleBottomBarDefaults.colors(),
    labelStyle: TextStyle = CradleBottomBarDefaults.LabelStyle,
    shadowElevation: Dp = 0.dp,
    windowInsets: WindowInsets = CradleBottomBarDefaults.windowInsets,
)

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