Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le composable Card se comporte comme un conteneur Material Design pour votre interface utilisateur.
Les cartes présentent un seul élément de contenu cohérent, par exemple:
Un produit dans une application d'achat
Un reportage dans une application d'actualités
Un message dans une application de communication
Ce qui différencie Card des autres conteneurs est le fait qu'il ne présente qu'un seul élément de contenu. Par exemple, Scaffold fournit une structure générale pour un écran entier. Une carte est un élément d'interface utilisateur plus petit à l'intérieur d'une mise en page conséquente, tandis qu'un composant de mise en page comme Column ou Row offre une API plus simple et plus générique.
Cette section vous explique comment implémenter quatre types de cartes:
Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.
Dépendances
Créer une fiche de base
Card se comporte comme les autres conteneurs dans Compose. Vous déclarez son contenu en appelant d'autres composables dans ce conteneur. Par exemple, observez comment Card contient un appel à Text dans le court exemple suivant :
Créer une fiche remplie
La clé ici est d'utiliser la propriété colors afin de changer la couleur de remplissage:
Résultats
Figure 1. Exemple d'une carte pleine.
Créer une fiche surélevée
L'extrait de code suivant montre comment implémenter une carte surélevée. Utilisez le composable ElevatedCard prévu à cet effet.
Vous pouvez utiliser la propriété elevation afin de contrôler l'apparence de l'élévation et de l'ombre correspondante.
Résultats
Figure 2. Exemple d'une carte surélevée.
Créer une fiche avec un contour
Voici un exemple d'une carte avec contours. Utilisez le composable OutlinedCard prévu à cet effet.
Résultats
Figure 3. Exemple d'une carte avec contours.
Points essentiels
Consultez la documentation de référence pour la définition de l'API de Card. Elle définit plusieurs paramètres que vous pouvez utiliser pour personnaliser l'apparence et le comportement du composant.
Voici quelques paramètres clés:
elevation: ajoute une ombre au composant, le faisant apparaître comme surélevé par rapport à l'arrière-plan.
colors : utilise le type CardColors pour définir la couleur par défaut du conteneur et des enfants.
enabled : si ce paramètre indique false, la carte apparaît comme désactivée et ne répond pas aux entrées utilisateurs.
onClick : en général, une Card n'accepte pas les événements de clic. Ainsi, la première surcharge à noter est celle qui définit un paramètre onClick. Utilisez cette surcharge lorsque vous souhaitez que votre implémentation de Card réponde aux clics de l'utilisateur.
Les cartes ne sont pas dotées d'actions "faire défiler" et "ignorer" inhérentes, mais elles peuvent être intégrées à des composables offrant ces fonctionnalités. Par exemple, pour implémenter la fonctionnalité "balayer pour ignorer" sur une carte, intégrez-la avec le composable SwipeToDismiss. Pour l'intégrer avec le défilement, utilisez des modificateurs de défilement comme verticalScroll. Pour en savoir plus, consultez la documentation sur Scroll.
Collections contenant ce guide
Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:
Afficher des composants interactifs
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/02/06 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/02/06 (UTC)."],[],[],null,["# Create a card as a container\n\n\u003cbr /\u003e\n\nThe [`Card`](/reference/kotlin/androidx/compose/material3/package-summary#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) composable acts as a Material Design container for your UI.\nCards present a single coherent piece of content, such as:\n\n- A product in a shopping app.\n- A news story in a news app.\n- A message in a communications app.\n\nThe focus on portraying a single piece of content distinguishes\n`Card` from other containers. For example, `Scaffold` provides general structure\nto a whole screen. Card is a smaller UI element inside a larger\nlayout, whereas a layout component such as `Column` or `Row` provides a simpler\nand more generic API.\n\nThis topic shows you how to implement four types of cards:\n\n- [Basic](#basic)\n- [Filled](#filled)\n- [Elevated](#elevated)\n- [Outlined](#outlined)\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a basic card\n-------------------\n\n`Card` behaves much like other containers in Compose. You declare its content by\ncalling other composables within it. For example, consider how `Card` contains a\ncall to `Text` in the following minimal example:\n\n @Composable\n fun CardMinimalExample() {\n Card() {\n Text(text = \"Hello, world!\")\n }\n }\n\n| **Note:** By default, a `Card` wraps its content in a `Column` composable, placing each item inside the card beneath one another.\n\nCreate a filled card\n--------------------\n\nThe key here is the use of the `colors` property to change the filled\ncolor:\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun FilledCardExample() {\n Card(\n colors = CardDefaults.cardColors(\n containerColor = MaterialTheme.colorScheme.surfaceVariant,\n ),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Filled\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L106-L122\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 1.** Example of a filled card.\n\nCreate an elevated card\n-----------------------\n\nThe following snippet demonstrates how to implement an elevated card. Use the\ndedicated [`ElevatedCard`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,kotlin.Function1)) composable.\n\nYou can use the `elevation` property to control the appearance of elevation and\nthe resulting shadow.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun ElevatedCardExample() {\n ElevatedCard(\n elevation = CardDefaults.cardElevation(\n defaultElevation = 6.dp\n ),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Elevated\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L85-L101\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 2.** Example of an elevated card.\n\nCreate an outlined card\n-----------------------\n\nThe following is an example of an outlined card. Use the dedicated\n[`OutlinedCard`](/reference/kotlin/androidx/compose/material3/package-summary#OutlinedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) composable.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun OutlinedCardExample() {\n OutlinedCard(\n colors = CardDefaults.cardColors(\n containerColor = MaterialTheme.colorScheme.surface,\n ),\n border = BorderStroke(1.dp, Color.Black),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Outlined\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L127-L144\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 3.** Example of an outlined card.\n\nKey points\n----------\n\nSee the [reference](/reference/kotlin/androidx/compose/material3/package-summary#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) for the API definition of `Card`. It defines several\nparameters that you can use to customize the appearance and behavior of the\ncomponent.\n\nSome key parameters include:\n\n- **`elevation`**: Adds a shadow to the component that makes it look elevated above the background.\n- **`colors`** : Uses the `CardColors` type to set the default color of both the container and any children.\n- **`enabled`** : If you pass `false` for this parameter, the card appears as disabled and does not respond to user input.\n- **`onClick`** : Ordinarily, a `Card` does not accept click events. As such, the primary overload you would like to note is that which defines an `onClick` parameter. Use this overload when you want your implementation of `Card` to respond to clicks from the user.\n\n| **Beta:** The `Card` overload that defines the `onClick` parameter is experimental.\n\nCards don't come with inherent scroll or dismiss actions, but can integrate into\ncomposables offering these features. For example, to implement swipe to dismiss\non a card, integrate it with the [`SwipeToDismiss`](/reference/kotlin/androidx/compose/material3/package-summary#SwipeToDismiss(androidx.compose.material3.DismissState,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.collections.Set)) composable. To integrate\nwith scroll, use scroll modifiers such as [`verticalScroll`](/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)). See the [`Scroll`\ndocumentation](/develop/ui/compose/touch-input/pointer-input/scroll) for more information.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
