Les applications ont souvent besoin d’afficher des données dans des conteneurs de style similaire. Ces conteneurs sont souvent utilisés dans les listes pour contenir les informations de chaque élément. Le système fournit l’APICardView
comme un moyen facile pour vous d’afficher des informations à l’intérieur de cartes qui ont un aspect cohérent à travers la plate-forme. Ces cartes ont une élévation par défaut au-dessus du groupe de vues qui les contient, de sorte que le système dessine des ombres en dessous d’elles. Les cartes constituent un moyen facile de contenir un groupe de vues tout en fournissant un style cohérent pour le conteneur.
Figure 1. Exemples de 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
de votre module d’application :
dependencies { implementation "androidx.cardview:cardview:1.0.0"}
Créer des cartes
Pour utiliser le CardView
, vous devez l’ajouter à votre layoutfile. Utilisez-le comme un groupe de vues pour contenir d’autres vues. Dans cet exemple, la CardView
contient une seule TextView
pour afficher certaines informations à l’utilisateur.
Les cartes sont dessinées à l’écran avec une élévation par défaut, ce qui amène le système à dessiner une ombre en dessous d’elles. Vous pouvez fournir une élévation personnalisée pour une carte avec l’attributcard_view:cardElevation
. Cela dessinera une ombre plus prononcée avec une élévation plus grande, et une élévation plus faible se traduira par une ombre plus légère.CardView
utilise une élévation réelle et des ombres dynamiques sur Android 5.0(API niveau 21) et plus et retombe sur une implémentation d’ombre programmatique sur les versions antérieures.
Utilisez ces propriétés pour personnaliser l’apparence du widgetCardView
:
- 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 de fond d’une carte, utilisez l’attribut
card_view:cardBackgroundColor
.