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

フローティング アクション ボタン（FAB）は、ユーザーがアプリでメイン アクションを実行できる強調度の高いボタンです。ユーザーが最もよく利用する経路となる単一の操作を促進し、通常は画面の右下に固定されています。

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

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

マテリアル デザインには、次の 4 種類の FAB があります。

  • FAB: 通常サイズのフローティング アクション ボタン。
  • スモール FAB: 小さめのフローティング アクション ボタン。
  • 大規模な FAB: 大きめのフローティング アクション ボタン。
  • 拡張 FAB: アイコンだけでなく、テキストも含むフローティング アクション ボタン。

バージョンの互換性

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

依存関係

Kotlin

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

Groovy

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

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

一般的なフローティング アクション ボタンを作成するには、基本的な 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 パラメータがあることです。これを使用すると、コンテンツに合わせて適切にスケーリングされる、より複雑なコンテンツを含むボタンを作成できます。

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

@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 コンポーネントを簡単に作成する方法を学びます。
クイック ガイド集

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

よくある質問のページでクイック ガイドを確認するか、お問い合わせください。
よくある質問に移動 フィードバックを送信する