カード
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。

Card コンポーネントには、1 つの主題に関するコンテンツとアクションが含まれます。
構造
カード コンポーネントにはスロットが 1 つしかありません。カードには、アイコン、画像、ラベルを含めることができます。カードはカスタマイズ可能です。
デフォルトでは、カードは角が丸く、背景がグラデーションの長方形です。円形ディスプレイでは、画面の上部および下部が最大で 20% 切り取られるため、カードの最大の高さを 60% にしてカードが画面に完全に表示されるようにします。
タイトルカード
タイトルカードは、メッセージなどのアプリ内情報を表示する場合に使用します。タイトルカードは 3 スロット レイアウトで、タイトル、時間フィールド(省略可)、関連コンテンツ(画像またはテキスト)が表示されます。
アプリカード
アプリカードを使用すると、複数のアプリからのインタラクティブな要素を表示できます。アプリカードは 5 スロット レイアウトで、アプリのアイコン、アプリ名、アクティビティが発生した時刻、なんらかのタイトル、関連するコンテンツ(画像またはテキスト)が表示されます。
カードのグラデーション
カード グラデーション
上/左 + 左からの 68 dp のパディング = サーフェスの 100%
下/右 = サーフェス 0%
画像カードのオーバーレイ
上 / 左 + T/L からの 56 dp のパディング = サーフェスの 100%
下 / 右 + 右下 + 24 dp のパディング = 0% サーフェス
(画像の背景上のグラデーション オーバーレイ)
サイズ
カードの幅
カードの幅のデフォルトは、コンテナの最大幅です。
カードの高さ
カードの高さは自由です。コンポーネントのコンテンツによって決まります。
円形のウォッチフェイスでは、画面の高さの 60% を超えるカードは切り取られます。
Usage

アダプティブ レイアウト

タイトルカード
大画面では、本文用に 1 行追加することができます。画像をさらに大きく表示するために、拡大した 24 dp のパディングを下部に追加します。

インライン画像付き TitleCard(本文のコピースロットの置き換え)
大画面では画像のアスペクト比は変わりません。また、カードの高さが大きくならないようにするため、右側にパディングが追加されます。

カスタマイズできるカード
画像背景のカード
このレイアウトを実現するには、カスタマイズが必要です。
画像カードには、1 つのトピックに関連するコンテンツが背景画像で表示されます。画像カードには単体の画像も表示できます。
テキストのない背景画像を多く表示するには、下部のパディングを 24 dp に増やすことをおすすめします。

このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# Cards\n\nThe [Card](/reference/kotlin/androidx/wear/compose/material/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component contains content and actions about a single subject.\n\nAnatomy\n-------\n\nA card component only has a single slot. Cards can contain icons, images or labels, are customizable.\n\nBy default, cards are rectangular with rounded corners and a gradient background. Set the maximum height of your card to 60% to ensure that it's fully displayed on the screen because circular displays can clip up to 20% of the top and bottom of the screen.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Title Card**\n\nUse [Title cards](/reference/kotlin/androidx/wear/compose/material/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show information within an application, such as a message. Title cards have a three-slot layout which includes a title, an optional time field, and the relevant content, which is either an image or text. \n**App Card**\n\nUse [App cards](/reference/kotlin/androidx/wear/compose/material/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show interactive elements from multiple applications. App cards have a five-slot layout that includes an application icon, the application name, the time that the activity occurred, a title of some sort and the relevant content, which is either an image or text.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCards gradient\n--------------\n\n**Card Gradient**\n\nTop/Left + 68dp padding from Left = 100% Surface \n\nBottom/Right = 0% Surface\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Card Overlay**\n\nTop/Left + 56 dp padding from T/L = 100% Surface \n\nBottom/Right + 24 dp padding from B/R = 0% Surface \n\n(Gradient overlays on a image background)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\n**Card width**\n\nCards default to the maximum width of the container.\n\n\u003cbr /\u003e\n\n**Card height**\n\n\u003cbr /\u003e\n\nCard height is flexible. It is determined by the components' content.\n\nOn round watch faces, cards that are taller than 60% of the height of the screens are clipped.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nAdaptive layouts\n----------------\n\n**TitleCard**\n\nOn larger screens we allow an extra line of text for body copy. And in order to display more of the image, add an enlarged 24 dp padding at the bottom.\n\n**TitleCard with in-line image (replacing the body copy slot)**\n\nOn larger screens, the image doesn't change its aspect ratio and has the padding on the right in order to not make the height of the card too big.\n\n### Cards with additional customization\n\n**Card with an image background** \nIn order to achieve this layout you will need customization. \n\n\nImage cards display content relating to a single topic with a background image. Image cards can also display standalone images. \n\n\nIt is recommended that the bottom padding is increased to 24 dp in order to display more of the background image without text over it.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]