শ্যাডো আপনার UI-কে দৃষ্টিনন্দন করে তোলে, ব্যবহারকারীদের কাছে ইন্টারঅ্যাক্টিভিটি নির্দেশ করে এবং ব্যবহারকারীর কার্যকলাপের উপর তাৎক্ষণিক প্রতিক্রিয়া প্রদান করে। কম্পোজ আপনার অ্যাপে শ্যাডো যুক্ত করার বিভিন্ন উপায় প্রদান করে:
-
Modifier.shadow(): কোনো কম্পোজেবলের পিছনে উচ্চতা-ভিত্তিক একটি শ্যাডো তৈরি করে যা ম্যাটেরিয়াল ডিজাইন নির্দেশিকা মেনে চলে। -
Modifier.dropShadow(): একটি কাস্টমাইজযোগ্য শ্যাডো তৈরি করে যা একটি কম্পোজেবলের পিছনে প্রদর্শিত হয়, ফলে সেটিকে উঁচু দেখায়। -
Modifier.innerShadow(): কোনো কম্পোজেবলের সীমানার ভিতরে একটি ছায়া তৈরি করে, যার ফলে সেটিকে পেছনের পৃষ্ঠের সাথে মিশে গেছে বলে মনে হয়।
সাধারণ ছায়া তৈরির জন্য Modifier.shadow() উপযুক্ত, অন্যদিকে dropShadow() এবং innerShadow() মডিফায়ারগুলো ছায়া রেন্ডারিংয়ের ক্ষেত্রে আরও সূক্ষ্ম নিয়ন্ত্রণ ও নির্ভুলতা প্রদান করে।
এই পৃষ্ঠায় এই প্রতিটি মডিফায়ার কীভাবে প্রয়োগ করতে হয় তা বর্ণনা করা হয়েছে, যার মধ্যে রয়েছে ব্যবহারকারীর ইন্টারঅ্যাকশনের ওপর ভিত্তি করে শ্যাডোকে কীভাবে অ্যানিমেট করতে হয় এবং গ্রেডিয়েন্ট শ্যাডো , নিউমরফিক শ্যাডো ও আরও অনেক কিছু তৈরি করার জন্য innerShadow() ও dropShadow() মডিফায়ারগুলোকে কীভাবে চেইন করতে হয়।
মৌলিক ছায়া তৈরি করুন
Modifier.shadow() ম্যাটেরিয়াল ডিজাইনের নির্দেশিকা অনুসরণ করে একটি সাধারণ ছায়া তৈরি করে যা উপর থেকে আসা আলোর উৎসের অনুকরণ করে। ছায়ার গভীরতা একটি elevation মানের উপর ভিত্তি করে নির্ধারিত হয়, এবং সৃষ্ট ছায়াটি কম্পোজেবলটির আকৃতি অনুযায়ী সীমাবদ্ধ থাকে।
@Composable fun ElevationBasedShadow() { Box( modifier = Modifier.aspectRatio(1f).fillMaxSize(), contentAlignment = Alignment.Center ) { Box( Modifier .size(100.dp, 100.dp) .shadow(10.dp, RectangleShape) .background(Color.White) ) } }

Modifier.shadow() ব্যবহার করে তৈরি একটি উচ্চতা-ভিত্তিক ছায়া।ড্রপ শ্যাডো প্রয়োগ করুন
আপনার কন্টেন্টের পিছনে একটি সঠিক ছায়া আঁকতে dropShadow() মডিফায়ারটি ব্যবহার করুন, যা এলিমেন্টটিকে উঁচু দেখায়।
এর Shadow প্যারামিটারের মাধ্যমে আপনি নিম্নলিখিত মূল দিকগুলো নিয়ন্ত্রণ করতে পারেন:
-
radius: আপনার ব্লারের কোমলতা এবং বিস্তৃতি নির্ধারণ করে। -
color: আভার রঙ নির্ধারণ করে। -
offset: x এবং y অক্ষ বরাবর ছায়ার জ্যামিতিকে স্থাপন করে। -
spread: ছায়ার জ্যামিতিক প্রসারণ বা সংকোচন নিয়ন্ত্রণ করে।
এছাড়াও, shape প্যারামিটারটি শ্যাডোর সামগ্রিক আকৃতি নির্ধারণ করে। এটি androidx.compose.foundation.shape প্যাকেজের যেকোনো জ্যামিতি, সেইসাথে ম্যাটেরিয়াল এক্সপ্রেসিভ শেপগুলোও ব্যবহার করতে পারে।
একটি সাধারণ ড্রপ শ্যাডো প্রয়োগ করতে, আপনার কম্পোজেবল চেইনে dropShadow() মডিফায়ারটি যোগ করুন এবং এর রেডিয়াস, কালার ও স্প্রেড উল্লেখ করুন। লক্ষ্য করুন যে, শ্যাডোর উপরে যে purpleColor ব্যাকগ্রাউন্ডটি দেখা যায়, তা dropShadow() মডিফায়ারের পরে আঁকা হয়।
@Composable fun SimpleDropShadowUsage() { Box(Modifier.fillMaxSize()) { Box( Modifier .width(300.dp) .height(300.dp) .dropShadow( shape = RoundedCornerShape(20.dp), shadow = Shadow( radius = 10.dp, spread = 6.dp, color = Color(0x40000000), offset = DpOffset(x = 4.dp, 4.dp) ) ) .align(Alignment.Center) .background( color = Color.White, shape = RoundedCornerShape(20.dp) ) ) { Text( "Drop Shadow", modifier = Modifier.align(Alignment.Center), fontSize = 32.sp ) } } }
কোড সম্পর্কে মূল বিষয়গুলো
-
dropShadow()` মডিফায়ারটি ভেতরেরBoxএর উপর প্রয়োগ করা হয়। শ্যাডোটির নিম্নলিখিত বৈশিষ্ট্য রয়েছে:- একটি গোলাকার আয়তক্ষেত্রাকার আকৃতি (
RoundedCornerShape(20.dp)) -
10.dpব্লার রেডিয়াস, যা প্রান্তগুলোকে নরম ও বিচ্ছুরিত করে তোলে। -
6.dpর একটি স্প্রেড, যা ছায়ার আকার বাড়িয়ে দেয় এবং এটিকে ছায়া নিক্ষেপকারী বক্সের চেয়ে বড় করে তোলে। -
0.5fএর একটি আলফা, যা ছায়াটিকে আধা-স্বচ্ছ করে তোলে।
- একটি গোলাকার আয়তক্ষেত্রাকার আকৃতি (
- শ্যাডো নির্ধারণ করার পর .background
background()মডিফায়ারটি প্রয়োগ করা হয়।-
Boxসাদা রঙে পূর্ণ। - পটভূমিটিকে ছায়ার মতোই একই গোলাকার আয়তক্ষেত্রাকার আকৃতিতে ছেঁটে ফেলা হয়েছে।
-
ফলাফল

অভ্যন্তরীণ ছায়া প্রয়োগ করুন
dropShadow() এর বিপরীত প্রভাব তৈরি করতে, Modifier.innerShadow() ব্যবহার করুন, যা এমন একটি বিভ্রম তৈরি করে যে কোনো এলিমেন্ট তার নিচের তলের মধ্যে ঢুকে গেছে বা চেপে বসেছে।
ইনার শ্যাডো তৈরি করার সময় ক্রম গুরুত্বপূর্ণ। innerShadow() মডিফায়ারটি কন্টেন্টের উপরে আঁকা হয়। শ্যাডোটি যাতে দৃশ্যমান হয়, তা নিশ্চিত করতে সাধারণত নিম্নলিখিত ধাপগুলো অনুসরণ করা হয়:
- আপনার পটভূমির বিষয়বস্তু আঁকুন।
- অবতল আকৃতি তৈরি করতে
innerShadow()মডিফায়ারটি প্রয়োগ করুন।
যদি innerShadow() কে background-এর আগে রাখা হয়, তাহলে ব্যাকগ্রাউন্ডটি শ্যাডোর উপর আঁকা হয়, ফলে শ্যাডোটি সম্পূর্ণরূপে ঢাকা পড়ে যায়।
নিম্নলিখিত উদাহরণটি একটি RoundedCornerShape উপর innerShadow() ফাংশনের প্রয়োগ দেখায়:
@Composable fun SimpleInnerShadowUsage() { Box(Modifier.fillMaxSize()) { Box( Modifier .width(300.dp) .height(200.dp) .align(Alignment.Center) // note that the background needs to be defined before defining the inner shadow .background( color = Color.White, shape = RoundedCornerShape(20.dp) ) .innerShadow( shape = RoundedCornerShape(20.dp), shadow = Shadow( radius = 10.dp, spread = 2.dp, color = Color(0x40000000), offset = DpOffset(x = 6.dp, 7.dp) ) ) ) { Text( "Inner Shadow", modifier = Modifier.align(Alignment.Center), fontSize = 32.sp ) } } }

Modifier.innerShadow() এর প্রয়োগ।ব্যবহারকারীর মিথস্ক্রিয়ার উপর ভিত্তি করে ছায়াগুলোকে অ্যানিমেট করুন
ব্যবহারকারীর কার্যকলাপের সাথে আপনার শ্যাডোকে সাড়া দিতে, আপনি Compose-এর অ্যানিমেশন API-এর সাথে শ্যাডো প্রোপার্টি যুক্ত করতে পারেন। উদাহরণস্বরূপ, যখন কোনো ব্যবহারকারী একটি বাটন চাপেন, তখন তাৎক্ষণিক ভিজ্যুয়াল ফিডব্যাক দেওয়ার জন্য শ্যাডোটি পরিবর্তিত হতে পারে।
নিম্নলিখিত কোডটি একটি ছায়াসহ "চাপা" প্রভাব তৈরি করে (এমন একটি বিভ্রম তৈরি করে যেন পৃষ্ঠতলটি স্ক্রিনের মধ্যে নিচের দিকে ঠেলে দেওয়া হচ্ছে):
@Composable fun AnimatedColoredShadows() { SnippetsTheme { Box(Modifier.fillMaxSize()) { val interactionSource = remember { MutableInteractionSource() } val isPressed by interactionSource.collectIsPressedAsState() // Create transition with pressed state val transition = updateTransition( targetState = isPressed, label = "button_press_transition" ) fun <T> buttonPressAnimation() = tween<T>( durationMillis = 400, easing = EaseInOut ) // Animate all properties using the transition val shadowAlpha by transition.animateFloat( label = "shadow_alpha", transitionSpec = { buttonPressAnimation() } ) { pressed -> if (pressed) 0f else 1f } // ... val blueDropShadow by transition.animateColor( label = "shadow_color", transitionSpec = { buttonPressAnimation() } ) { pressed -> if (pressed) Color.Transparent else blueDropShadowColor } // ... Box( Modifier .clickable( interactionSource, indication = null ) { // ** ...... **// } .width(300.dp) .height(200.dp) .align(Alignment.Center) .dropShadow( shape = RoundedCornerShape(70.dp), shadow = Shadow( radius = 10.dp, spread = 0.dp, color = blueDropShadow, offset = DpOffset(x = 0.dp, -(2).dp), alpha = shadowAlpha ) ) .dropShadow( shape = RoundedCornerShape(70.dp), shadow = Shadow( radius = 10.dp, spread = 0.dp, color = darkBlueDropShadow, offset = DpOffset(x = 2.dp, 6.dp), alpha = shadowAlpha ) ) // note that the background needs to be defined before defining the inner shadow .background( color = Color(0xFFFFFFFF), shape = RoundedCornerShape(70.dp) ) .innerShadow( shape = RoundedCornerShape(70.dp), shadow = Shadow( radius = 8.dp, spread = 4.dp, color = innerShadowColor2, offset = DpOffset(x = 4.dp, 0.dp) ) ) .innerShadow( shape = RoundedCornerShape(70.dp), shadow = Shadow( radius = 20.dp, spread = 4.dp, color = innerShadowColor1, offset = DpOffset(x = 4.dp, 0.dp), alpha = innerShadowAlpha ) ) ) { Text( "Animated Shadows", // ... ) } } } }
কোড সম্পর্কে মূল বিষয়গুলো
-
transition.animateColorএবংtransition.animateFloatব্যবহার করে প্রেস করার পর অ্যানিমেট হওয়ার জন্য প্যারামিটারগুলোর শুরু এবং শেষের অবস্থা ঘোষণা করে। - সমস্ত অ্যানিমেশন সিঙ্ক্রোনাইজড আছে কিনা তা যাচাই করার জন্য
updateTransitionব্যবহার করা হয় এবং এটিকে নির্বাচিতtargetState (targetState = isPressed)প্রদান করা হয়। যখনইisPressedপরিবর্তিত হয়, ট্রানজিশন অবজেক্টটি স্বয়ংক্রিয়ভাবে সমস্ত চাইল্ড প্রপার্টির অ্যানিমেশনকে তাদের বর্তমান মান থেকে নতুন টার্গেট মানে পরিচালনা করে। - এটি
buttonPressAnimationস্পেসিফিকেশনকে সংজ্ঞায়িত করে, যা ট্রানজিশনের টাইমিং এবং ইজিং নিয়ন্ত্রণ করে। এটি ৪০০ মিলিসেকেন্ড সময়কালের একটিtween(ইন-বিটুইন-এর সংক্ষিপ্ত রূপ) এবং একটিEaseInOutকার্ভ নির্দিষ্ট করে, যার অর্থ হলো অ্যানিমেশনটি ধীরে শুরু হয়, মাঝখানে গতি বাড়ে এবং শেষে আবার কমে যায়। - একটি
Boxসংজ্ঞায়িত করে, যার মধ্যে মডিফায়ার ফাংশনের একটি শৃঙ্খল থাকে যা ভিজ্যুয়াল এলিমেন্টটি তৈরি করার জন্য সমস্ত অ্যানিমেটেড বৈশিষ্ট্য প্রয়োগ করে, যার মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত:-
clickable(): একটি মডিফায়ার যাBoxইন্টারেক্টিভ করে তোলে। -
.dropShadow(): প্রথমে দুটি বাইরের ড্রপ শ্যাডো প্রয়োগ করা হয়। এদের রঙ এবং আলফা বৈশিষ্ট্যগুলো অ্যানিমেটেড মানগুলোর (যেমনblueDropShadow) সাথে সংযুক্ত থাকে এবং প্রাথমিক উঁচু চেহারাটি তৈরি করে। -
.innerShadow(): ব্যাকগ্রাউন্ডের উপরে দুটি ইনার শ্যাডো আঁকা হয়। এদের প্রোপার্টিগুলো অ্যানিমেটেড ভ্যালুগুলোর অন্য সেটের (innerShadowColor1, ইত্যাদি) সাথে লিঙ্ক করা থাকে এবং একটি ইনডেন্টেড বা খাঁজকাটা চেহারা তৈরি করে।
-
ফলাফল
গ্রেডিয়েন্ট শ্যাডো তৈরি করুন
ছায়া শুধু নিরেট রঙের মধ্যেই সীমাবদ্ধ নয়। শ্যাডো এপিআই একটি Brush গ্রহণ করে, যা দিয়ে গ্রেডিয়েন্ট শ্যাডো তৈরি করা যায়।
Box( modifier = Modifier .width(240.dp) .height(200.dp) .dropShadow( shape = RoundedCornerShape(70.dp), shadow = Shadow( radius = 10.dp, spread = animatedSpread.dp, brush = Brush.sweepGradient( colors ), offset = DpOffset(x = 0.dp, y = 0.dp), alpha = animatedAlpha ) ) .clip(RoundedCornerShape(70.dp)) .background(Color(0xEDFFFFFF)), contentAlignment = Alignment.Center ) { Text( text = breathingText, color = Color.Black, style = MaterialTheme.typography.bodyLarge ) }
কোড সম্পর্কে মূল বিষয়গুলো
-
dropShadow()বক্সটির পিছনে একটি ছায়া যোগ করে। -
brush = Brush.sweepGradient(colors)ফাংশনটি পূর্বনির্ধারিতcolorsএকটি তালিকার মধ্য দিয়ে পর্যায়ক্রমে আবর্তিত একটি গ্রেডিয়েন্ট ব্যবহার করে শ্যাডোকে রঙিন করে, যা একটি রামধনু-সদৃশ প্রভাব তৈরি করে।
ফলাফল
আপনি একটি ব্রাশকে শ্যাডো হিসেবে ব্যবহার করে 'ব্রেদিং' অ্যানিমেশন সহ dropShadow() ফাংশনের মাধ্যমে একটি গ্রেডিয়েন্ট তৈরি করতে পারেন:
ছায়া একত্রিত করুন
আপনি dropShadow() এবং innerShadow() মডিফায়ার দুটিকে একত্রিত করে ও স্তরে স্তরে ব্যবহার করে বিভিন্ন ধরনের ইফেক্ট তৈরি করতে পারেন। নিম্নলিখিত বিভাগগুলিতে দেখানো হয়েছে কীভাবে এই কৌশল ব্যবহার করে নিউমরফিক, নিওব্রুটালিস্ট এবং বাস্তবসম্মত ছায়া তৈরি করা যায়।
নিউমরফিক ছায়া তৈরি করুন
নিউমর্ফিক ছায়ার বৈশিষ্ট্য হলো এর কোমল রূপ, যা পটভূমি থেকে স্বাভাবিকভাবে ফুটে ওঠে। নিউমর্ফিক ছায়া তৈরি করতে নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করুন:
- এমন একটি এলিমেন্ট ব্যবহার করুন যার রঙ তার ব্যাকগ্রাউন্ডের রঙের সাথে মিলে যায়।
- দুটি হালকা, বিপরীতমুখী ড্রপ শ্যাডো প্রয়োগ করুন: এক কোণে একটি হালকা ছায়া এবং তার বিপরীত কোণে একটি গাঢ় ছায়া।
নিম্নলিখিত কোড স্নিপেটটি নিউমর্ফিক এফেক্ট তৈরি করার জন্য দুটি dropShadow() মডিফায়ারকে লেয়ার করে:
@Composable fun NeumorphicRaisedButton( shape: RoundedCornerShape = RoundedCornerShape(30.dp) ) { val bgColor = Color(0xFFe0e0e0) val lightShadow = Color(0xFFFFFFFF) val darkShadow = Color(0xFFb1b1b1) val upperOffset = -10.dp val lowerOffset = 10.dp val radius = 15.dp val spread = 0.dp Box( modifier = Modifier .fillMaxSize() .background(bgColor) .wrapContentSize(Alignment.Center) .size(240.dp) .dropShadow( shape, shadow = Shadow( radius = radius, color = lightShadow, spread = spread, offset = DpOffset(upperOffset, upperOffset) ), ) .dropShadow( shape, shadow = Shadow( radius = radius, color = darkShadow, spread = spread, offset = DpOffset(lowerOffset, lowerOffset) ), ) .background(bgColor, shape) ) }

নব্য-বর্বরতাবাদী ছায়া তৈরি করুন
নিওব্রুটালিস্ট শৈলীতে উচ্চ-কনট্রাস্ট, ব্লক-আকৃতির বিন্যাস, উজ্জ্বল রঙ এবং মোটা বর্ডার দেখা যায়। এই প্রভাবটি তৈরি করতে, নিম্নলিখিত কোড স্নিপেটে দেখানো অনুযায়ী, শূন্য ব্লার এবং একটি স্বতন্ত্র অফসেট সহ dropShadow() ব্যবহার করুন:
@Composable fun NeoBrutalShadows() { SnippetsTheme { val dropShadowColor = Color(0xFF007AFF) val borderColor = Color(0xFFFF2D55) Box(Modifier.fillMaxSize()) { Box( Modifier .width(300.dp) .height(200.dp) .align(Alignment.Center) .dropShadow( shape = RoundedCornerShape(0.dp), shadow = Shadow( radius = 0.dp, spread = 0.dp, color = dropShadowColor, offset = DpOffset(x = 8.dp, 8.dp) ) ) .border( 8.dp, borderColor ) .background( color = Color.White, shape = RoundedCornerShape(0.dp) ) ) { Text( "Neobrutal Shadows", modifier = Modifier.align(Alignment.Center), style = MaterialTheme.typography.bodyMedium ) } } } }

বাস্তবসম্মত ছায়া তৈরি করুন
বাস্তবসম্মত ছায়া বাস্তব জগতের ছায়ার অনুকরণ করে— এগুলোকে একটি প্রধান আলোর উৎস দ্বারা আলোকিত বলে মনে হয়, যার ফলে সরাসরি ছায়া এবং কিছুটা বিস্তৃত ছায়া উভয়ই তৈরি হয়। বাস্তবসম্মত ছায়ার প্রভাব পুনরায় তৈরি করতে, আপনি বিভিন্ন বৈশিষ্ট্য সহ একাধিক dropShadow() এবং innerShadow() ইনস্ট্যান্স একসাথে ব্যবহার করতে পারেন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে:
@Composable fun RealisticShadows() { Box(Modifier.fillMaxSize()) { val dropShadowColor1 = Color(0xB3000000) val dropShadowColor2 = Color(0x66000000) val innerShadowColor1 = Color(0xCC000000) val innerShadowColor2 = Color(0xFF050505) val innerShadowColor3 = Color(0x40FFFFFF) val innerShadowColor4 = Color(0x1A050505) Box( Modifier .width(300.dp) .height(200.dp) .align(Alignment.Center) .dropShadow( shape = RoundedCornerShape(100.dp), shadow = Shadow( radius = 40.dp, spread = 0.dp, color = dropShadowColor1, offset = DpOffset(x = 2.dp, 8.dp) ) ) .dropShadow( shape = RoundedCornerShape(100.dp), shadow = Shadow( radius = 4.dp, spread = 0.dp, color = dropShadowColor2, offset = DpOffset(x = 0.dp, 4.dp) ) ) // note that the background needs to be defined before defining the inner shadow .background( color = Color.Black, shape = RoundedCornerShape(100.dp) ) // // .innerShadow( shape = RoundedCornerShape(100.dp), shadow = Shadow( radius = 12.dp, spread = 3.dp, color = innerShadowColor1, offset = DpOffset(x = 6.dp, 6.dp) ) ) .innerShadow( shape = RoundedCornerShape(100.dp), shadow = Shadow( radius = 4.dp, spread = 1.dp, color = Color.White, offset = DpOffset(x = 5.dp, 5.dp) ) ) .innerShadow( shape = RoundedCornerShape(100.dp), shadow = Shadow( radius = 12.dp, spread = 5.dp, color = innerShadowColor2, offset = DpOffset(x = (-3).dp, (-12).dp) ) ) .innerShadow( shape = RoundedCornerShape(100.dp), shadow = Shadow( radius = 3.dp, spread = 10.dp, color = innerShadowColor3, offset = DpOffset(x = 0.dp, 0.dp) ) ) .innerShadow( shape = RoundedCornerShape(100.dp), shadow = Shadow( radius = 3.dp, spread = 9.dp, color = innerShadowColor4, offset = DpOffset(x = 1.dp, 1.dp) ) ) ) { Text( "Realistic Shadows", modifier = Modifier.align(Alignment.Center), fontSize = 24.sp, color = Color.White ) } } }
কোড সম্পর্কে মূল বিষয়গুলো
- দুটি ভিন্ন বৈশিষ্ট্য সহ পরপর দুটি
dropShadow()মডিফায়ার প্রয়োগ করা হয়, যার পরে একটিbackground()মডিফায়ার প্রয়োগ করা হয়। - কম্পোনেন্টের প্রান্তের চারপাশে ধাতব বলয়ের প্রভাব তৈরি করতে পরপর
innerShadow()মডিফায়ার প্রয়োগ করা হয়।
ফলাফল
পূর্ববর্তী কোড স্নিপেটটি নিম্নলিখিত ফলাফল তৈরি করে:
