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