Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Card bileşeni, kullanıcı arayüzünüz için bir Material Design kapsayıcısı görevi görür.
Kartlar, tek bir tutarlı içerik parçası sunar. Örneğin:
Alışveriş uygulamasındaki bir ürün.
Haber uygulamasındaki bir haber.
İletişim uygulamasındaki bir mesaj.
Card, tek bir içeriği göstermeye odaklandığı için diğer kapsayıcılardan farklıdır. Örneğin, Scaffold tüm ekran için genel yapıyı sağlar. Kart, daha büyük bir düzenin içindeki daha küçük bir kullanıcı arayüzü öğesidir. Column veya Row gibi bir düzen bileşeni ise daha basit ve daha genel bir API sağlar.
Bu konuda, dört tür kartı nasıl uygulayabileceğiniz gösterilmektedir:
Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.
Bağımlılıklar
Temel kart oluşturma
Card, Oluştur'daki diğer kapsayıcılara benzer şekilde çalışır. İçeriğini, içindeki diğer birleştirilebilir öğeleri çağırarak belirtirsiniz. Örneğin, aşağıdaki minimal örnekte Card'in Text çağrısını nasıl içerdiğini düşünün:
Doldurulmuş kart oluşturma
Buradaki anahtar, doldurulmuş rengi değiştirmek için colors mülkünün kullanılmasıdır:
Sonuçlar
Şekil 1. Doldurulmuş bir kart örneği.
Üst düzey kart oluşturma
Aşağıdaki snippet'te, yükseltilmiş kartın nasıl uygulanacağı gösterilmektedir. Özel ElevatedCard bileşenini kullanın.
Yüksekliğin görünümünü ve ortaya çıkan gölgeyi kontrol etmek için elevation mülkünü kullanabilirsiniz.
Sonuçlar
Şekil 2. Yükseltilmiş kart örneği.
Ana hatlarıyla belirtilmiş kart oluşturma
Aşağıda, kenarları sivriltilmiş bir kart örneği verilmiştir. Özel OutlinedCard bileşenini kullanın.
Sonuçlar
Şekil 3. Kenarları kalınlaştırılmış kart örneği.
Önemli noktalar
Card API tanımı için referans bölümüne bakın. Bileşenin görünümünü ve davranışını özelleştirmek için kullanabileceğiniz çeşitli parametreler tanımlar.
Bazı temel parametreler şunlardır:
elevation: Bileşene, arka planın üzerinde yükselmiş gibi görünmesini sağlayan bir gölge ekler.
colors: Hem kapsayıcının hem de alt öğelerinin varsayılan rengini ayarlamak için CardColors türünü kullanır.
enabled: Bu parametre için false değerini gönderirseniz kart devre dışı olarak görünür ve kullanıcı girişlerine yanıt vermez.
onClick: Normalde Card, tıklama etkinliklerini kabul etmez. Bu nedenle, dikkate almak istediğiniz birincil aşırı yükleme, onClick parametresini tanımlayan aşırı yüklemedir. Card uygulamanızın kullanıcının tıklamalarına yanıt vermesini istediğinizde bu aşırı yüklemeyi kullanın.
Kartlar, kaydırma veya kapatma işlemleriyle birlikte gelmez ancak bu özellikleri sunan bileşenlere entegre edilebilir. Örneğin, bir kartta kapatmak için kaydır özelliğini uygulamak istiyorsanız bu özelliği SwipeToDismiss bileşeniyle entegre edin. Kaydırma ile entegre etmek için verticalScroll gibi kaydırma değiştiricileri kullanın. Daha fazla bilgi için Scroll belgelerini inceleyin.
Bu kılavuzu içeren koleksiyonlar
Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:
Etkileşimli bileşenleri görüntüleme
Birleştirilebilir işlevlerin, Materyal Tasarım tasarım sistemine dayalı güzel kullanıcı arayüzü bileşenleri oluşturmanızı nasıl kolaylaştırabileceğini öğrenin.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-02-06 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-02-06 UTC."],[],[],null,["# Create a card as a container\n\n\u003cbr /\u003e\n\nThe [`Card`](/reference/kotlin/androidx/compose/material3/package-summary#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) composable acts as a Material Design container for your UI.\nCards present a single coherent piece of content, such as:\n\n- A product in a shopping app.\n- A news story in a news app.\n- A message in a communications app.\n\nThe focus on portraying a single piece of content distinguishes\n`Card` from other containers. For example, `Scaffold` provides general structure\nto a whole screen. Card is a smaller UI element inside a larger\nlayout, whereas a layout component such as `Column` or `Row` provides a simpler\nand more generic API.\n\nThis topic shows you how to implement four types of cards:\n\n- [Basic](#basic)\n- [Filled](#filled)\n- [Elevated](#elevated)\n- [Outlined](#outlined)\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a basic card\n-------------------\n\n`Card` behaves much like other containers in Compose. You declare its content by\ncalling other composables within it. For example, consider how `Card` contains a\ncall to `Text` in the following minimal example:\n\n @Composable\n fun CardMinimalExample() {\n Card() {\n Text(text = \"Hello, world!\")\n }\n }\n\n| **Note:** By default, a `Card` wraps its content in a `Column` composable, placing each item inside the card beneath one another.\n\nCreate a filled card\n--------------------\n\nThe key here is the use of the `colors` property to change the filled\ncolor:\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun FilledCardExample() {\n Card(\n colors = CardDefaults.cardColors(\n containerColor = MaterialTheme.colorScheme.surfaceVariant,\n ),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Filled\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L106-L122\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 1.** Example of a filled card.\n\nCreate an elevated card\n-----------------------\n\nThe following snippet demonstrates how to implement an elevated card. Use the\ndedicated [`ElevatedCard`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,kotlin.Function1)) composable.\n\nYou can use the `elevation` property to control the appearance of elevation and\nthe resulting shadow.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun ElevatedCardExample() {\n ElevatedCard(\n elevation = CardDefaults.cardElevation(\n defaultElevation = 6.dp\n ),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Elevated\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L85-L101\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 2.** Example of an elevated card.\n\nCreate an outlined card\n-----------------------\n\nThe following is an example of an outlined card. Use the dedicated\n[`OutlinedCard`](/reference/kotlin/androidx/compose/material3/package-summary#OutlinedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) composable.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun OutlinedCardExample() {\n OutlinedCard(\n colors = CardDefaults.cardColors(\n containerColor = MaterialTheme.colorScheme.surface,\n ),\n border = BorderStroke(1.dp, Color.Black),\n modifier = Modifier\n .size(width = 240.dp, height = 100.dp)\n ) {\n Text(\n text = \"Outlined\",\n modifier = Modifier\n .padding(16.dp),\n textAlign = TextAlign.Center,\n )\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L127-L144\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 3.** Example of an outlined card.\n\nKey points\n----------\n\nSee the [reference](/reference/kotlin/androidx/compose/material3/package-summary#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)) for the API definition of `Card`. It defines several\nparameters that you can use to customize the appearance and behavior of the\ncomponent.\n\nSome key parameters include:\n\n- **`elevation`**: Adds a shadow to the component that makes it look elevated above the background.\n- **`colors`** : Uses the `CardColors` type to set the default color of both the container and any children.\n- **`enabled`** : If you pass `false` for this parameter, the card appears as disabled and does not respond to user input.\n- **`onClick`** : Ordinarily, a `Card` does not accept click events. As such, the primary overload you would like to note is that which defines an `onClick` parameter. Use this overload when you want your implementation of `Card` to respond to clicks from the user.\n\n| **Beta:** The `Card` overload that defines the `onClick` parameter is experimental.\n\nCards don't come with inherent scroll or dismiss actions, but can integrate into\ncomposables offering these features. For example, to implement swipe to dismiss\non a card, integrate it with the [`SwipeToDismiss`](/reference/kotlin/androidx/compose/material3/package-summary#SwipeToDismiss(androidx.compose.material3.DismissState,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.collections.Set)) composable. To integrate\nwith scroll, use scroll modifiers such as [`verticalScroll`](/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)). See the [`Scroll`\ndocumentation](/develop/ui/compose/touch-input/pointer-input/scroll) for more information.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
