このページは Cloud Translation API によって翻訳されました。

フローティングアクションボタン（FAB）を作成する

フローティングアクションボタン（FAB）は、ユーザーがアプリでメインアクションを実行できるようにする、強調度の高いボタンです。ユーザーが最もよく利用するパスである、1 つのフォーカスされたアクションを促進します。通常は画面の右下に固定されています。

FAB を使用する可能性がある次の 3 つのユースケースについて考えてみましょう。

新しいアイテムを作成する: メモ作成アプリでは、FAB を使用して新しいメモをすばやく作成できます。
新しい連絡先を追加: チャットアプリでは、FAB によって、ユーザーが会話に他のユーザーを追加できるインターフェースが開くことができます。
現在地を地図の中心に表示する: 地図インターフェースで、FAB を使用してユーザーの現在地を地図の中心に表示できます。

マテリアルデザインでは、FAB には次の 4 つのタイプがあります。

FAB: 通常サイズのフローティングアクションボタン。
小さい FAB: 小さいフローティングアクションボタン。
大規模な FAB: より大きなフローティングアクションボタン。
拡張 FAB: アイコン以外の要素を含むフローティングアクションボタン。

バージョンの互換性

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

依存関係

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.01.01')

基本的なフローティングアクションボタンを作成する

一般的なフローティングアクションボタンを作成するには、基本的な FloatingActionButton コンポーザブルを使用します。

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}FloatingActionButton.kt

結果

角が丸い標準のフローティングアクションボタン。シャドウと「追加」アイコンが付いています。 — **図 1.** フローティングアクションボタン。

小さなフローティングアクションボタンを作成する

小さなフローティングアクションボタンを作成するには、SmallFloatingActionButton コンポーザブルを使用します。次の例は、カスタムカラーを追加して、この操作を行う方法を示しています。

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}FloatingActionButton.kt

結果

「追加」アイコンを含む SmallFloatingActionButton の実装。 — **図 2.** 小さなフローティングアクションボタン。

大きなフローティングアクションボタンを作成する

大きなフローティングアクションボタンを作成するには、LargeFloatingActionButton コンポーザブルを使用します。このコンポーザブルは、ボタンが大きくなることを除けば、他の例と大きく異なりません。

以下は、大きな FAB の簡単な実装です。

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}FloatingActionButton.kt

結果

「追加」アイコンを含む LargeFloatingActionButton の実装。 — **図 3.** 大きなフローティングアクションボタン。

拡張フローティングアクションボタンを作成する

ExtendedFloatingActionButton コンポーザブルを使用すると、より複雑なフローティングアクションボタンを作成できます。FloatingActionButton との主な違いは、専用の icon パラメータと text パラメータがあることです。より複雑なコンテンツを含むボタンを作成して、コンテンツに合わせて適切にサイズを変更できます。

次のスニペットは、icon と text にサンプル値を渡して ExtendedFloatingActionButton を実装する方法を示しています。

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}FloatingActionButton.kt

結果

「拡張ボタン」というテキストと編集アイコンを表示する ExtendedFloatingActionButton の実装。 — **図 4.** テキストとアイコンの両方があるフローティングアクションボタン。

要点

マテリアルデザインに準拠したフローティングアクションボタンの作成に使用できるコンポーザブルはいくつかありますが、パラメータに大きな違いはありません。主なパラメータは次のとおりです。

onClick: ユーザーがボタンを押したときに呼び出される関数。
containerColor: ボタンの色。
contentColor: アイコンの色。

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

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

インタラクティブなコンポーネントを表示する

コンポーズ可能な関数を使用して、マテリアルデザインのデザインシステムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。

クイックガイドコレクション

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

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

よくある質問に移動フィードバックを送信する