ছায়া আপনার 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
প্যাকেজের যেকোনো জ্যামিতি, সেইসাথে Material Expressive shapes ব্যবহার করতে পারে।
একটি বেসিক ড্রপ শ্যাডো বাস্তবায়ন করতে, আপনার কম্পোজেবল চেইনে 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()
মডিফায়ার প্রয়োগ করা হয়।-
Box
সাদা রঙ দিয়ে ভরা। - পটভূমিটি ছায়ার মতো একই গোলাকার আয়তক্ষেত্রাকার আকৃতিতে ক্লিপ করা হয়েছে।
-
ফলাফল

অভ্যন্তরীণ ছায়া প্রয়োগ করুন
dropShadow()
এ একটি বিপরীত প্রভাব তৈরি করতে, Modifier.innerShadow()
ব্যবহার করুন, যা এই ধারণা তৈরি করে যে একটি উপাদান অন্তর্নিহিত পৃষ্ঠে পুনঃস্থাপিত বা চাপা রয়েছে।
অভ্যন্তরীণ ছায়া তৈরি করার সময় ক্রম গুরুত্বপূর্ণ। innerShadow()
মডিফায়ারটি কন্টেন্টের উপরে আঁকে। ছায়াটি দৃশ্যমান কিনা তা নিশ্চিত করতে, আপনাকে সাধারণত নিম্নলিখিত পদক্ষেপগুলি সম্পাদন করতে হবে:
- আপনার পটভূমির বিষয়বস্তু আঁকুন।
- অবতল চেহারা তৈরি করতে
innerShadow()
মডিফায়ার প্রয়োগ করুন।
যদি innerShadow()
ব্যাকগ্রাউন্ডের আগে স্থাপন করা হয়, তাহলে ব্যাকগ্রাউন্ডটি ছায়ার উপরে টানা হবে, এটি সম্পূর্ণরূপে লুকিয়ে থাকবে।
নিম্নলিখিত উদাহরণটি একটি 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()
এর প্রয়োগ।ব্যবহারকারীর মিথস্ক্রিয়ায় ছায়া অ্যানিমেট করুন
আপনার ছায়া যাতে ব্যবহারকারীর মিথস্ক্রিয়ায় সাড়া দেয়, তার জন্য আপনি কম্পোজের অ্যানিমেশন 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
স্পেসিফিকেশন সংজ্ঞায়িত করে, যা ট্রানজিশনের সময় এবং সহজীকরণ নিয়ন্ত্রণ করে। এটি 400 মিলিসেকেন্ডের সময়কাল এবং একটিEaseInOut
বক্ররেখা সহ একটিtween
(in-between এর জন্য সংক্ষিপ্ত) নির্দিষ্ট করে, যার অর্থ অ্যানিমেশনটি ধীর গতিতে শুরু হয়, মাঝখানে গতি বাড়ায় এবং শেষে ধীর হয়ে যায়। - একটি
Box
সংজ্ঞায়িত করে যার মধ্যে রয়েছে মডিফায়ার ফাংশনের একটি শৃঙ্খল যা ভিজ্যুয়াল এলিমেন্ট তৈরি করতে সমস্ত অ্যানিমেটেড বৈশিষ্ট্য প্রয়োগ করে, যার মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:- .
clickable()
: একটি মডিফায়ার যাBox
ইন্টারেক্টিভ করে তোলে। -
.dropShadow()
: প্রথমে দুটি বাইরের ড্রপ শ্যাডো প্রয়োগ করা হয়। তাদের রঙ এবং আলফা বৈশিষ্ট্যগুলি অ্যানিমেটেড মানের (blueDropShadow
, ইত্যাদি) সাথে সংযুক্ত থাকে এবং প্রাথমিক উত্থিত চেহারা তৈরি করে। -
.innerShadow()
: পটভূমির উপরে দুটি অভ্যন্তরীণ ছায়া আঁকা হয়। তাদের বৈশিষ্ট্যগুলি অন্যান্য অ্যানিমেটেড মানের (innerShadowColor1
, ইত্যাদি) সাথে সংযুক্ত থাকে এবং ইন্ডেন্টেড চেহারা তৈরি করে।
- .
ফলাফল
গ্রেডিয়েন্ট ছায়া তৈরি করুন
ছায়া কেবল কঠিন রঙের মধ্যেই সীমাবদ্ধ নয়। ছায়া API একটি 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
তালিকার মধ্য দিয়ে ঘোরে, একটি রংধনুর মতো প্রভাব তৈরি করে।
ফলাফল
"breathing" অ্যানিমেশনের সাহায্যে গ্রেডিয়েন্ট 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()
মডিফায়ার প্রয়োগ করা হয়।
ফলাফল
পূর্ববর্তী কোড স্নিপেটটি নিম্নলিখিতটি তৈরি করে:
