برنامهها اغلب نیاز دارند دادهها را در محفظههایی با استایل مشابه نمایش دهند، مانند محفظههایی که اطلاعات موارد موجود در فهرست را در خود نگه میدارند. این سیستم CardView API را برای شما فراهم میکند تا اطلاعات را در کارتهایی که ظاهری ثابت در سراسر پلتفرم دارند نشان دهید. به عنوان مثال، کارتها دارای ارتفاع پیشفرض بالای گروه نمای حاوی خود هستند، بنابراین سیستم سایههایی را در زیر آنها ترسیم میکند. کارتها راهی برای حاوی گروهی از نماها ارائه میکنند و در عین حال یک سبک ثابت برای ظرف ارائه میدهند.
شکل 1. رابط کاربری برنامه بر اساس کارت.
وابستگی ها را اضافه کنید
ویجت CardView بخشی از AndroidX است. برای استفاده از آن در پروژه خود، وابستگی زیر را به فایل build.gradle ماژول برنامه خود اضافه کنید:
برای استفاده از CardView ، آن را به فایل طرح بندی خود اضافه کنید. از آن بهعنوان یک گروه نمایش برای حاوی نماهای دیگر استفاده کنید. در مثال زیر، CardView شامل ImageView و چند TextViews برای نمایش برخی از اطلاعات به کاربر است:
قطعه کد قبلی چیزی شبیه به زیر تولید می کند، با این فرض که شما از همان تصویر آرم اندروید استفاده می کنید:
شکل 2. یک مثال اساسی از چیدمان مبتنی بر CardView.
کارت در این مثال با یک ارتفاع پیش فرض به سمت صفحه کشیده شده است که باعث می شود سیستم سایه ای را زیر آن بکشد. می توانید یک ارتفاع سفارشی برای کارت با ویژگی card_view:cardElevation ارائه دهید. کارتی که در ارتفاع بالاتر قرار دارد سایه روشنتری دارد و کارتی در ارتفاع پایینتر سایه روشنتری دارد. CardView از ارتفاع واقعی و سایههای پویا در اندروید 5.0 (سطح API 21) و بالاتر استفاده میکند.
از این ویژگی ها برای سفارشی کردن ظاهر ویجت CardView استفاده کنید:
برای تنظیم شعاع گوشه در طرحبندیهای خود، از ویژگی card_view:cardCornerRadius استفاده کنید.
برای تنظیم شعاع گوشه در کد خود، از روش CardView.setRadius استفاده کنید.
برای تنظیم رنگ پسزمینه کارت، از ویژگی card_view:cardBackgroundColor استفاده کنید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و 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."]]