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

অভ্যন্তরীণ ছায়া প্রয়োগ করুন
dropShadow
তে একটি বিপরীত প্রভাব তৈরি করতে, Modifier.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
(মাঝখানের জন্য সংক্ষিপ্ত) নির্দিষ্ট করে, যার অর্থ অ্যানিমেশনটি ধীরে শুরু হয়, মাঝখানে গতি বাড়ে এবং শেষে ধীর হয়ে যায়। - সংশোধক ফাংশনগুলির একটি চেইন সহ একটি
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
একটি তালিকার মধ্য দিয়ে ঘোরে, একটি রংধনুর মতো প্রভাব তৈরি করে।
ফলাফল
আপনি একটি "শ্বাস নেওয়া" অ্যানিমেশন সহ একটি গ্রেডিয়েন্ট 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()
মডিফায়ার প্রয়োগ করা হয়।
ফলাফল
পূর্ববর্তী কোড স্নিপেট নিম্নলিখিত উত্পাদন করে:
