আপনি একটি Image কম্পোজেবলের প্রোপার্টি ( contentScale , colorFilter ) ব্যবহার করে ইমেজ কাস্টমাইজ করতে পারেন। এছাড়াও, আপনার Image বিভিন্ন ইফেক্ট প্রয়োগ করার জন্য আপনি বিদ্যমান মডিফায়ারগুলোও ব্যবহার করতে পারেন। মডিফায়ারগুলো শুধুমাত্র Image কম্পোজেবলের ক্ষেত্রেই নয়, যেকোনো কম্পোজেবলের উপরেই ব্যবহার করা যায়, যেখানে contentScale এবং colorFilter হলো Image কম্পোজেবলের সুস্পষ্ট প্যারামিটার।
বিষয়বস্তুর স্কেল
একটি ছবির সীমানার মধ্যে সেটিকে ক্রপ করতে বা তার স্কেল পরিবর্তন করতে একটি contentScale অপশন নির্দিষ্ট করুন। ডিফল্টরূপে, আপনি যদি কোনো contentScale অপশন নির্দিষ্ট না করেন, তাহলে ContentScale.Fit ব্যবহৃত হয়।
নিচের উদাহরণে, Image কম্পোজেবলটিকে একটি বর্ডারসহ ১৫০ডিপি আকারে সীমাবদ্ধ রাখা হয়েছে এবং এর Image হলুদ রঙে সেট করা হয়েছে, যাতে নিচের টেবিলে থাকা বিভিন্ন ContentScale অপশনগুলো প্রদর্শন করা যায়।
val imageModifier = Modifier .size(150.dp) .border(BorderStroke(1.dp, Color.Black)) .background(Color.Yellow) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Fit, modifier = imageModifier )
বিভিন্ন ContentScale অপশন সেট করলে ভিন্ন ভিন্ন আউটপুট পাওয়া যায়। নিচের সারণিটি আপনাকে সঠিক ContentScale মোড বেছে নিতে সাহায্য করবে:
| উৎস চিত্র | ![]() | ![]() |
ContentScale | ফলাফল - প্রতিকৃতি চিত্র: | ফলাফল - ভূদৃশ্য চিত্র: |
ContentScale.Fit : ছবির অ্যাস্পেক্ট রেশিও (ডিফল্ট) ঠিক রেখে ছবিটিকে সুষমভাবে স্কেল করুন। যদি কন্টেন্টের আকার নির্ধারিত আকারের চেয়ে ছোট হয়, তবে ছবিটিকে সীমার মধ্যে ফিট করার জন্য বড় করে স্কেল করা হয়। | ![]() | ![]() |
ContentScale.Crop : ছবিটিকে উপলব্ধ স্থানের কেন্দ্রে ক্রপ করুন। | ![]() | ![]() |
ContentScale.FillHeight : অ্যাস্পেক্ট রেশিও বজায় রেখে সোর্সকে এমনভাবে স্কেল করুন যাতে এর বাউন্ডস গন্তব্যের উচ্চতার সাথে মিলে যায়। | ![]() | ![]() |
ContentScale.FillWidth : অ্যাস্পেক্ট রেশিও বজায় রেখে সোর্সকে এমনভাবে স্কেল করুন, যাতে এর বাউন্ডস ডেস্টিনেশন উইডথের সাথে মিলে যায়। | ![]() | ![]() |
ContentScale.FillBounds : গন্তব্য সীমানা পূরণ করার জন্য বিষয়বস্তুকে উল্লম্বভাবে এবং অনুভূমিকভাবে অসমভাবে স্কেল করুন। (দ্রষ্টব্য: যদি আপনি ছবিগুলিকে এমন কন্টেইনারে রাখেন যা ছবির সঠিক অনুপাতের সাথে মেলে না, তাহলে এটি ছবিগুলিকে বিকৃত করে)। | ![]() | ![]() |
ContentScale.Inside : গন্তব্যের সীমার মধ্যে আকৃতির অনুপাত বজায় রাখতে উৎসটিকে স্কেল করুন। যদি উৎসটি উভয় দিকেই গন্তব্যের চেয়ে ছোট বা সমান হয়, তবে এটি None এর মতোই কাজ করে। কন্টেন্ট সর্বদা সীমার মধ্যে থাকবে। যদি কন্টেন্ট সীমার চেয়ে ছোট হয়, তবে কোনো স্কেলিং প্রয়োগ করা হবে না। | উৎস চিত্র সীমার চেয়ে বড়: উৎস চিত্র সীমার চেয়ে ছোট: ![]() | উৎস চিত্র সীমার চেয়ে বড়: উৎস চিত্র সীমার চেয়ে ছোট: ![]() |
ContentScale.None : সোর্সে কোনো স্কেলিং প্রয়োগ করা হবে না। যদি কন্টেন্টটি ডেস্টিনেশন বাউন্ডের চেয়ে ছোট হয়, তবে এটিকে জায়গাটির সাথে মানানসই করার জন্য স্কেল আপ করা হবে না। | উৎস চিত্র সীমার চেয়ে বড়: উৎস চিত্র সীমার চেয়ে ছোট: ![]() | উৎস চিত্র সীমার চেয়ে বড়: উৎস চিত্র সীমার চেয়ে ছোট: ![]() |
একটি আকৃতিতে গঠনযোগ্য একটি Image ক্লিপ করুন।
কোনো ছবিকে একটি নির্দিষ্ট আকারের মধ্যে বসাতে, বিল্ট-ইন clip মডিফায়ার ব্যবহার করুন। কোনো ছবিকে বৃত্তাকার আকারে ক্রপ করতে, Modifier.clip(CircleShape) ব্যবহার করুন।
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(CircleShape) )

CircleShape ব্যবহার করে একটি ছবি ক্লিপ করা। গোলাকার কোণার আকৃতির জন্য, Modifier.clip(RoundedCornerShape(16.dp) ) ব্যবহার করুন, সাথে যে কোণাগুলো গোলাকার করতে চান সেগুলোর আকার উল্লেখ করুন:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(RoundedCornerShape(16.dp)) )

RoundedCornerShape ব্যবহার করে একটি চিত্র ক্লিপিং করা। এছাড়াও আপনি Shape এক্সটেন্ড করে এবং শেপটিকে ঘিরে ক্লিপ করার জন্য একটি Path প্রদান করে নিজের ক্লিপিং শেপ তৈরি করতে পারেন:
class SquashedOval : Shape { override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { val path = Path().apply { // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container. addOval( Rect( left = size.width / 4f, top = 0f, right = size.width * 3 / 4f, bottom = size.height ) ) } return Outline.Generic(path = path) } } Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(SquashedOval()) )

একটি কম্পোজেবল Image বর্ডার যোগ করুন
একটি ছবির চারপাশে বর্ডার তৈরি করার জন্য Modifier.border() এবং Modifier.clip() একসাথে ব্যবহার করা একটি প্রচলিত পদ্ধতি:
val borderWidth = 4.dp Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .border( BorderStroke(borderWidth, Color.Yellow), CircleShape ) .padding(borderWidth) .clip(CircleShape) )

গ্রেডিয়েন্ট বর্ডার তৈরি করতে, আপনি Brush এপিআই ব্যবহার করে ছবিটির চারপাশে একটি রংধনু গ্রেডিয়েন্ট বর্ডার আঁকতে পারেন:
val rainbowColorsBrush = remember { Brush.sweepGradient( listOf( Color(0xFF9575CD), Color(0xFFBA68C8), Color(0xFFE57373), Color(0xFFFFB74D), Color(0xFFFFF176), Color(0xFFAED581), Color(0xFF4DD0E1), Color(0xFF9575CD) ) ) } val borderWidth = 4.dp Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .border( BorderStroke(borderWidth, rainbowColorsBrush), CircleShape ) .padding(borderWidth) .clip(CircleShape) )

একটি কাস্টম অ্যাসপেক্ট রেশিও সেট করুন
কোনো ইমেজকে কাস্টম অ্যাস্পেক্ট রেশিওতে রূপান্তর করতে, Modifier.aspectRatio(16f/9f) ব্যবহার করে ইমেজটির (বা যেকোনো কম্পোজেবল) জন্য একটি কাস্টম রেশিও প্রদান করুন।
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), modifier = Modifier.aspectRatio(16f / 9f) )

Image Modifier.aspectRatio(16f/9f) এর ব্যবহার।কালার ফিল্টার: ছবির পিক্সেলের রঙ পরিবর্তন করে
Image কম্পোজেবল-এ একটি colorFilter প্যারামিটার আছে যা আপনার ইমেজের স্বতন্ত্র পিক্সেলের আউটপুট পরিবর্তন করতে পারে।
রঙিন ছবি
ColorFilter.tint(color, blendMode) ব্যবহার করে আপনার Image কম্পোজেবলে প্রদত্ত রঙের একটি ব্লেন্ড মোড প্রয়োগ করা হয়। ColorFilter.tint(color, blendMode) কন্টেন্টকে টিন্ট করার জন্য BlendMode.SrcIn ব্যবহার করে, যার অর্থ হলো স্ক্রিনে ছবিটি যেখানে প্রদর্শিত হয়, সেখানে সরবরাহ করা রঙটি দেখানো হয়। এটি আইকন এবং ভেক্টরের জন্য উপযোগী, যেগুলোকে ভিন্ন থিমে তৈরি করা প্রয়োজন।
Image( painter = painterResource(id = R.drawable.baseline_directions_bus_24), contentDescription = stringResource(id = R.string.bus_content_description), colorFilter = ColorFilter.tint(Color.Yellow) )

BlendMode.SrcIn সহ ColorFilter.tint প্রয়োগ করা হয়েছে। অন্যান্য BlendMode এর ফলে ভিন্ন ভিন্ন প্রভাব দেখা যায়। উদাহরণস্বরূপ, কোনো ছবিতে BlendMode.Darken সাথে Color.Green সেট করলে নিম্নলিখিত ফলাফল পাওয়া যায়:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken) )

Color.Green tint , BlendMode.Darken । উপলব্ধ বিভিন্ন ব্লেন্ড মোড সম্পর্কে আরও তথ্যের জন্য BlendMode রেফারেন্স ডকুমেন্টেশন দেখুন।
কালার ম্যাট্রিক্স সহ একটি Image ফিল্টার প্রয়োগ করুন
কালার ম্যাট্রিক্সের ColorFilter অপশন ব্যবহার করে আপনার ইমেজকে রূপান্তর করুন। উদাহরণস্বরূপ, আপনার ইমেজে একটি সাদা-কালো ফিল্টার প্রয়োগ করতে, আপনি ColorMatrix ব্যবহার করে স্যাচুরেশন 0f এ সেট করতে পারেন।
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) )

একটি কম্পোজেবল Image কনট্রাস্ট বা ব্রাইটনেস অ্যাডজাস্ট করুন
কোনো ছবির কনট্রাস্ট ও ব্রাইটনেস পরিবর্তন করতে, আপনি ColorMatrix ব্যবহার করে মানগুলো পরিবর্তন করতে পারেন:
val contrast = 2f // 0f..10f (1 should be default) val brightness = -180f // -255f..255f (0 should be default) val colorMatrix = floatArrayOf( contrast, 0f, 0f, 0f, brightness, 0f, contrast, 0f, 0f, brightness, 0f, 0f, contrast, 0f, brightness, 0f, 0f, 0f, 1f, 0f ) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix)) )

ColorMatrix ব্যবহার করে ছবির উজ্জ্বলতা ও কনট্রাস্ট সমন্বয় করা হয়েছে। একটি কম্পোজেবল Image রংগুলি উল্টে দিন
কোনো ছবির রং উল্টে দিতে, ColorMatrix ইনভার্ট কালারস-এ সেট করুন:
val colorMatrix = floatArrayOf( -1f, 0f, 0f, 0f, 255f, 0f, -1f, 0f, 0f, 255f, 0f, 0f, -1f, 0f, 255f, 0f, 0f, 0f, 1f, 0f ) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix)) )

একটি Image ঝাপসা করুন যা রচনাযোগ্য
কোনো ছবি ব্লার করতে, Modifier.blur() ব্যবহার করুন এবং radiusX ও radiusY উল্লেখ করুন, যা যথাক্রমে আনুভূমিক ও উল্লম্ব দিকে ব্লার ব্যাসার্ধ নির্দিষ্ট করে।
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .blur( radiusX = 10.dp, radiusY = 10.dp, edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)) ) )

BlurEffect প্রয়োগ করা হয়েছে। Images ব্লার করার সময়, BlurredEdgeTreatment.Unbounded এর পরিবর্তে BlurredEdgeTreatment(Shape) ব্যবহার করার পরামর্শ দেওয়া হয়, কারণ পরেরটি এমন সব যথেচ্ছ রেন্ডারিং ব্লার করার জন্য ব্যবহৃত হয় যা মূল কন্টেন্টের সীমার বাইরে রেন্ডার হবে বলে আশা করা হয়। ইমেজের ক্ষেত্রে, সেগুলো কন্টেন্টের সীমার বাইরে রেন্ডার হওয়ার সম্ভাবনা কম, কিন্তু একটি গোলাকার আয়তক্ষেত্র ব্লার করার জন্য এই পার্থক্যটির প্রয়োজন হতে পারে।
উদাহরণস্বরূপ, যদি আমরা পূর্ববর্তী ছবিতে BlurredEdgeTreatment Unbounded এ সেট করি, তাহলে ছবিটির প্রান্তগুলি স্পষ্ট হওয়ার পরিবর্তে ঝাপসা দেখাবে:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .blur( radiusX = 10.dp, radiusY = 10.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded ) .clip(RoundedCornerShape(8.dp)) )

BlurEdgeTreatment.Unbounded ।আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলেও লিঙ্কের লেখা প্রদর্শিত হয়।
- গ্রাফিক্স মডিফায়ার
- ছবি লোড হচ্ছে
- উপাদান আইকন












উৎস চিত্র সীমার চেয়ে ছোট: 
উৎস চিত্র সীমার চেয়ে ছোট: 
উৎস চিত্র সীমার চেয়ে ছোট:
উৎস চিত্র সীমার চেয়ে ছোট: