Jetpack Compose, Material You এবং Material 3 Expressive-এর ইমপ্লিমেন্টেশন অফার করে, যা হল মেটেরিয়াল ডিজাইনের পরবর্তী বিবর্তন। M3 Expressive হল Material Design 3-এর একটি এক্সটেনশন, যার মধ্যে থিমিং, কম্পোনেন্ট, মোশন, টাইপোগ্রাফি এবং আরও অনেক কিছুর জন্য রিসার্চ-ব্যাকড আপডেট অন্তর্ভুক্ত রয়েছে — এগুলি সবই আপনাকে এমন আকর্ষণীয় এবং পছন্দসই প্রোডাক্ট তৈরি করতে সাহায্য করার জন্য ডিজাইন করা হয়েছে যা ব্যবহারকারীরা পছন্দ করেন। এছাড়াও, এটি ডায়নামিক কালারের মতো Material You পছন্দমতো সাজিয়ে নেওয়া ফিচার সাপোর্ট করে। M3 Expressive, Android 16 ভিজ্যুয়াল স্টাইল ও সিস্টেম UI-কে পরিপূরক করে।
নিচে, আমরা উদাহরণ হিসেবে Reply স্যাম্পেল অ্যাপ ব্যবহার করে Material Design 3 প্রয়োগ করে দেখাব। উত্তর দেওয়ার স্যাম্পেলটি সম্পূর্ণভাবে Material Design 3-এর উপর ভিত্তি করে তৈরি।
ডিপেনডেন্সি
আপনার Compose অ্যাপে Material 3 ব্যবহার করা শুরু করতে, আপনার build.gradle ফাইলে Compose Material 3
ডিপেন্ডেন্সি যোগ করুন:
implementation "androidx.compose.material3:material3:$material3_version"
ডিপেন্ডেন্সি যোগ করা হয়ে গেলে, আপনি অ্যাপে রঙ, টাইপোগ্রাফি ও আকার সহ মেটেরিয়াল ডিজাইন সিস্টেম যোগ করা শুরু করতে পারবেন।
পরীক্ষামূলক API
কিছু M3 API পরীক্ষামূলক হিসেবে বিবেচনা করা হয়। এই ধরনের ক্ষেত্রে আপনাকে ফাংশন বা ফাইল লেভেলে
ExperimentalMaterial3Api অ্যানোটেশন ব্যবহার করে অপ্ট-ইন করতে হবে:
// import androidx.compose.material3.ExperimentalMaterial3Api @Composable fun AppComposable() { // M3 composables }
মেটিরিয়াল থিমিং
M3 থিমে নিম্নলিখিত সাবসিস্টেম থাকে: রঙের স্কিম, টাইপোগ্রাফি এবং আকার। আপনি যখন এই মানগুলি কাস্টমাইজ করেন, তখন আপনার পরিবর্তনগুলি অটোমেটিক M3 কম্পোনেন্টে প্রতিফলিত হয় যা আপনি আপনার অ্যাপ তৈরি করতে ব্যবহার করেন।
Jetpack Compose, M3 MaterialTheme
কম্পোজেবলের মাধ্যমে এইসব ধারণা প্রয়োগ করে:
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
আপনার অ্যাপ্লিকেশন কন্টেন্ট থিম করতে, আপনার অ্যাপের জন্য নির্দিষ্ট রঙের স্কিম, টাইপোগ্রাফি এবং আকার নির্ধারণ করুন।
রঙের স্কিম
রঙের স্কিমের ভিত্তি হল পাঁচটি মূল রঙের সেট। এই প্রতিটি রঙ ১৩টি টোনের টোনাল প্যালেটের সাথে সম্পর্কিত, যা Material 3 কম্পোনেন্ট দ্বারা ব্যবহৃত হয়। যেমন, এটি হল Reply-এর জন্য লাইট থিমের রঙের স্কিম:
রঙের স্কিম ও রঙের ভূমিকা সম্পর্কে আরও পড়ুন।
রঙের স্কিম জেনারেট করুন
আপনি ম্যানুয়ালি কাস্টম ColorScheme তৈরি করতে পারলেও, আপনার ব্র্যান্ডের সোর্স কালার ব্যবহার করে
এটি তৈরি করা অনেক সহজ। Material Theme
Builder টুলের সাহায্যে আপনি এটি করতে পারবেন এবং কম্পোজ থিমিং কোড
এক্সপোর্ট করতে পারবেন। নিম্নলিখিত ফাইলগুলি তৈরি করা হয়েছে:
Color.kt-এ আপনার থিমের রঙ থাকে এবং লাইট ও ডার্ক থিমের রঙের জন্য সব ভূমিকা সংজ্ঞায়িত করা থাকে।
val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..
Theme.kt-এ লাইট ও ডার্ক রঙের স্কিম এবং অ্যাপ থিমের সেট-আপ আছে।
private val LightColorScheme = lightColorScheme( primary = md_theme_light_primary, onPrimary = md_theme_light_onPrimary, primaryContainer = md_theme_light_primaryContainer, // .. ) private val DarkColorScheme = darkColorScheme( primary = md_theme_dark_primary, onPrimary = md_theme_dark_onPrimary, primaryContainer = md_theme_dark_primaryContainer, // .. ) @Composable fun ReplyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colorScheme = if (!darkTheme) { LightColorScheme } else { DarkColorScheme } MaterialTheme( colorScheme = colorScheme, content = content ) }
লাইট ও ডার্ক থিম সাপোর্ট করতে, isSystemInDarkTheme() ব্যবহার করুন। সিস্টেম সেটিংসের
উপর ভিত্তি করে, কোন রঙের স্কিম ব্যবহার করতে হবে তা নির্ধারণ করুন: লাইট বা ডার্ক।
ডায়নামিক রঙের স্কিম
ডায়নামিক কালার হল Material You-এর মূল অংশ, যেখানে একটি অ্যালগরিদম ব্যবহারকারীর ওয়ালপেপার থেকে কাস্টম রঙ বের করে যা তাদের অ্যাপ এবং সিস্টেম UI-তে প্রয়োগ করা হয়। এই কালার প্যালেটটি হালকা এবং গাঢ় রঙের স্কিম তৈরি করার জন্য শুরু করার পয়েন্ট হিসাবে ব্যবহৃত হয়।
Android 12 ও তার পরবর্তী যেকোনও ভার্সনে ডায়নামিক কালার উপলভ্য। ডায়নামিক কালার উপলভ্য থাকলে, আপনি ডায়নামিক ColorScheme সেট-আপ করতে পারবেন। তা না হলে, আপনাকে কাস্টম লাইট বা ডার্ক ColorScheme
ব্যবহার করতে হবে।
ColorScheme ডায়নামিক লাইট বা
ডার্ক রঙের স্কিম তৈরি করার জন্য বিল্ডার ফাংশন প্রদান করে:
// Dynamic color is available on Android 12+ val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colors = when { dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current) dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current) darkTheme -> DarkColorScheme else -> LightColorScheme }
রঙের ব্যবহার
আপনি MaterialTheme.colorScheme-এর মাধ্যমে আপনার অ্যাপে মেটিরিয়াল থিমের রঙ অ্যাক্সেস করতে পারবেন:
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
কম্পোনেন্টের স্ট্যাটাস, প্রাধান্য ও গুরুত্বের উপর নির্ভর করে বিভিন্ন জায়গায় প্রতিটি কালার রোল ব্যবহার করা যেতে পারে।
- প্রাথমিক হল বেস রঙ, যা বিশিষ্ট বোতাম, অ্যাক্টিভ স্টেট এবং এলিভেটেড সারফেসের টিন্টের মতো প্রধান কম্পোনেন্টের জন্য ব্যবহৃত হয়।
- UI-তে কম গুরুত্বপূর্ণ কম্পোনেন্টের জন্য সেকেন্ডারি কী কালার ব্যবহার করা হয়, যেমন ফিল্টার চিপ এবং এটি কালার এক্সপ্রেশনের সুযোগ বাড়ায়।
- টার্শিয়ারি মূল রঙ ব্যবহার করে কন্ট্রাস্ট অ্যাকসেন্টের ভূমিকা নির্ধারণ করা হয় যা প্রাথমিক ও সেকেন্ডারি রঙের মধ্যে ভারসাম্য বজায় রাখতে অথবা কোনও এলিমেন্টের প্রতি আরও বেশি মনোযোগ আকর্ষণ করতে ব্যবহার করা যেতে পারে।
Reply স্যাম্পেল অ্যাপ ডিজাইনে, বেছে নেওয়া আইটেমকে হাইলাইট করতে, primary-container-এর উপরে on-primary-container রঙ ব্যবহার করা হয়।
Card( colors = CardDefaults.cardColors( containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceVariant ) ) { Text( text = "Dinner club", style = MaterialTheme.typography.bodyLarge, color = if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer else MaterialTheme.colorScheme.onSurface, ) }
এখানে আপনি উত্তর নেভিগেশন ড্রয়ারে দেখতে পাবেন কীভাবে সেকেন্ডারি এবং টারশিয়ারি কন্টেনারের রঙগুলি জোর এবং অ্যাকসেন্ট তৈরি করতে বিপরীতে ব্যবহার করা হয়।
টাইপোগ্রাফি
Material Design 3-এ টাইপ স্কেল নির্দিষ্ট করা আছে, যার মধ্যে টেক্সট স্টাইলও রয়েছে যা Material Design 2 থেকে নেওয়া হয়েছে। নামকরণ এবং গ্রুপিংকে সহজ করে করা হয়েছে: ডিসপ্লে, হেডলাইন, শীর্ষক, বডি এবং লেবেল, যার প্রতিটির জন্য বড়, মাঝারি এবং ছোট সাইজ রয়েছে।
| M3 | ডিফল্ট ফন্ট সাইজ/লাইনের উচ্চতা |
displayLarge |
Roboto 57/64 |
displayMedium |
Roboto 45/52 |
displaySmall |
Roboto 36/44 |
headlineLarge |
Roboto 32/40 |
headlineMedium |
Roboto 28/36 |
headlineSmall |
Roboto 24/32 |
titleLarge |
New- Roboto Medium 22/28 |
titleMedium |
Roboto Medium 16/24 |
titleSmall |
Roboto Medium 14/20 |
bodyLarge |
Roboto 16/24 |
bodyMedium |
Roboto 14/20 |
bodySmall |
Roboto 12/16 |
labelLarge |
Roboto Medium 14/20 |
labelMedium |
Roboto Medium 12/16 |
labelSmall |
New Roboto Medium, 11/16 |
টাইপোগ্রাফি নির্দিষ্ট করুন
Compose, M3 Typography ক্লাস প্রদান করে — আগে থেকে থাকা
TextStyle এবং ফন্ট-সম্পর্কিত ক্লাসের সাথে — Material 3 টাইপ
স্কেল মডেল করতে। Typography কনস্ট্রাক্টর প্রতিটি স্টাইলের জন্য ডিফল্ট অফার করে যাতে আপনি কাস্টমাইজ করতে চান না এমন কোনও প্যারামিটার বাদ দিতে পারেন:
val replyTypography = Typography( titleLarge = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = 0.sp ), titleMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp ), // .. ) // ..
আপনার প্রোডাক্টের জন্য সম্ভবত মেটেরিয়াল ডিজাইন টাইপ স্কেলের ১৫টি ডিফল্ট স্টাইলের সবকটি প্রয়োজন হবে না। এই উদাহরণে, কমানো সেটের জন্য পাঁচটি সাইজ বেছে নেওয়া হয়েছে এবং বাকিগুলি বাদ দেওয়া হয়েছে।
আপনি TextStyle
এবং ফন্ট-সম্পর্কিত প্রপার্টি যেমন fontFamily এবং letterSpacing-এর ডিফল্ট ভ্যালু পরিবর্তন করে আপনার টাইপোগ্রাফি কাস্টমাইজ করতে পারেন।
bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp, baselineShift = BaselineShift.Subscript ),
আপনার Typography নির্ধারণ করা হয়ে গেলে, এটি M3 MaterialTheme-এ পাস করুন:
MaterialTheme( typography = replyTypography, ) { // M3 app Content }
টেক্সট স্টাইল ব্যবহার করুন
MaterialTheme.typography ব্যবহার করে আপনি M3 MaterialTheme কম্পোজেবলকে দেওয়া টাইপোগ্রাফি
পুনরুদ্ধার করতে পারবেন:
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
আপনি টাইপোগ্রাফি প্রয়োগ করা সম্পর্কে মেটেরিয়াল নির্দেশিকা থেকে আরও জানতে পারবেন।
আকার
মেটেরিয়াল সারফেস বিভিন্ন আকারে দেখানো যেতে পারে। আকার সরাসরি মনোযোগ আকর্ষণ করে, উপাদান শনাক্ত করে, অবস্থা জানায় এবং ব্র্যান্ডকে প্রকাশ করে।
শেপ স্কেল কন্টেনারের কোণের স্টাইল নির্ধারণ করে, যা বর্গাকার থেকে শুরু করে সম্পূর্ণ বৃত্তাকার পর্যন্ত বিভিন্ন ধরনের গোলাকার কোণ প্রদান করে।
আকার সংজ্ঞায়িত করুন
Compose, M3 Shapes ক্লাসকে নতুন M3 শেপ সাপোর্ট করার জন্য এক্সপ্যান্ড করা প্যারামিটার প্রদান করে। M3 শেপ স্কেল টাইপ স্কেলের মতো,
যা UI জুড়ে বিভিন্ন ধরনের শেপ ব্যবহার করার সুবিধা দেয়।
বিভিন্ন সাইজের আকার আছে:
- অত্যন্ত ছোট
- ছোট
- মাঝারি
- বড়
- অত্যন্ত বড়
ডিফল্ট হিসেবে, প্রতিটি শেপের একটি ডিফল্ট ভ্যালু থাকে, তবে আপনি সেগুলি ওভাররাইড করতে পারবেন:
val replyShapes = Shapes( extraSmall = RoundedCornerShape(4.dp), small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp), extraLarge = RoundedCornerShape(24.dp) )
আপনার Shapes সংজ্ঞায়িত করার পরে, আপনি এটি M3 MaterialTheme-এ পাস করতে পারবেন:
MaterialTheme( shapes = replyShapes, ) { // M3 app Content }
আকার ব্যবহার করুন
আপনি MaterialTheme-এ সব কম্পোনেন্টের জন্য শেপের স্কেল কাস্টমাইজ করতে পারবেন অথবা
আপনি প্রতিটি কম্পোনেন্টের ভিত্তিতে এটি করতে পারবেন।
ডিফল্ট ভ্যালু সহ মাঝারি ও বড় আকারের শেপ প্রয়োগ করুন:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ } FloatingActionButton( shape = MaterialTheme.shapes.large, onClick = { } ) { /* fab content */ }
Compose-এর অংশ হিসেবে আরও দুটি আকার — RectangleShape এবং CircleShape —
আছে। আয়তাকার আকৃতির কোনও বর্ডার রেডিয়াস নেই এবং বৃত্তাকার আকৃতিতে সম্পূর্ণ বৃত্তাকার প্রান্ত দেখানো হয়:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
নিচের উদাহরণে ডিফল্ট আকারের মান সহ কিছু কম্পোনেন্ট দেখানো হয়েছে:
আপনি আকৃতি প্রয়োগ করার বিষয়ে মেটেরিয়াল নির্দেশিকা থেকে আরও পড়তে পারেন।
গুরুত্ব আরোপ করা
M3-তে রঙের ভেরিয়েশন এবং অন-কালার কম্বিনেশন ব্যবহার করে জোর দেওয়া হয়। M3-তে, আপনার UI-তে জোর দেওয়ার দুটি উপায় আছে:
- সারফেস, সারফেস-ভেরিয়েন্ট এবং ব্যাকগ্রাউন্ডের পাশাপাশি অন-সারফেস, অন-সারফেস-ভেরিয়েন্ট কালার ব্যবহার করা, যা এক্সপ্যান্ড করা M3 কালার সিস্টেম থেকে নেওয়া হয়েছে। যেমন, সারফেস অন-সারফেস-ভেরিয়েন্টের সাথে ব্যবহার করা যেতে পারে এবং সারফেস-ভেরিয়েন্ট অন-সারফেসের সাথে ব্যবহার করা যেতে পারে যাতে বিভিন্ন লেভেলের জোর দেওয়া যায়।
- টেক্সটের জন্য বিভিন্ন ফন্ট ওয়েট ব্যবহার করা। উপরে, আপনি দেখেছেন যে আপনি আমাদের টাইপ স্কেলে কাস্টম ওজন প্রদান করতে পারেন বিভিন্ন জোর প্রদান করার জন্য।
bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )
উচ্চতা
Material 3 প্রধানত টোনাল কালার ওভারলে ব্যবহার করে এলিভেশন দেখায়। এটি কন্টেনার ও সারফেসকে একে অপরের থেকে আলাদা করার নতুন উপায় — টোনাল এলিভেশন বাড়ালে আরও স্পষ্ট টোন ব্যবহার করা হয় — এর সাথে শ্যাডোও থাকে।
ডার্ক থিমে এলিভেশন ওভারলে, Material 3-তে টোনাল কালার ওভারলেতে পরিবর্তিত হয়েছে। ওভারলে রঙটি প্রাথমিক রঙের স্লট থেকে আসে।
M3 Surface — বেশিরভাগ M3 কম্পোনেন্টের পিছনে থাকা ব্যাকিং কম্পোজেবল — টোনাল এবং শ্যাডো এলিভেশন, দুটির জন্যই সহায়তা অন্তর্ভুক্ত করে:
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
মেটেরিয়াল কম্পোনেন্ট
মেটেরিয়াল ডিজাইনে মেটেরিয়াল কম্পোনেন্টের (যেমন বোতাম, চিপ, কার্ড, নেভিগেশন বার) একটি সমৃদ্ধ সেট রয়েছে যা আগে থেকেই মেটেরিয়াল থিমিং অনুসরণ করে এবং আপনাকে সুন্দর মেটেরিয়াল ডিজাইন অ্যাপ তৈরি করতে সাহায্য করে। আপনি ডিফল্ট প্রপার্টি সহ কম্পোনেন্ট ব্যবহার করা শুরু করতে পারেন।
Button(onClick = { /*..*/ }) { Text(text = "My Button") }
M3 একই কম্পোনেন্টের অনেক ভার্সন প্রদান করে যা বিভিন্ন ভূমিকায় ব্যবহার করা হয় গুরুত্ব এবং মনোযোগ অনুযায়ী।
- সবচেয়ে বেশি জোর দেওয়া অ্যাকশনের জন্য একটি এক্সটেন্ডেড ফ্লোটিং অ্যাকশন বোতাম:
ExtendedFloatingActionButton( onClick = { /*..*/ }, modifier = Modifier ) { Icon( imageVector = Icons.Default.Edit, contentDescription = stringResource(id = R.string.edit), ) Text( text = stringResource(id = R.string.add_entry), ) }
- অত্যন্ত গুরুত্বপূর্ণ অ্যাকশনের জন্য ফিল করা বোতাম:
Button(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.view_entry)) }
- কম গুরুত্বের অ্যাকশনের জন্য টেক্সট বোতাম:
TextButton(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.replated_articles)) }
আপনি মেটেরিয়াল বোতাম ও অন্যান্য কম্পোনেন্ট সম্পর্কে আরও জানতে পারবেন। Material 3-তে বোতাম, অ্যাপ বার, নেভিগেশন কম্পোনেন্টের মতো বিভিন্ন ধরনের কম্পোনেন্ট স্যুট রয়েছে যা বিশেষভাবে বিভিন্ন ব্যবহারের ক্ষেত্রে এবং স্ক্রিনের সাইজের জন্য ডিজাইন করা হয়েছে।
নেভিগেশন কম্পোনেন্ট
এছাড়াও, Material-এ বেশ কিছু নেভিগেশন কম্পোনেন্ট আছে যা আপনাকে বিভিন্ন স্ক্রিন সাইজ ও স্টেটের উপর নির্ভর করে নেভিগেশন প্রয়োগ করতে সাহায্য করে।
আপনি ৫ বা তার কম গন্তব্য টার্গেট করতে চাইলে, কম্প্যাক্ট ডিভাইসের জন্য NavigationBar ব্যবহার করা হয়:
NavigationBar(modifier = Modifier.fillMaxWidth()) { Destinations.entries.forEach { replyDestination -> NavigationBarItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
NavigationRail ল্যান্ডস্কেপ মোডে ছোট থেকে মাঝারি সাইজের ট্যাবলেট বা ফোনে
ব্যবহার করা হয়। এটি ব্যবহারকারীদের জন্য এরগোনমিক্স প্রদান করে এবং সেইসব ডিভাইসের জন্য ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
NavigationRail( modifier = Modifier.fillMaxHeight(), ) { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
BottomNavigationBar (বাঁদিকে) এবং NavigationRail (ডানদিকে)-এর উত্তর শোকেসসব ডিভাইসের সাইজের জন্য ইমারসিভ ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে ডিফল্ট থিমিংয়ে দুটি ব্যবহার করে উত্তর দিন।
NavigationDrawer মাঝারি থেকে বড় সাইজের ট্যাবলেটের জন্য ব্যবহার করা হয় যেখানে
বিস্তারিত তথ্য দেখানোর জন্য পর্যাপ্ত জায়গা থাকে। আপনি NavigationRail-এর সাথে PermanentNavigationDrawer বা
ModalNavigationDrawer, দুটিই ব্যবহার করতে পারবেন।
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }
নেভিগেশন বিকল্প ব্যবহারকারীর অভিজ্ঞতা, এরগোনমিক্স ও রিচেবিলিটি উন্নত করে। আপনি Compose অ্যাডাপ্টিভ কোডল্যাব থেকে মেটেরিয়াল নেভিগেশন কম্পোনেন্ট সম্পর্কে আরও জানতে পারবেন।
কোনও কম্পোনেন্টের থিমিং কাস্টমাইজ করা
M3 পছন্দমতো সাজিয়ে নেওয়া ও নমনীয়তাকে উৎসাহিত করে। সব কম্পোনেন্টে ডিফল্ট রঙ প্রয়োগ করা থাকে, তবে প্রয়োজন হলে রঙ কাস্টমাইজ করার জন্য ফ্লেক্সিবল API-ও থাকে।
কার্ড ও বোতামের মতো বেশিরভাগ কম্পোনেন্ট, ডিফল্ট অবজেক্ট প্রদান করে যা কালার ও এলিভেশন ইন্টারফেস দেখায় এবং আপনার কম্পোনেন্ট কাস্টমাইজ করার জন্য এগুলি পরিবর্তন করা যেতে পারে:
val customCardColors = CardDefaults.cardColors( contentColor = MaterialTheme.colorScheme.primary, containerColor = MaterialTheme.colorScheme.primaryContainer, disabledContentColor = MaterialTheme.colorScheme.surface, disabledContainerColor = MaterialTheme.colorScheme.onSurface, ) val customCardElevation = CardDefaults.cardElevation( defaultElevation = 8.dp, pressedElevation = 2.dp, focusedElevation = 4.dp ) Card( colors = customCardColors, elevation = customCardElevation ) { // m3 card content }
আপনি Material 3 কাস্টমাইজ করা সম্পর্কে আরও পড়তে পারেন।
সিস্টেম UI
Material You-এর কিছু দিক Android 12 ও তার পরবর্তী ভার্সনের নতুন ভিজ্যুয়াল স্টাইল ও সিস্টেম UI থেকে নেওয়া হয়েছে। দুটি মূল ক্ষেত্রে পরিবর্তন করা হয়েছে, সেগুলি হল রিপল ও ওভারস্ক্রল। এইসব পরিবর্তন প্রয়োগ করার জন্য অতিরিক্ত কিছু করতে হবে না।
রিপল
রিপেল এখন প্রেস করা হলে সারফেস আলোকিত করতে একটি সূক্ষ্ম স্পার্কল ব্যবহার করে। Android-এ Compose Material Ripple প্ল্যাটফর্ম RippleDrawable ব্যবহার করে, তাই Android 12 এবং তার পরবর্তী ভার্সনে সব Material কম্পোনেন্টের জন্য স্পার্কল রিপল উপলভ্য।
ওভারস্ক্রল
ওভারস্ক্রল এখন স্ক্রলিং কন্টেনারের প্রান্তে স্ট্রেচ এফেক্ট ব্যবহার করে।
স্ক্রোলিং কন্টেনার কম্পোজেবলে স্ট্রেচ ওভারস্ক্রোল ডিফল্ট হিসেবে চালু থাকে — যেমন,
LazyColumn, LazyRow এবং LazyVerticalGrid —
Compose Foundation 1.1.0 এবং তার পরবর্তী ভার্সনে, API লেভেল যাই হোক না কেন।
অ্যাক্সেসিবিলিটি
মেটেরিয়াল কম্পোনেন্টে অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড তৈরি করা হয়েছে যাতে অন্তর্ভুক্তিমূলক প্রোডাক্ট ডিজাইনের ভিত্তি প্রদান করা যায়। আপনার প্রোডাক্টের অ্যাক্সেসিবিলিটি সম্পর্কে বুঝলে, স্বল্প দৃষ্টিশক্তি সম্পন্ন, অন্ধত্ব, শ্রবণশক্তি হ্রাস, কগনিটিভ প্রতিবন্ধকতা, মোটর প্রতিবন্ধকতা বা পরিস্থিতিগত অক্ষমতা (যেমন, হাত ভেঙে যাওয়া) সহ সব ব্যবহারকারীর জন্য ব্যবহারযোগ্যতা উন্নত করতে পারবেন।
রঙের অ্যাক্সেসিবিলিটি
কালার কনট্রাস্টের জন্য অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড পূরণ করতে ডায়নামিক কালার ডিজাইন করা হয়েছে। যেকোনও রঙের স্কিম ডিফল্ট হিসেবে অ্যাক্সেসযোগ্য করার জন্য টোনাল প্যালেটের সিস্টেম খুবই গুরুত্বপূর্ণ।
মেটেরিয়ালের কালার সিস্টেম স্ট্যান্ডার্ড টোন ভ্যালু ও পরিমাপ প্রদান করে যা অ্যাক্সেসযোগ্য কনট্রাস্ট রেশিও পূরণ করতে ব্যবহার করা যেতে পারে।
সমস্ত মেটেরিয়াল কম্পোনেন্ট এবং ডায়নামিক থিমিং আগে থেকেই টোনাল প্যালেট-এর সেট থেকে উপরের রঙের ভূমিকা ব্যবহার করে, যা অ্যাক্সেসিবিলিটির প্রয়োজনীয়তা পূরণ করার জন্য বেছে নেওয়া হয়েছে। তবে, আপনি কম্পোনেন্ট কাস্টমাইজ করলে, উপযুক্ত কালার রোল ব্যবহার করতে ভুলবেন না এবং অমিল এড়িয়ে চলুন।
ব্যবহারকারীকে অ্যাক্সেসযোগ্য কনট্রাস্ট প্রদান করতে, প্রাইমারির উপরে অন-প্রাইমারি এবং প্রাইমারি-কন্টেনারের উপরে অন-প্রাইমারি-কন্টেনার ব্যবহার করুন এবং অন্যান্য অ্যাকসেন্ট ও নিউট্রাল রঙের জন্য একই পদ্ধতি অনুসরণ করুন।
প্রাইমারি কন্টেনারের উপরে টারশিয়ারি কন্টেনার ব্যবহার করলে ব্যবহারকারীকে একটি খারাপ কনট্রাস্ট বোতাম দেয়:
// ✅ Button with sufficient contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary ) ) { } // ❌ Button with poor contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.tertiaryContainer, contentColor = MaterialTheme.colorScheme.primaryContainer ) ) { }
টাইপোগ্রাফি অ্যাক্সেসিবিলিটি
M3 টাইপ স্কেল স্ট্যাটিক টাইপ র্যাম্প এবং মান আপডেট করে যাতে ডিভাইস জুড়ে স্কেল করা সাইজ বিভাগের একটি সরলীকৃত কিন্তু ডাইনামিক ফ্রেমওয়ার্ক অফার করা যায়।
যেমন, M3-তে, ডিভাইসের ধরন অনুযায়ী, যেমন ফোন বা ট্যাবলেট, Display Small-এর জন্য বিভিন্ন ভ্যালু অ্যাসাইন করা যেতে পারে।
বড় স্ক্রিন
আপনার অ্যাপ অ্যাক্সেসিবল করতে এবং বড় ডিভাইস ব্যবহারকারীদের জন্য এরগোনমিক্স উন্নত করতে, Material, অ্যাডাপ্টিভ লেআউট এবং ফোল্ডেবল ডিভাইসের ব্যাপারে নির্দেশিকা প্রদান করে।
বড় ডিভাইসের জন্য ব্যবহারকারীকে আরও ভালো অভিজ্ঞতা প্রদান করতে, Material বিভিন্ন ধরনের নেভিগেশন প্রদান করে।
আপনি Android বড় স্ক্রিন অ্যাপ কোয়ালিটি নির্দেশিকা সম্পর্কে আরও জানতে এবং অ্যাডাপ্টিভ ও অ্যাক্সেসিবল ডিজাইনের জন্য আমাদের Reply স্যাম্পেল দেখতে পারবেন।
আরও জানুন
Compose-এ মেটিরিয়াল থিমিং সম্পর্কে আরও জানতে, নিম্নলিখিত রিসোর্সগুলি চেক করুন:
স্যাম্পেল অ্যাপ
Docs
API রেফারেন্স ও সোর্স কোড
ভিডিও
আপনার জন্য সাজেস্ট করা হয়েছে
- মনে রাখবেন: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট দেখানো হয়
- Compose-এ Material 2 থেকে Material 3-এ মাইগ্রেট করা
- Compose-এ Material Design 2
- Compose-এ কাস্টম ডিজাইন সিস্টেম