ボタンを使用すると、ユーザーが定義したアクションをトリガーできます。ボタンには次の 5 種類があります。
タイプ |
デザイン |
目的 |
---|---|---|
塗りつぶし | 背景が単色で、テキストのコントラストが高い。 |
プライマリ アクション([送信]、[保存] など)の場合、シャドウ効果により、ボタンの重要性が強調されます。 |
Tonal | 背景色はサーフェスに合わせて変化します。 |
主なアクションや重要なアクションに使用します。塗りつぶしボタンは視覚的な重みがあり、「カートに追加」や「ログイン」などのアクションに適しています。 |
高い | 影が付いているので目立ちます。 |
主なアクションや重要なアクションに使用します。ボタンを目立たせるために、エレベーションを増やします。 |
アウトライン | 塗りつぶしのない枠線が付いています。 |
重要だがプライマリではないアクションに使用します。アウトライン ボタンは、他のボタンと組み合わせて、[キャンセル] や [戻る] などの代替のサブアクションを示すのに適しています。 |
テキスト | 背景や枠線のないテキスト。 |
ナビゲーション リンクや「詳細」や「詳細を表示」などのセカンダリ アクションなど、重要度の低いアクションの場合。 |
バージョンの互換性
この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。
依存関係
塗りつぶしボタンを作成する
塗りつぶしボタン コンポーネントは、基本的な Button
コンポーザブルを使用します。デフォルトでは単色で塗りつぶされます。
結果
![「filled」と書かれた紫色の背景の塗りつぶしボタン。](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-filled.png?hl=ja)
塗りつぶしトーンのボタンを作成する
塗りつぶしトーンのボタン コンポーネントは、FilledTonalButton
コンポーザブルを使用します。デフォルトでは、色調の色で塗りつぶされます。
結果
![薄紫色の背景に「filled」と書かれたトーン ボタン。](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-tonal.png?hl=ja)
枠線付きのボタンを作成する
アウトライン付きボタン コンポーネントは、OutlinedButton
コンポーザブルを使用します。デフォルトではアウトライン付きで表示されます。
結果
![「Outlined」と書かれた暗い枠線付きの透明な輪郭付きボタン。](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-outlined.png?hl=ja)
エレベートされたボタンを作成する
エレベートされたボタン コンポーネントは、ElevatedButton
コンポーザブルを使用します。デフォルトでは、エレベーション効果を表す影が付いており、影付きの枠線付きボタンとして表示されます。
結果
![グレーの背景に「Elevated」と書かれた、エレベートされたボタン。](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-elevated.png?hl=ja)
テキスト ボタンを作成する
テキストボタン コンポーネントは、TextButton
コンポーザブルを使用します。クリックするまで、テキストとしてのみ表示されます。デフォルトでは、塗りつぶしや輪郭線はありません。
結果
![「テキスト ボタン」と書かれたテキスト ボタン](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-text.png?hl=ja)
要点
onClick
: ユーザーがボタンを押したときに呼び出される関数。enabled
: false に設定すると、このパラメータによりボタンが使用できなくなり、無効になります。colors
: ボタンで使用される色を決定するButtonColors
のインスタンス。contentPadding
: ボタン内のパディング。
このガイドを含むコレクション
このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=ja)