Docs / Bottom bars / 17

ArchBottomBar

Flat bar where an accent arch rises from the bottom edge behind the selected icon, sinking and gliding to the next tab.

• Edge to edge
• Any tab
• Icon only

Preview

A flat bar of icon-only tabs. An accent arch, flat at the bottom and round on top, rises out of the bottom edge behind the selected icon, which fills in inside it. On a new selection the arch sinks, glides to the new tab and springs back up.

Usage

ArchBarItem has no center item: any tab can be selected, and every slot gets the same width. The bar only shows icons; the selected one switches to its selectedIcon inside the arch. label is read out by TalkBack.

import com.nameisjayant.bottombar.arch.ArchBarItem
import com.nameisjayant.bottombar.arch.ArchBottomBar
import com.nameisjayant.bottombar.arch.ArchBottomBarDefaults

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

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

Sizing and behavior

The bar is BarHeight (64dp) tall and spans the full width. The arch is ArchWidth (46dp) wide and stands ArchHeight (50dp) up from the bottom edge, its top a half circle. Unselected icons are IconSize (24dp); the selected one shrinks to SelectedIconSize (20dp) and drops into the middle of the arch's rounded top. When the selection changes, the arch sinks to a stub, glides to the new tab and springs back up, and each icon tints and fills in as the arch reaches it (mirrored in right-to-left layouts). The outline is a plain rectangle, so shadowElevation works on every API level.

Colors

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

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

API

The full signature of the composable and its item class:

fun ArchBottomBar(
    items: List<ArchBarItem>,
    selectedIndex: Int,
    onItemClick: (index: Int) -> Unit,
    modifier: Modifier = Modifier,
    colors: ArchBottomBarColors = ArchBottomBarDefaults.colors(),
    shadowElevation: Dp = 0.dp,
    windowInsets: WindowInsets = ArchBottomBarDefaults.windowInsets,
)

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