Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Bir resmi kırpılmış bir şekle sığdırabilir ve üç boyutlu bir his vermek için şeklin çevresine gölgeler çizebilirsiniz. Bu teknik, avatar ve ürün küçük resimleri gibi tasarımlar oluşturmak veya logoları özel şekillerle göstermek için kullanışlıdır.
Bir resmi bir şekle kırpılmış olarak görüntülemek için aşağıdakileri yapmanız gerekir:
Şekili oluşturun.
Resmi şekle kırpın.
Sürüm uyumluluğu
Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.
Bağımlılıklar
Şekil oluşturma
Aşağıdaki kod, yuvarlatılmış bir poligonu dinamik olarak çizip oluşturabilen özel bir şekil oluşturur:
RoundedPolygon.getBounds(), sınırlarını hesaplamak için RoundedPolygon sınıfında bir uzantı işlevi tanımlar.
RoundedPolygonShape sınıfı, Shape arayüzünü uygular. Bu sayede Jetpack Compose'da özel bir şekil (yuvarlatılmış çokgen) tanımlayabilirsiniz.
Şekil, esnek oluşturma için ölçeklendirme ve çeviri işlemlerini yönetmek üzere bir Matrix kullanır.
createOutline() işlevi, bir RoundedPolygon nesnesini alır, belirli bir boyuta sığacak şekilde ölçeklendirir ve çevirir ve çizilecek nihai şekli tanımlayan bir Outline nesnesi döndürür.
Resmi bir şekle kırpma
Aşağıdaki kod, resmi altıgen şeklinde kırpır ve derinlik hissi vermek için ince bir gölge ekler:
RoundedPolygon ve RoundedPolygonShape nesneleri, altıgen bir şekli tanımlamak ve resme uygulamak için kullanılır.
Kod, resme yüksekliğe dayalı bir gölge eklemek için graphicsLayer kullanır.
Bu, derinlik hissi ve arka plandan görsel olarak ayrılma hissi verir.
remember bloklarının kullanılması, şekil ve kırpma tanımlarının yalnızca bir kez hesaplanmasını ve kullanıcı arayüzünün daha sonraki yeniden derlemeleri için hatırlanmasını sağlayarak performansı optimize eder.
Sonuçlar
Şekil 1. Özel şekil, klip olarak uygulandı.
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:
Görselleri görüntüle
Android uygulamanıza güzel bir görünüm ve tarz kazandırmak için parlak ve ilgi çekici görseller kullanmayla ilgili teknikleri keşfedin.
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,["# Display an image clipped to a shape\n\n\u003cbr /\u003e\n\nYou can fit an image to a clipped shape, and draw shadows around the perimeter\nof the shape to impart a three-dimensional feel. This technique is useful for\ncreating designs such as avatars and product thumbnails, or displaying\nlogos with custom shapes.\n\nTo display an image clipped to a shape, you must do the following:\n\n- Create the shape.\n- Clip the image to the shape.\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 implementation(\"androidx.graphics:graphics-shapes:1.0.0-alpha05\")\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 implementation 'androidx.graphics:graphics-shapes:1.0.0-alpha05'\n \n```\n\n\u003cbr /\u003e\n\nCreate a shape\n--------------\n\nThe following code creates a custom shape that can dynamically draw and render\na rounded polygon:\n\n\n```kotlin\nfun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }\nclass RoundedPolygonShape(\n private val polygon: RoundedPolygon,\n private var matrix: Matrix = Matrix()\n) : Shape {\n private var path = Path()\n override fun createOutline(\n size: Size,\n layoutDirection: LayoutDirection,\n density: Density\n ): Outline {\n path.rewind()\n path = polygon.toPath().asComposePath()\n matrix.reset()\n val bounds = polygon.getBounds()\n val maxDimension = max(bounds.width, bounds.height)\n matrix.scale(size.width / maxDimension, size.height / maxDimension)\n matrix.translate(-bounds.left, -bounds.top)\n\n path.transform(matrix)\n return Outline.Generic(path)\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/graphics/ShapesSnippets.kt#L353-L375\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- `RoundedPolygon.getBounds()` defines an extension function on the [`RoundedPolygon`](/reference/kotlin/androidx/graphics/shapes/RoundedPolygon) class to calculate its bounds.\n- The `RoundedPolygonShape` class implements the [`Shape`](/reference/kotlin/androidx/compose/ui/graphics/Shape) interface, allowing you to define a custom shape (a rounded polygon) in Jetpack Compose.\n- The shape uses a [`Matrix`](/reference/kotlin/androidx/compose/ui/graphics/Matrix) to manage scaling and translation operations for flexible rendering.\n- The `createOutline()` function takes a `RoundedPolygon` object, scales and translates it to fit within a given size, and returns an [`Outline`](/reference/kotlin/androidx/compose/ui/graphics/Outline) object that describes the final shape to be drawn.\n\nClip the image to a shape\n-------------------------\n\nThe following code crops the image to a hexagon, and adds a subtle drop\nshadow to provide a sense of depth:\n\n\n```kotlin\nval hexagon = remember {\n RoundedPolygon(\n 6,\n rounding = CornerRounding(0.2f)\n )\n}\nval clip = remember(hexagon) {\n RoundedPolygonShape(polygon = hexagon)\n}\nBox(\n modifier = Modifier\n .clip(clip)\n .background(MaterialTheme.colorScheme.secondary)\n .size(200.dp)\n) {\n Text(\n \"Hello Compose\",\n color = MaterialTheme.colorScheme.onSecondary,\n modifier = Modifier.align(Alignment.Center)\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/graphics/ShapesSnippets.kt#L382-L402\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- The `RoundedPolygon` and `RoundedPolygonShape` objects are used to define and apply a hexagonal shape to the image.\n- The code uses [`graphicsLayer`](/reference/kotlin/androidx/compose/ui/graphics/package-summary#(androidx.compose.ui.Modifier).graphicsLayer(kotlin.Function1)) to add an elevation-based shadow to the image. This creates a sense of depth and visual separation from the background.\n- The use of [`remember`](/reference/kotlin/androidx/compose/runtime/package-summary#remember(kotlin.Function0)) blocks optimizes performance by ensuring that the shape and clipping definitions are calculated only once and remembered for later recompositions of the UI.\n\nResults\n-------\n\n**Figure 1.** Custom shape applied as clip.\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 images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \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)"]]