Infokarten
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Komponente Card enthält Inhalte und Aktionen zu einem einzelnen Thema.
Anatomie
Eine Kartenkomponente hat nur einen einzelnen Slot. Karten können Symbole, Bilder oder Labels enthalten und sind anpassbar.
Standardmäßig sind die Karten rechteckig, haben abgerundete Ecken und einen Hintergrund mit Farbverlauf. Legen Sie die maximale Höhe Ihrer Karte auf 60% fest, damit sie vollständig auf dem Bildschirm angezeigt wird, da runde Displays bis zu 20% des oberen und unteren Rands des Bildschirms beschneiden können.
Titelkarte
Verwenden Sie Titelkarten, um Informationen in einer App anzuzeigen, z. B. eine Nachricht. Titelkarten haben ein Layout mit drei Slots, das einen Titel, ein optionales Zeitfeld und den relevanten Inhalt enthält – entweder ein Bild oder ein Text.
App-Karte
Mit App-Karten können Sie interaktive Elemente aus mehreren Apps einblenden. App-Karten haben ein Layout mit fünf Bereichen. Es enthält ein App-Symbol, den Namen der App, den Zeitpunkt der Aktivität, einen Titel in irgendeiner Form und den relevanten Inhalt, entweder ein Bild oder Text.
Farbverlauf der Karten
Farbverlauf
Oben/links + 68 dp Abstand von links = 100% Oberfläche
Unten/rechts = 0% Oberfläche
Bildkarten-Overlay
Oben/Links + Abstand von 56 dp von T/L = 100% Oberfläche
Unten/rechts + 24 dp Abstand von rechts/rechts = 0% Oberfläche
(Farbverlauf-Overlays auf einem Bildhintergrund)
Größen
Kartenbreite
Für Karten ist standardmäßig die maximale Breite des Containers festgelegt.
Kartenhöhe
Die Kartenhöhe ist flexibel. Er wird durch den Inhalt der Komponenten bestimmt.
Bei runden Zifferblättern werden Karten, die höher als 60% der Bildschirmhöhe sind, abgeschnitten.
Nutzung
Adaptive Layouts
Titelkarte
Auf größeren Bildschirmen ist eine zusätzliche Textzeile für den Fließtext zulässig. Damit mehr vom Bild zu sehen ist, fügen Sie am unteren Rand einen vergrößerten Abstand von 24 dp hinzu.
Titelkarte mit Inline-Bild (ersetzt die Anzeigenfläche für den Haupttext)
Auf größeren Bildschirmen ändert sich das Seitenverhältnis des Bildes nicht und der Innenrand wird auf der rechten Seite angezeigt, damit die Karte nicht zu groß wird.
Karten mit zusätzlicher Anpassung
Karte mit einem Bildhintergrund
Für dieses Layout müssen Sie Anpassungen vornehmen.
Auf Bildkarten werden Inhalte zu einem einzelnen Thema mit einem Hintergrundbild angezeigt. Bildkarten können auch eigenständige Bilder anzeigen.
Der Abstand unten sollte auf 24 dp erhöht werden, damit mehr vom Hintergrundbild ohne Text zu sehen ist.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[null,null,["Zuletzt aktualisiert: 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"]]
