לעתים קרובות, אפליקציות צריכות להציג נתונים במאגרי מידע עם סגנון דומה, כמו מאגרי מידע שמכילים מידע על הפריטים ברשימה. המערכת מספקת את CardView API כדי להציג מידע בכרטיסים עם מראה עקבי בכל הפלטפורמה. לדוגמה, לכרטיסים יש גובה ברירת מחדל מעל קבוצת התצוגה שמכילה אותם, ולכן המערכת מציירת צללים מתחת לכרטיסים. הכרטיסים מאפשרים להכיל קבוצה של תצוגות, תוך שמירה על סגנון עקבי של המאגר.
איור 1. ממשק משתמש של אפליקציה שמבוסס על כרטיסים.
הוספת יחסי התלות
הווידג'ט CardView הוא חלק מ-AndroidX. כדי להשתמש בו בפרויקט, מוסיפים את התלות הבאה לקובץ build.gradle של מודול האפליקציה:
כדי להשתמש ב-CardView, מוסיפים אותו לקובץ הפריסה. אפשר להשתמש בו כקבוצת תצוגות כדי להכיל תצוגות אחרות. בדוגמה הבאה, התג CardView מכיל את התג ImageView וכמה תגי TextViews כדי להציג למשתמש מידע מסוים:
קטע הקוד הקודם יוצר פלט דומה לזה שמוצג בהמשך, בהנחה שמשתמשים באותה תמונה של הלוגו של Android:
איור 2. דוגמה בסיסית לפריסה שמבוססת על CardView.
הכרטיס בדוגמה הזו מצויר על המסך עם גובה ברירת מחדל, ולכן המערכת מציירת צל מתחתיו. אפשר לספק גובה מותאם אישית לכרטיס באמצעות המאפיין card_view:cardElevation. צל של כרטיס בגובה רב יותר יהיה בולט יותר, וצל של כרטיס בגובה נמוך יותר יהיה בהיר יותר. CardView משתמשת בגובה אמיתי ובצללים דינמיים ב-Android מגרסה 5.0 (רמת API 21) ומעלה.
אפשר להשתמש במאפיינים האלה כדי להתאים אישית את המראה של הווידג'ט CardView:
כדי להגדיר את רדיוס הפינות בפריסות, משתמשים במאפיין card_view:cardCornerRadius.
כדי להגדיר את רדיוס הפינה בקוד, משתמשים בשיטה CardView.setRadius.
כדי להגדיר את צבע הרקע של כרטיס, משתמשים במאפיין card_view:cardBackgroundColor.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-08-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 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."]]