Jetpack Compose には、デジタル インターフェースを作成するための包括的なデザイン システムであるマテリアル デザインの実装が用意されています。コンポーズ可能な関数を使用して、マテリアル コンポーネントを実装できます。

アクション

ボタンは、UI のほとんどのアクションを促します。
詳細
フローティング アクション ボタン（FAB）は、ユーザーがメイン アクションを実行するのに役立ちます。
詳細
アイコンボタンを使用すると、ユーザーは 1 回のタップで簡単な操作を行えます。
詳細
分割ボタンを使用すると、ユーザーはオプションの選択、ビューの切り替え、要素の並べ替えを行うことができます。
詳細

コミュニケーション

バッジは、ナビゲーション アイテムやアイコンに通知、カウント、ステータス情報を表示します。
詳細
進行状況インジケーターは、不特定の待ち時間を表すか、プロセスの所要時間を表示します。
詳細
スナックバーには、アプリのプロセスに関する短い更新情報が画面の下部に表示されます。
詳細
ツールチップには短いラベルまたはメッセージが表示されます。
詳細

封じ込め

ボトムシートは、画面の下部に固定されたセカンダリ コンテンツを表示します。
詳細
カードには、1 つのテーマに関するコンテンツとアクションが表示されます。
詳細
カルーセルには、画面上でスクロールして表示 / 非表示を切り替えられるアイテムのコレクションが表示されます。
詳細
ダイアログは、ユーザーフローで重要なプロンプトを提供します。
詳細
分割線は、リストや他のコンテナ内のコンテンツをグループ化する細い線です。
詳細
リストは、テキストと画像の垂直方向に連続するインデックスです。
詳細
スキャフォールドは、複雑なユーザー インターフェースで UI のさまざまな部分をまとめる役割を果たします。
詳細

ナビゲーション

アプリバーは画面の上部に配置され、ユーザーのナビゲーションをサポートします。
詳細
ナビゲーション バーを使用すると、小さなデバイスで UI ビューを切り替えることができます。
詳細
ナビゲーション ドロワーを使用すると、大画面デバイスで UI ビューを切り替えることができます。
詳細
ナビゲーション レールを使用すると、中サイズのデバイスで UI ビューを切り替えることができます。
詳細
タブを使うことで、さまざまな画面やビューにまたがるコンテンツを整理できます。
詳細

選択

チェックボックスを使用すると、ユーザーはリストから 1 つ以上の項目を選択したり、項目のオンとオフを切り替えたりできます。
詳細
チップは、ユーザーが情報を入力したり、選択したり、コンテンツをフィルタしたり、アクションをトリガーしたりするのに役立ちます。
詳細
日付選択ツールを使用すると、日付または日付の範囲を選択できます。
詳細
メニューでは、一時的なサーフェス上に選択肢の一覧が表示されます。
詳細
ラジオボタンを使用すると、一連の選択肢の中から 1 つの選択肢を選択できます。
詳細
スライダーを使用すると、ユーザーは値の範囲から選択できます。
詳細
スイッチは、アイテムの選択をオンまたはオフに切り替えます。
詳細
タイム ピッカーを使用すると、ユーザーは特定の時間を選択して設定できます。
詳細

テキスト入力

検索では、キーワードやフレーズを入力して関連情報を取得できます。
詳細
テキスト フィールドを使用すると、ユーザーは UI にテキストを入力できます。
詳細
Compose で基本的なレイアウトを使用する方法について説明します。
詳細
文字列や画像などのリソースの管理方法を学習します。
詳細