Les applications doivent souvent afficher des données dans des conteneurs de style similaire, tels que des conteneurs contenant des informations sur les éléments d'une liste. Le système fournit l'API CardView pour vous permettre d'afficher des informations dans des cartes dont l'apparence est cohérente sur l'ensemble de la plate-forme. Par exemple, les cartes ont une élévation par défaut au-dessus de leur groupe de vues conteneur, de sorte que le système dessine des ombres en dessous. Les cartes permettent de réunir un groupe de vues tout en améliorant la cohérence visuelle du conteneur.
Image 1. Interface utilisateur d'une application basée sur des cartes.
Ajouter les dépendances
Le widget CardView fait partie d'AndroidX. Pour l'utiliser dans votre projet, ajoutez la dépendance suivante au fichier build.gradle du module de votre application :
Pour utiliser un CardView, ajoutez-le à votre fichier de mise en page. Utilisez-le comme groupe de vues pour contenir d'autres vues. Dans l'exemple suivant, CardView contient un ImageView et quelques TextViews pour afficher des informations à l'utilisateur :
L'extrait de code précédent produit un résultat semblable à celui-ci, en supposant que vous utilisiez la même image du logo Android :
Figure 2 : Exemple de base de mise en page basée sur CardView.
Dans cet exemple, la fiche est dessinée à l'écran avec une élévation par défaut, ce qui amène le système à dessiner une ombre en dessous. Vous pouvez fournir une élévation personnalisée pour une carte avec l'attribut card_view:cardElevation. Une carte à une altitude plus élevée a une ombre plus prononcée, tandis qu'une carte à une altitude plus basse a une ombre plus claire. CardView utilise une élévation réelle et des ombres dynamiques sur Android 5.0 (niveau d'API 21) et versions ultérieures.
Utilisez ces propriétés pour personnaliser l'apparence du widget CardView :
Pour définir le rayon d'angle dans vos mises en page, utilisez l'attribut card_view:cardCornerRadius.
Pour définir le rayon d'angle dans votre code, utilisez la méthode CardView.setRadius.
Pour définir la couleur d'arrière-plan d'une carte, utilisez l'attribut card_view:cardBackgroundColor.
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/08/27 (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/08/27 (UTC)."],[],[],null,["Try the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to work with layouts in Compose. \n[Card in Material 3 →](/develop/ui/compose/components/card) \n\n\u003cbr /\u003e\n\n| **Note:** For a better user experience, see [Material Design Cards](https://m3.material.io/components/cards/overview).\n\nApps often need to display data in similarly styled containers, such as\ncontainers that hold information about the items in a list. The system provides\nthe [`CardView`](/reference/androidx/cardview/widget/CardView) API for you to\nshow information in *cards* that have a consistent look across the platform. For\nexample, cards have a default elevation above their containing view group, so\nthe system draws shadows below them. Cards provide a way to contain a group of\nviews while providing a consistent style for the container.\n**Figure 1.** An app UI based on cards.\n\nAdd the dependencies\n\nThe `CardView` widget is part of [AndroidX](/jetpack/androidx). To use it in\nyour project, add the following dependency to your app module's `build.gradle`\nfile: \n\nGroovy \n\n```groovy\ndependencies {\n implementation \"androidx.cardview:cardview:1.0.0\"\n}\n```\n\nKotlin \n\n```kotlin\ndependencies {\n implementation(\"androidx.cardview:cardview:1.0.0\")\n}\n```\n\nCreate cards\n\nTo use a `CardView`, add it to your layout file. Use it as a view group to\ncontain other views. In the following example, the `CardView` contains an\n`ImageView` and a few `TextViews` to display some information to the user: \n\n \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n \u003candroidx.constraintlayout.widget.ConstraintLayout\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n android:padding=\"16dp\"\n android:background=\"#E0F7FA\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\u003e\n\n \u003candroidx.cardview.widget.CardView\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n app:layout_constraintBottom_toBottomOf=\"parent\"\n app:layout_constraintEnd_toEndOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n app:layout_constraintTop_toTopOf=\"parent\"\u003e\n\n \u003candroidx.constraintlayout.widget.ConstraintLayout\n android:padding=\"4dp\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\u003e\n\n \u003cImageView\n android:id=\"@+id/header_image\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"200dp\"\n android:src=\"@drawable/logo\"\n app:layout_constraintEnd_toEndOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n app:layout_constraintTop_toTopOf=\"parent\" /\u003e\n\n \u003cTextView\n android:id=\"@+id/title\"\n style=\"@style/TextAppearance.MaterialComponents.Headline3\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:layout_marginTop=\"4dp\"\n android:text=\"I'm a title\"\n app:layout_constraintEnd_toEndOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n app:layout_constraintTop_toBottomOf=\"@id/header_image\" /\u003e\n\n \u003cTextView\n android:id=\"@+id/subhead\"\n style=\"@style/TextAppearance.MaterialComponents.Subtitle2\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:layout_marginTop=\"4dp\"\n android:text=\"I'm a subhead\"\n app:layout_constraintEnd_toEndOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n app:layout_constraintTop_toBottomOf=\"@id/title\" /\u003e\n\n \u003cTextView\n android:id=\"@+id/body\"\n style=\"@style/TextAppearance.MaterialComponents.Body1\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:layout_marginTop=\"4dp\"\n android:text=\"I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"\n app:layout_constraintEnd_toEndOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n app:layout_constraintTop_toBottomOf=\"@id/subhead\" /\u003e\n \u003c/androidx.constraintlayout.widget.ConstraintLayout\u003e\n \u003c/androidx.cardview.widget.CardView\u003e\n \u003c/androidx.constraintlayout.widget.ConstraintLayout\u003e\n\nThe previous code snippet produces something similar to the following, assuming\nyou use the same Android logo image:\n**Figure 2.** A basic example of CardView-based layout.\n\nThe card in this example is drawn to the screen with a default elevation, which\ncauses the system to draw a shadow under it. You can provide a custom elevation\nfor a card with the `card_view:cardElevation` attribute. A card at a higher\nelevation has a more pronounced shadow, and a card at a lower elevation has a\nlighter shadow. `CardView` uses real elevation and dynamic shadows on Android\n5.0 (API level 21) and higher.\n\nUse these properties to customize the appearance of the `CardView` widget:\n\n- To set the corner radius in your layouts, use the `card_view:cardCornerRadius` attribute.\n- To set the corner radius in your code, use the `CardView.setRadius` method.\n- To set the background color of a card, use the `card_view:cardBackgroundColor` attribute."]]