Compose UI：BottomAppBar

投稿日: 　更新日:

Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。

そのライブラリ中のBottomAppBarについて、構成や使用方法などをまとめます。

※環境：Android Studio Koala | 2024.1.1
　　　　Kotlin 1.9.0
　　　　Compose Compiler 1.5.1
　　　　androidx.compose.material3:material3 1.1.1

スポンサーリンク

UIの概要

BottomAppBarはアプリ画面の下部に表示される帯状のUIです。

基本は、Scaffoldに組み込んで使用します。
※Scaffoldについては「Compose UI：Scaffold」を参照

BottomAppBarはマテリアルデザインの指標に準拠しています。

※詳細は「マテリアルデザイン：Bottom app bar」を参照してください。

タイプ1タイプ2
    Scaffold(
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        }
    ) { innerPadding ->
        Column(
            modifier = androidx.compose.ui.Modifier
                .padding(innerPadding)
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            for(i in 0..15) {
                Text(
                    modifier = Modifier.padding(start = 8.dp, end = 8.dp),
                    text = "スクロールアイテム（${i}）"
                )
            }
        }
    }

    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* クリック時の処理 */ }) {
                        Icon(
                            imageVector = Icons.Filled.Home,
                            contentDescription = "Home"
                        )
                    }
                    IconButton(onClick = { /* クリック時の処理 */ }) {
                        Icon(
                            imageVector = Icons.Filled.Edit,
                            contentDescription = "Edit"
                        )
                    }
                    IconButton(onClick = { /* クリック時の処理 */ }) {
                        Icon(
                            imageVector = Icons.Filled.Search,
                            contentDescription = "Search"
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* クリック時の処理 */ },
                        containerColor = MaterialTheme.colorScheme.primary,
                        contentColor = MaterialTheme.colorScheme.onPrimary
                    ) {
                        Icon(Icons.Default.Add, contentDescription = "Add")
                    }
                },
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary
            )
        }
    ) { innerPadding ->
        Column(
            modifier = androidx.compose.ui.Modifier
                .padding(innerPadding)
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            for(i in 0..15) {
                Text(
                    modifier = Modifier.padding(start = 8.dp, end = 8.dp),
                    text = "スクロールアイテム（${i}）"
                )
            }
        }
    }

BottomAppBarの概要

スポンサーリンク

関数の引数

BottomAppBarの状態（装飾、演出など）は、引数により指定できます。

タイプ1タイプ2
@Composable
fun BottomAppBar(
    modifier: Modifier = Modifier,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
) { ... }

@Composable
fun BottomAppBar(
    actions: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    floatingActionButton: @Composable (() -> Unit)? = null,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
) = BottomAppBar(
    modifier = modifier,
    containerColor = containerColor,
    contentColor = contentColor,
    tonalElevation = tonalElevation,
    windowInsets = windowInsets,
    contentPadding = contentPadding
) { ... }
引数概要
modifierModifierUI全般のCompose修飾子
containerColorColorコンテナ（バー背景）の色
contentColorColorコンテンツの色
tonalElevationDp重ね合わせる半透明色の色合い
contentPaddingPaddingValuesコンテンツ周りの余白
windowInsetsWindowInsets インセット（はめ込み位置）
content
（タイプ1）		@Composable RowScope.() -> Unitコンテンツのスロット
actions
（タイプ2）		@Composable RowScope.() -> Unitアクションのスロット
floatingActionButton
（タイプ2）		@Composable (() -> Unit)?フローティングボタンのスロット
スポンサーリンク

関数の構成

BottomAppBarはSurfaceとRowを重ね合わせた構成になっています。

BottomAppBarの構成

 タイプ1 

content（バーに表示する文字・アイコン）はRowに入るので、左寄り横並びの配置になります。

@Composable
fun BottomAppBar(
    ...
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = containerColor,
        contentColor = contentColor,
        tonalElevation = tonalElevation,
        shape = BottomAppBarTokens.ContainerShape.toShape(),
        modifier = modifier
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .windowInsetsPadding(windowInsets)
                .height(BottomAppBarTokens.ContainerHeight)
                .padding(contentPadding),
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = Alignment.CenterVertically,
            content = content
        )
    }
}
 タイプ2 

タイプ2はタイプ1の派生です。

タイプ1のcontentに、actionsとfloatingActionButtonスロットを新たに設けています。

@Composable
fun BottomAppBar(	// タイプ2
    actions: @Composable RowScope.() -> Unit,
    ... ,
    floatingActionButton: @Composable (() -> Unit)? = null,
    ...
) = BottomAppBar(	// タイプ1
    ...
) {					// タイプ1のcontentスロット
    actions()
    if (floatingActionButton != null) {
        Spacer(Modifier.weight(1f, true))
        Box(
            Modifier
                .fillMaxHeight()
                .padding(
                    top = FABVerticalPadding,
                    end = FABHorizontalPadding
                ),
            contentAlignment = Alignment.TopStart
        ) {
            floatingActionButton()
        }
    }
}

actionsスロットはRowなので、左寄り横並びの配置になります。また、floatingActionButtonスロットはBoxに入り、右寄りの配置（Spacerの効果）になります。

スポンサーリンク

半透明色でオーバーレイ

コンテナ色がsurfaceの時、tonalElevationに連動したcontentColorの半透明色でバーが覆われます。

    Scaffold(
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.surface,
                tonalElevation = 10.dp,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        }
    ) { innerPadding -> ... }

半透明色でオーバーレイ

この機能が、どのような場面で利用されるのか、不明です。利用価値はあるのでしょうか？！

影付きのバー

Viewシステムのアプリケーションバーは影が付いていました。しかし、Jetpack composeにおけるマテリアルデザインのアプリケーションバーは影が付きません。

必要であれば、Modifier修飾子を使って影を付けることが可能です。

            BottomAppBar(
                modifier = Modifier.shadow(elevation = 10.dp),
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) { ... }

影付きのバー

スポンサーリンク

インセットの働き

インセットはナビゲーションバーとアプリケーションバーの重なりを避ける働きをします。

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    bottomBar = {
                        BottomAppBar(
                            containerColor = MaterialTheme.colorScheme.primaryContainer,
                            contentColor = MaterialTheme.colorScheme.primary,
    //                        windowInsets = BottomAppBarDefaults.windowInsets // デフォルト
                            windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp)
                        ) {
                            Text(
                                modifier = Modifier.fillMaxWidth(),
                                textAlign = TextAlign.Center,
                                text = "Bottom app bar",
                            )
                        }
                    }
                ) { innerPadding -> ... }
            }
        }
    }

インセットの働き

スポンサーリンク
ページのトップへ

関連記事：

Compose UI：Button
ButtonCompose ButtonCompose UIInteractiononClickRipple Effectインタラクションデザインリップルエフェクト
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のButtonについて、構成や使用方法などをまとめます。 ※環境：Android Studio Flamingo | 2022.2.1 　　　：androidx.compose.material3:material3:1.1.1 　　　：androidx.compose.ui:ui:1.4.3 ...
続きを読む
Compose UI：Surface
Color SystemCompose SurfaceCompose UISurfaceカラーシステムデザインマテリアルデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のSurfaceについて、構成や使用方法などをまとめます。 ※環境：Android Studio Flamingo | 2022.2.1 　　　：androidx.compose.material3:material3:1.1.1 　　　：androidx.compose.ui:ui:1.4.3 ...
続きを読む
Compose UI：RadioButton
Compose UIonClickRadioButtonデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のRadioButtonについて、構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 　　　　Kotlin 1.8.10 　　　　Compose Compiler 1.4.3 ...
続きを読む
Compose UI：Column/Row/Box（コンテナ型のUI）
BoxColumnCompose BoxCompose ColumnCompose RowCompose UIRowコンテナ型デザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中にUI要素を格納する機能をもつコンテナ型のUIがあります。 Column/Row/Boxがコンテナ型のUIです。構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Patch 1 　　　　Kotlin 1.8.10 　　　　Compose Compiler 1.4.3 ...
続きを読む
Compose UI：Image
BlendModeColorFilterCompose ImageCompose UIContentScaleImagePainterデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のImageについて、構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Patch 2 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation 1.5.0 ...
続きを読む
Compose UI：Divider
Compose UIDividerデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のDividerについて、構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Patch 2 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.material3:material3 1.1.1 ...
続きを読む
Compose UI：Spacer
CanvasCompose UIDividerSpacerデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のSpacerについて、構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Patch 2 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation 1.5.0 ...
続きを読む
Compose UI：Slider
Compose SliderCompose UIRangeSliderSliderデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のSliderについて、構成や使用方法などをまとめます。 ※環境：Android Studio Hedgehog | 2023.1.1 Patch 2 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.material3:material3 1.1.1 ...
続きを読む
Compose UI：Scaffold
@PreviewBottomAppBarCompose UIFloatingActionButtonMaterial DesignScaffoldSnackbarTopAppBarスロットデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のScaffoldについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.material3:material3 1.1.1 ...
続きを読む
Compose UI：TopAppBar
Compose UIMaterial DesignScaffoldTopAppBarスロットデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のTopAppBarについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.material3:material3 1.1.1 ...
続きを読む
Compose UI：FloatingActionButton
Compose UIFloatingActionButtonMaterial DesignScaffoldスロットデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のFloatingActionButtonについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.material3:material3 1.1.1 ...
続きを読む
Compose UI：Snackbar
Compose UIMaterial DesignScaffoldSnackbarSnackbarHostSnackbarHostStateスロットデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のSnackbarについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.material3:material3 1.1.1 ...
続きを読む
Compose UI：LazyColumn
Compose LazyColumnCompose UIFlingBehaviorLazyColumnLazyLayoutLazyListScope DSLLazyListStateデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のLazyColumnについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation:foundation 1.6.8 ...
続きを読む
Compose UI：LazyRow
Compose LazyRowCompose UIFlingBehaviorLazyLayoutLazyListScope DSLLazyListStateLazyRowデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のLazyRowについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Patch 1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation:foundation 1.6.8 ...
続きを読む
スポンサーリンク