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
BottomAppBarサンプル（タイプ1）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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}）"
            )
        }
    }
}
BottomAppBarサンプル（タイプ2）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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
BottomAppBarの引数（タイプ1）（AppBar.ktより抜粋）
1
2
3
4
5
6
7
8
9
10
@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
) { ... }
BottomAppBarの引数（タイプ2）（AppBar.ktより抜粋）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@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に入るので、左寄り横並びの配置になります。

タイプ1（AppBar.ktより抜粋）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@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スロットを新たに設けています。

タイプ2（AppBar.ktより抜粋）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@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の半透明色でバーが覆われます。

半透明色でオーバーレイ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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修飾子を使って影を付けることが可能です。

影付きのバー
1
2
3
4
5
BottomAppBar(
    modifier = Modifier.shadow(elevation = 10.dp),
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    contentColor = MaterialTheme.colorScheme.primary,
) { ... }

影付きのバー

スポンサーリンク

インセットの働き

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

インセットの働き
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 ...
続きを読む
スポンサーリンク