ボトム アプリバーを表示する

ユーザーがアプリ内の機能に移動してアクセスできるように、ボトム アプリバーを作成します。このガイダンスに沿って、BottomAppBar コンポーザブルを使用してボトム アプリバーをアプリに追加します。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

ボトム アプリバーを作成する

次のコードを使用して、4 つのアイコンボタンとフローティング アクション ボタンを含む下部アプリバーを作成します。

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

コードに関する主なポイント

  • bottomBar が設定された外側の Scaffold。
  • アクションのリストを含む bottomBar 実装。
  • 画像とコンテンツの説明テキストの Icon を含む IconButton の実装であるアクション。それぞれに、これらのアクションを実行する onClick ラムダが含まれています。

次の主なパラメータにコンポーザブルを渡すことができます。

  • actions: バーの左側に表示される一連のアイコン。通常、これらは特定の画面の主要なアクションまたはナビゲーション アイテムです。
  • floatingActionButton: バーの右側に表示されるフローティング アクション ボタン。

結果

ボトム アプリバーの例
図 1. ボトム アプリバーの例。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

標準化されたプラットフォームを使用して複雑なユーザー インターフェースを作成する方法を学びます。スキャフォールドは UI のさまざまな部分をまとめ、アプリに統一感のある外観と操作性をもたらします。
クイックガイド コレクション
コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。
クイックガイド コレクション

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。
よくある質問に移動 フィードバックを送信する