ボタンを作成する

ボタンを使用すると、ユーザーが定義したアクションをトリガーできます。ボタンには次の 5 種類があります。

タイプ

デザイン

目的

塗りつぶし

背景が単色で、テキストのコントラストが高い。

プライマリ アクション([送信]、[保存] など)の場合、シャドウ効果により、ボタンの重要性が強調されます。

Tonal

背景色はサーフェスに合わせて変化します。

主なアクションや重要なアクションに使用します。塗りつぶしボタンは視覚的な重みがあり、「カートに追加」や「ログイン」などのアクションに適しています。

高い

影が付いているので目立ちます。

主なアクションや重要なアクションに使用します。ボタンを目立たせるために、エレベーションを増やします。

アウトライン

塗りつぶしのない枠線が付いています。

重要だがプライマリではないアクションに使用します。アウトライン ボタンは、他のボタンと組み合わせて、[キャンセル] や [戻る] などの代替のサブアクションを示すのに適しています。

テキスト

背景や枠線のないテキスト。

ナビゲーション リンクや「詳細」や「詳細を表示」などのセカンダリ アクションなど、重要度の低いアクションの場合。

バージョンの互換性

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

依存関係

塗りつぶしボタンを作成する

塗りつぶしボタン コンポーネントは、基本的な Button コンポーザブルを使用します。デフォルトでは単色で塗りつぶされます。

結果

「filled」と書かれた紫色の背景の塗りつぶしボタン。
図 1. 塗りつぶしボタン。

塗りつぶしトーンのボタンを作成する

塗りつぶしトーンのボタン コンポーネントは、FilledTonalButton コンポーザブルを使用します。デフォルトでは、色調の色で塗りつぶされます。

結果

薄紫色の背景に「filled」と書かれたトーン ボタン。
図 2. 色調ボタン。

枠線付きのボタンを作成する

アウトライン付きボタン コンポーネントは、OutlinedButton コンポーザブルを使用します。デフォルトではアウトライン付きで表示されます。

結果

「Outlined」と書かれた暗い枠線付きの透明な輪郭付きボタン。
図 3. アウトライン ボタン。

エレベートされたボタンを作成する

エレベートされたボタン コンポーネントは、ElevatedButton コンポーザブルを使用します。デフォルトでは、エレベーション効果を表す影が付いており、影付きの枠線付きボタンとして表示されます。

結果

グレーの背景に「Elevated」と書かれた、エレベートされたボタン。
図 4. 浮き上がりボタン。

テキスト ボタンを作成する

テキストボタン コンポーネントは、TextButton コンポーザブルを使用します。クリックするまで、テキストとしてのみ表示されます。デフォルトでは、塗りつぶしや輪郭線はありません。

結果

「テキスト ボタン」と書かれたテキスト ボタン
図 5. テキストボタン。

要点

  • onClick: ユーザーがボタンを押したときに呼び出される関数。
  • enabled: false に設定すると、このパラメータによりボタンが使用できなくなり、無効になります。
  • colors: ボタンで使用される色を決定する ButtonColors のインスタンス。
  • contentPadding: ボタン内のパディング。

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

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

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

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

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