সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
আপনি একটি চিত্রকে একটি ক্লিপ করা আকারে ফিট করতে পারেন এবং একটি ত্রিমাত্রিক অনুভূতি প্রদানের জন্য আকৃতির ঘেরের চারপাশে ছায়া আঁকতে পারেন। এই কৌশলটি অবতার এবং পণ্যের থাম্বনেইলের মতো ডিজাইন তৈরি করতে বা কাস্টম আকারের সাথে লোগো প্রদর্শনের জন্য উপযোগী।
একটি আকারে ক্লিপ করা একটি চিত্র প্রদর্শন করতে, আপনাকে অবশ্যই নিম্নলিখিতগুলি করতে হবে:
আকৃতি তৈরি করুন।
চিত্রটিকে আকৃতিতে ক্লিপ করুন।
সংস্করণ সামঞ্জস্য
এই বাস্তবায়নের জন্য আপনার প্রজেক্ট minSDK এপিআই লেভেল 21 বা তার উপরে সেট করা প্রয়োজন।
নির্ভরতা
একটি আকৃতি তৈরি করুন
নিম্নলিখিত কোডটি একটি কাস্টম আকৃতি তৈরি করে যা গতিশীলভাবে একটি বৃত্তাকার বহুভুজ আঁকতে এবং রেন্ডার করতে পারে:
RoundedPolygon.getBounds()RoundedPolygon ক্লাসে একটি এক্সটেনশন ফাংশন সংজ্ঞায়িত করে এর সীমানা গণনা করতে।
RoundedPolygonShape ক্লাস Shape ইন্টারফেস প্রয়োগ করে, যা আপনাকে জেটপ্যাক কম্পোজে একটি কাস্টম আকৃতি (একটি গোলাকার বহুভুজ) সংজ্ঞায়িত করতে দেয়।
নমনীয় রেন্ডারিংয়ের জন্য স্কেলিং এবং অনুবাদ ক্রিয়াকলাপ পরিচালনা করতে আকৃতিটি একটি Matrix ব্যবহার করে।
createOutline() ফাংশন একটি RoundedPolygon অবজেক্ট নেয়, একটি নির্দিষ্ট আকারের মধ্যে ফিট করার জন্য এটিকে স্কেল করে এবং অনুবাদ করে এবং একটি Outline অবজেক্ট প্রদান করে যা আঁকার চূড়ান্ত আকৃতিটি বর্ণনা করে।
চিত্রটিকে একটি আকারে ক্লিপ করুন
নিম্নলিখিত কোডটি একটি ষড়ভুজ চিত্রটিকে ক্রপ করে এবং গভীরতার অনুভূতি প্রদান করতে একটি সূক্ষ্ম ড্রপ শ্যাডো যোগ করে:
RoundedPolygon এবং RoundedPolygonShape অবজেক্টগুলি ইমেজে একটি ষড়ভুজ আকৃতি নির্ধারণ এবং প্রয়োগ করতে ব্যবহৃত হয়।
কোডটি ছবিতে একটি উচ্চতা-ভিত্তিক ছায়া যোগ করতে graphicsLayer ব্যবহার করে। এটি পটভূমি থেকে গভীরতা এবং চাক্ষুষ বিচ্ছিন্নতার অনুভূতি তৈরি করে।
remember ব্লকের ব্যবহার আকৃতি এবং ক্লিপিং সংজ্ঞাগুলি শুধুমাত্র একবার গণনা করা হয়েছে এবং UI এর পরবর্তী পুনর্গঠনের জন্য মনে রাখা হয়েছে তা নিশ্চিত করে কর্মক্ষমতাকে অপ্টিমাইজ করে।
ফলাফল
চিত্র 1. কাস্টম আকৃতি ক্লিপ হিসাবে প্রয়োগ করা হয়েছে।
এই নির্দেশিকা ধারণকারী সংগ্রহ
এই নির্দেশিকাটি এই কিউরেট করা কুইক গাইড সংগ্রহের অংশ যা বৃহত্তর অ্যান্ড্রয়েড উন্নয়ন লক্ষ্যগুলি কভার করে:
ছবি প্রদর্শন করুন
আপনার অ্যান্ড্রয়েড অ্যাপটিকে একটি সুন্দর চেহারা এবং অনুভূতি দিতে উজ্জ্বল, আকর্ষক ভিজ্যুয়াল ব্যবহার করার কৌশলগুলি আবিষ্কার করুন৷
এই পৃষ্ঠার কন্টেন্ট ও কোডের নমুনাগুলি Content License-এ বর্ণিত লাইসেন্সের অধীনস্থ। Java এবং OpenJDK হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2025-02-06 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-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)"]]