تحتاج التطبيقات غالبًا إلى عرض البيانات في حاويات ذات تصميم مشابه، مثل الحاويات التي تتضمّن معلومات حول العناصر في قائمة. يوفّر النظام واجهة برمجة التطبيقات CardView لتتمكّن من عرض المعلومات في بطاقات ذات مظهر متّسق على مستوى المنصة. على سبيل المثال، تحتوي البطاقات على مستوى ارتفاع تلقائي فوق مجموعة طرق العرض التي تحتويها، وبالتالي يرسم النظام ظلالاً أسفلها. توفّر البطاقات طريقة لاحتواء مجموعة من طرق العرض مع توفير نمط متسق للحاوية.
الشكل 1. واجهة مستخدم تطبيق تستند إلى البطاقات
إضافة التبعيات
التطبيق المصغّر CardView هو جزء من AndroidX. لاستخدامها في مشروعك، أضِف التبعية التالية إلى ملف build.gradle الخاص بوحدة تطبيقك:
لاستخدام CardView، أضِفها إلى ملف التصميم. استخدِمها كمجموعة عرض لتضمين عروض أخرى. في المثال التالي، يحتوي CardView على ImageView وبعض TextViews لعرض بعض المعلومات للمستخدم:
ينتج مقتطف الرمز البرمجي السابق شيئًا مشابهًا لما يلي، بافتراض استخدام صورة شعار Android نفسها:
الشكل 2. مثال أساسي على تصميم يستند إلى CardView
يتم عرض البطاقة في هذا المثال على الشاشة مع مستوى ارتفاع تلقائي، ما يؤدي إلى رسم النظام لظل أسفلها. يمكنك تقديم ارتفاع مخصّص
للبطاقة باستخدام السمة card_view:cardElevation. البطاقة ذات المسقط الرأسي الأعلى يكون لها ظل أكثر وضوحًا، بينما البطاقة ذات المسقط الرأسي الأدنى يكون لها ظل أخف. تستخدم CardView الارتفاع الحقيقي والظلال الديناميكية على الإصدار 5.0 من نظام التشغيل Android (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث.
استخدِم هذه الخصائص لتخصيص مظهر أداة CardView:
لضبط نصف قطر الزاوية في التصاميم، استخدِم السمة card_view:cardCornerRadius.
لضبط نصف قطر الزاوية في الرمز، استخدِم طريقة CardView.setRadius.
لضبط لون خلفية بطاقة، استخدِم السمة card_view:cardBackgroundColor.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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."]]