Karty
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Komponent Karta zawiera treści i działania dotyczące jednego tematu.
Anatomia
Element karty ma tylko 1 gniazdo. Karty mogą zawierać ikony, obrazy lub etykiety i można je dostosować.
Domyślnie karty są prostokątne z zaokrąglonymi rogami i gradientowym tłem. Ustaw maksymalną wysokość karty na 60%, aby była widoczna w całości na ekranie, ponieważ okrągłe wyświetlacze mogą przycinać do 20% górnej i dolnej części ekranu.
Karta tytułowa
Na kartach tytułowych możesz wyświetlać informacje w aplikacji, np. treść wiadomości. Karty tytułowe mają układ 3-przedziałowy obejmujący tytuł, opcjonalne pole godziny i odpowiednią treść, czyli obraz lub tekst.
Karta aplikacji
Użyj kart aplikacji, aby pokazać interaktywne elementy z różnych aplikacji. Karty aplikacji mają układ pięcioosobowy z ikoną aplikacji, nazwą aplikacji, czasem wykonania działania, pewnym tytułem i odpowiednią treścią (obrazem lub tekstem).
Gradient kart
Gradient karty
Góra/lewa + dopełnienie 68 dp od lewej = 100% powierzchni
Dolny/prawy = 0% powierzchni
Nakładka karty graficznej
Góra/lewa + 56 dp od T/L = 100% powierzchni
Dół/prawo + dopełnienie 24 dp od C/R = 0% powierzchni
(Nakładki gradientowe na tle obrazu)
Rozmiary
Szerokość karty
Domyślnie karty mają maksymalną szerokość kontenera.
Wysokość karty
Wysokość karty jest automatyczna. Jest on określany na podstawie zawartości komponentów.
Na okrągłych tarczach zegarka karty, które mają ponad 60% wysokości ekranu, są obcięte.
Wykorzystanie
Adaptacyjne układy
Karta tytułowa
Na większych ekranach zezwalamy na dodatkowy wiersz tekstu w treści. Aby wyświetlić większy fragment zdjęcia, dodaj u dołu powiększone dopełnienie o wysokości 24 dp.
TitleCard z obrazem w tekście (zastępuje miejsce na treść strony)
Na większych ekranach obraz nie zmienia swojego formatu obrazu. Ma też dopełnienie po prawej stronie, dzięki czemu wysokość karty nie jest zbyt duża.
Karty z dodatkowymi możliwościami personalizacji
Karta z obrazem w tle
Aby uzyskać taki układ, należy dostosować go.
Karty graficzne wyświetlają treści związane z jednym tematem na obrazie tła. Karty obrazów mogą też wyświetlać samodzielne obrazy.
Zalecamy zwiększenie dopełnienia u dołu do 24 dp, aby umożliwić wyświetlenie większej części obrazu tła bez tekstu.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 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"]]
