কম্পোজে মেটেরিয়াল ডিজাইন 3

জেটপ্যাক কম্পোজ, ম্যাটেরিয়াল ইউ এবং ম্যাটেরিয়াল ৩ এক্সপ্রেসিভ- এর একটি বাস্তবায়ন প্রদান করে, যা ম্যাটেরিয়াল ডিজাইনের পরবর্তী সংস্করণ। এম৩ এক্সপ্রেসিভ হলো ম্যাটেরিয়াল ডিজাইন ৩-এর একটি সম্প্রসারণ, যাতে থিমিং, কম্পোনেন্ট, মোশন, টাইপোগ্রাফি এবং আরও অনেক কিছুর জন্য গবেষণা-সমর্থিত আপডেট অন্তর্ভুক্ত রয়েছে — এই সবকিছুই আপনাকে এমন আকর্ষণীয় ও কাঙ্ক্ষিত পণ্য তৈরি করতে সাহায্য করার জন্য ডিজাইন করা হয়েছে যা ব্যবহারকারীরা পছন্দ করে। এটি ডাইনামিক কালারের মতো ম্যাটেরিয়াল ইউ পার্সোনালাইজেশন ফিচারগুলোকেও সমর্থন করে। এম৩ এক্সপ্রেসিভ অ্যান্ড্রয়েড ১৬-এর ভিজ্যুয়াল স্টাইল এবং সিস্টেম UI-এর পরিপূরক।

নিম্নে, আমরা উদাহরণ হিসেবে রিপ্লাই স্যাম্পল অ্যাপটি ব্যবহার করে ম্যাটেরিয়াল ডিজাইন ৩-এর বাস্তবায়ন প্রদর্শন করছি। রিপ্লাই স্যাম্পলটি সম্পূর্ণরূপে ম্যাটেরিয়াল ডিজাইন ৩-এর উপর ভিত্তি করে নির্মিত।

নির্ভরশীলতা

আপনার Compose অ্যাপে Material 3 ব্যবহার শুরু করতে, আপনার build.gradle ফাইলগুলিতে Compose Material 3 ডিপেন্ডেন্সিটি যোগ করুন:

implementation "androidx.compose.material3:material3:$material3_version"

ডিপেন্ডেন্সিটি যুক্ত হয়ে গেলে, আপনি আপনার অ্যাপে রঙ, টাইপোগ্রাফি এবং আকৃতি সহ ম্যাটেরিয়াল ডিজাইন সিস্টেমগুলো যোগ করা শুরু করতে পারেন।

পরীক্ষামূলক এপিআই

কিছু M3 API পরীক্ষামূলক হিসেবে বিবেচিত হয়। সেক্ষেত্রে, আপনাকে ফাংশন বা ফাইল লেভেলে ExperimentalMaterial3Api অ্যানোটেশন ব্যবহার করে এটি ব্যবহারের অনুমতি দিতে হবে:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

উপাদান থিমিং

একটি M3 থিমে কালার স্কিম , টাইপোগ্রাফি এবং শেপস- এর মতো সাবসিস্টেমগুলো থাকে। আপনি যখন এই মানগুলো কাস্টমাইজ করেন, তখন আপনার অ্যাপ তৈরি করতে ব্যবহৃত M3 কম্পোনেন্টগুলোতে সেই পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।

Jetpack Compose, M3 MaterialTheme কম্পোজেবলের মাধ্যমে এই ধারণাগুলো বাস্তবায়ন করে:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}
Material3Snippets.kt

আপনার অ্যাপ্লিকেশনের বিষয়বস্তুকে থিম অনুযায়ী সাজাতে, আপনার অ্যাপের জন্য নির্দিষ্ট কালার স্কিম, টাইপোগ্রাফি এবং আকার নির্ধারণ করুন।

রঙের পরিকল্পনা

একটি কালার স্কিমের ভিত্তি হলো পাঁচটি মূল রঙের একটি সেট। এই রঙগুলোর প্রতিটি ১৩টি টোনের একটি টোনাল প্যালেটের সাথে সম্পর্কিত, যা ম্যাটেরিয়াল ৩-এর কম্পোনেন্টগুলোতে ব্যবহৃত হয়। উদাহরণস্বরূপ, রিপ্লাই- এর লাইট থিমের কালার স্কিমটি হলো এটি:

রঙের বিন্যাস এবং রঙের ভূমিকা সম্পর্কে আরও পড়ুন।

রঙের স্কিম তৈরি করুন

যদিও আপনি ম্যানুয়ালি একটি কাস্টম ColorScheme তৈরি করতে পারেন, তবে আপনার ব্র্যান্ডের সোর্স কালার ব্যবহার করে এটি তৈরি করা প্রায়শই সহজ হয়। ম্যাটেরিয়াল থিম বিল্ডার টুল আপনাকে এটি করতে দেয় এবং ঐচ্ছিকভাবে কম্পোজ থিমিং কোড এক্সপোর্ট করার সুযোগ দেয়। নিম্নলিখিত ফাইলগুলি তৈরি হয়:

• 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)
// ..
// ..
Material3Snippets.kt

• 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
    )
}
Material3Snippets.kt

লাইট এবং ডার্ক থিম সমর্থন করার জন্য, isSystemInDarkTheme() ব্যবহার করুন। সিস্টেম সেটিংসের উপর ভিত্তি করে, কোন কালার স্কিম ব্যবহার করা হবে তা নির্ধারণ করুন: লাইট নাকি ডার্ক।

গতিশীল রঙের স্কিম

ডাইনামিক কালার হলো ম্যাটেরিয়াল ইউ-এর মূল অংশ, যেখানে একটি অ্যালগরিদম ব্যবহারকারীর ওয়ালপেপার থেকে কাস্টম রঙ তৈরি করে তাদের অ্যাপ এবং সিস্টেম UI-তে প্রয়োগ করে। এই কালার প্যালেটটি হালকা এবং গাঢ় রঙের স্কিম তৈরি করার জন্য প্রাথমিক ভিত্তি হিসেবে ব্যবহৃত হয়।

ডাইনামিক কালার অ্যান্ড্রয়েড ১২ এবং তার পরবর্তী সংস্করণগুলোতে উপলব্ধ। যদি ডাইনামিক কালার উপলব্ধ থাকে, তবে আপনি একটি ডাইনামিক 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
}
Material3Snippets.kt

রঙের ব্যবহার

আপনি আপনার অ্যাপে MaterialTheme.colorScheme এর মাধ্যমে ম্যাটেরিয়াল থিমের রঙগুলো অ্যাক্সেস করতে পারেন:

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)
Material3Snippets.kt

উপাদানটির অবস্থা, গুরুত্ব এবং তাৎপর্যের ওপর নির্ভর করে প্রতিটি রঙের ভূমিকা বিভিন্ন স্থানে ব্যবহার করা যেতে পারে।

• প্রাইমারি হলো ভিত্তি রঙ, যা প্রধান উপাদান যেমন সুস্পষ্ট বাটন, সক্রিয় অবস্থা এবং উঁচু পৃষ্ঠতলের আভার জন্য ব্যবহৃত হয়।
• সেকেন্ডারি কী কালারটি UI-এর কম গুরুত্বপূর্ণ উপাদান, যেমন ফিল্টার চিপ, এর জন্য ব্যবহৃত হয় এবং এটি রঙের অভিব্যক্তির সুযোগ প্রসারিত করে।
• টারশিয়ারি কী কালার বা তৃতীয় প্রধান রঙটি বৈসাদৃশ্যপূর্ণ অ্যাকসেন্টের ভূমিকা নির্ধারণ করতে ব্যবহৃত হয়, যা প্রাইমারি ও সেকেন্ডারি রঙের মধ্যে ভারসাম্য আনতে অথবা কোনো একটি উপাদানের প্রতি বাড়তি মনোযোগ আকর্ষণ করতে কাজে লাগে।

Reply স্যাম্পল অ্যাপ ডিজাইনটিতে নির্বাচিত আইটেমটির উপর জোর দেওয়ার জন্য প্রাইমারি-কন্টেইনারের উপরে অন-প্রাইমারি-কন্টেইনার কালার ব্যবহার করা হয়েছে।

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,
    )
}
Material3Snippets.kt

এখানে আপনি রিপ্লাই নেভিগেশন ড্রয়ারে দেখতে পারেন, কীভাবে জোর ও স্বতন্ত্রতা ফুটিয়ে তোলার জন্য দ্বিতীয় ও তৃতীয় স্তরের কন্টেইনারের রঙগুলো বৈপরীত্যের মাধ্যমে ব্যবহার করা হয়েছে।

টাইপোগ্রাফি

ম্যাটেরিয়াল ডিজাইন ৩ একটি টাইপ স্কেল সংজ্ঞায়িত করে, যার মধ্যে ম্যাটেরিয়াল ডিজাইন ২ থেকে অভিযোজিত টেক্সট স্টাইলগুলোও অন্তর্ভুক্ত। এর নামকরণ এবং গ্রুপিংকে সরল করে ডিসপ্লে, হেডলাইন, টাইটেল, বডি এবং লেবেলে আনা হয়েছে, এবং প্রতিটির জন্য বড়, মাঝারি ও ছোট আকার রয়েছে।

টাইপোগ্রাফির সংজ্ঞা দিন

কম্পোজ, ম্যাটেরিয়াল ৩ টাইপ স্কেল মডেল করার জন্য বিদ্যমান TextStyle এবং ফন্ট-সম্পর্কিত ক্লাসগুলোর পাশাপাশি M3 Typography ক্লাসটি প্রদান করে। 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
    ),
    // ..
)
// ..
Material3Snippets.kt

আপনার পণ্যের জন্য সম্ভবত ম্যাটেরিয়াল ডিজাইন টাইপ স্কেলের ১৫টি ডিফল্ট স্টাইলের সবগুলোর প্রয়োজন হবে না। এই উদাহরণে, সীমিত সংখ্যক স্টাইলের জন্য পাঁচটি সাইজ বেছে নেওয়া হয়েছে এবং বাকিগুলো বাদ দেওয়া হয়েছে।

আপনি 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
),
Material3Snippets.kt

একবার আপনার Typography নির্ধারণ করা হয়ে গেলে, সেটি M3 MaterialTheme এ প্রেরণ করুন:

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}
Material3Snippets.kt

টেক্সট স্টাইল ব্যবহার করুন

আপনি MaterialTheme.typography ব্যবহার করে M3 MaterialTheme কম্পোজেবলে প্রদত্ত টাইপোগ্রাফি পুনরুদ্ধার করতে পারেন:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)
Material3Snippets.kt

টাইপোগ্রাফি প্রয়োগের বিষয়ে ম্যাটেরিয়ালের নির্দেশিকা সম্পর্কে আপনি আরও পড়তে পারেন।

আকৃতি

বস্তুগত পৃষ্ঠতল বিভিন্ন আকৃতিতে প্রদর্শন করা যেতে পারে। আকৃতি মনোযোগ আকর্ষণ করে, উপাদান শনাক্ত করে, অবস্থা প্রকাশ করে এবং ব্র্যান্ডকে তুলে ধরে।

আকৃতির স্কেলটি পাত্রের কোণার শৈলী নির্ধারণ করে, যা বর্গাকার থেকে সম্পূর্ণ বৃত্তাকার পর্যন্ত বিভিন্ন মাত্রার গোলাকার আকৃতি প্রদান করে।

আকৃতি সংজ্ঞায়িত করুন

Compose নতুন M3 শেপ সমর্থন করার জন্য M3 Shapes ক্লাসকে বর্ধিত প্যারামিটারসহ প্রদান করে। 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)
)
Material3Snippets.kt

একবার আপনার Shapes সংজ্ঞায়িত করা হয়ে গেলে, আপনি সেটি M3 MaterialTheme এ পাঠাতে পারেন:

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}
Material3Snippets.kt

আকার ব্যবহার করুন

আপনি MaterialTheme এর সমস্ত কম্পোনেন্টের জন্য আকৃতির স্কেল কাস্টমাইজ করতে পারেন অথবা প্রতিটি কম্পোনেন্টের জন্য আলাদাভাবেও তা করতে পারেন।

ডিফল্ট মান সহ মাঝারি এবং বড় আকৃতি প্রয়োগ করুন:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}
Material3Snippets.kt

আরও দুটি আকৃতি আছে — RectangleShape এবং CircleShape — যা কম্পোজের অংশ। আয়তক্ষেত্রাকার আকৃতির কোনো বর্ডার রেডিয়াস নেই এবং বৃত্তাকার আকৃতিটি সম্পূর্ণ বৃত্তাকার কিনারা দেখায়:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Material3Snippets.kt

নিচের উদাহরণগুলোতে ডিফল্ট আকৃতির মান প্রয়োগ করা কিছু কম্পোনেন্ট দেখানো হয়েছে:

আকৃতি প্রয়োগের বিষয়ে আপনি উপাদান নির্দেশিকা সম্পর্কে আরও পড়তে পারেন।

জোর

M3-তে রঙের বিভিন্নতা এবং এর সাথে অন্যান্য রঙের সংমিশ্রণ ব্যবহার করে কোনো বিষয়কে গুরুত্ব দেওয়া হয়। M3-তে আপনার UI-তে গুরুত্ব যোগ করার দুটি উপায় রয়েছে:

• বর্ধিত M3 কালার সিস্টেম থেকে সারফেস, সারফেস-ভেরিয়েন্ট এবং ব্যাকগ্রাউন্ডের পাশাপাশি অন-সারফেস ও অন-সারফেস-ভেরিয়েন্ট কালারগুলো ব্যবহার করা। উদাহরণস্বরূপ, বিভিন্ন মাত্রার জোর দেওয়ার জন্য সারফেসকে অন-সারফেস-ভেরিয়েন্টের সাথে এবং সারফেস-ভেরিয়েন্টকে অন-সারফেসের সাথে ব্যবহার করা যেতে পারে।

• টেক্সটের জন্য বিভিন্ন ফন্ট ওয়েট ব্যবহার করা। উপরে আপনি দেখেছেন যে, বিভিন্ন জোর দেওয়ার জন্য আমাদের টাইপ স্কেলে কাস্টম ওয়েট যোগ করা যায়।

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)
Material3Snippets.kt

উচ্চতা

উপাদান ৩ মূলত টোনাল রঙের প্রলেপ ব্যবহার করে উচ্চতা উপস্থাপন করে। পাত্র এবং পৃষ্ঠতলকে একে অপরের থেকে আলাদা করার এটি একটি নতুন উপায় — ছায়ার পাশাপাশি, টোনাল উচ্চতা বাড়ানোর জন্য আরও সুস্পষ্ট টোন ব্যবহার করা হয়।

ম্যাটেরিয়াল ৩-এ ডার্ক থিমের এলিভেশন ওভারলেগুলোও টোনাল কালার ওভারলেতে পরিবর্তিত হয়েছে। ওভারলের রঙটি প্রাইমারি কালার স্লট থেকে আসে।

এম৩ সারফেস — যা বেশিরভাগ এম৩ কম্পোনেন্টের নেপথ্যে সুরসৃষ্টিযোগ্য আবহ সঙ্গীত — টোনাল এবং শ্যাডো এলিভেশন উভয়ের জন্যই সমর্থন অন্তর্ভুক্ত করে:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}
Material3Snippets.kt

উপাদান উপাদান

ম্যাটেরিয়াল ডিজাইনের সাথে ম্যাটেরিয়াল কম্পোনেন্টের (যেমন বাটন, চিপ, কার্ড, নেভিগেশন বার) একটি সমৃদ্ধ সেট রয়েছে, যেগুলো আগে থেকেই ম্যাটেরিয়াল থিমিং অনুসরণ করে এবং আপনাকে সুন্দর ম্যাটেরিয়াল ডিজাইন অ্যাপ তৈরি করতে সাহায্য করে। আপনি কম্পোনেন্টগুলো ডিফল্ট প্রোপার্টিসহ সরাসরি ব্যবহার শুরু করতে পারেন।

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}
Material3Snippets.kt

M3 গুরুত্ব এবং মনোযোগের মাত্রা অনুযায়ী বিভিন্ন ভূমিকায় ব্যবহারের জন্য একই উপাদানের একাধিক সংস্করণ সরবরাহ করে।

• সর্বোচ্চ গুরুত্ব আরোপকারী ক্রিয়ার জন্য একটি বর্ধিত ভাসমান অ্যাকশন বাটন:

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}
Material3Snippets.kt

• অত্যন্ত গুরুত্ব আরোপকারী একটি কাজের জন্য ভরাট করা বাটন:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}
Material3Snippets.kt

• কম গুরুত্বের কাজের জন্য একটি টেক্সট বাটন:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}
Material3Snippets.kt

আপনি ম্যাটেরিয়াল বাটন এবং অন্যান্য কম্পোনেন্ট সম্পর্কে আরও পড়তে পারেন। ম্যাটেরিয়াল ৩ বিভিন্ন ধরনের কম্পোনেন্ট স্যুট প্রদান করে, যেমন বাটন, অ্যাপ বার, নেভিগেশন কম্পোনেন্ট, যেগুলো বিশেষভাবে বিভিন্ন ব্যবহারের ক্ষেত্র এবং স্ক্রিনের আকারের জন্য ডিজাইন করা হয়েছে।

নেভিগেশন উপাদান

ম্যাটেরিয়াল বিভিন্ন নেভিগেশন কম্পোনেন্টও প্রদান করে, যা আপনাকে বিভিন্ন স্ক্রিনের আকার ও অবস্থার ওপর নির্ভর করে নেভিগেশন বাস্তবায়ন করতে সাহায্য করে।

ছোট আকারের ডিভাইসে যখন আপনি ৫টি বা তার কম গন্তব্যকে লক্ষ্য করতে চান, তখন NavigationBar ব্যবহার করা হয়:

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

NavigationRail ছোট থেকে মাঝারি আকারের ট্যাবলেট বা ফোনের ল্যান্ডস্কেপ মোডে ব্যবহারের জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের স্বাচ্ছন্দ্য প্রদান করে এবং ঐ ডিভাইসগুলোর জন্য ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

সকল আকারের ডিভাইসে ইমারসিভ ইউজার এক্সপেরিয়েন্স প্রদানের জন্য ডিফল্ট থিমিং-এ উভয়টি ব্যবহার করে উত্তর দিন।

NavigationDrawer মাঝারি থেকে বড় আকারের ট্যাবলেটের জন্য ব্যবহৃত হয়, যেখানে বিস্তারিত দেখানোর জন্য পর্যাপ্ত জায়গা থাকে। আপনি NavigationRail সাথে PermanentNavigationDrawer অথবা ModalNavigationDrawer উভয়ই ব্যবহার করতে পারেন।

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}
Material3Snippets.kt

নেভিগেশন অপশনগুলো ব্যবহারকারীর অভিজ্ঞতা, স্বাচ্ছন্দ্য এবং নাগালের সুবিধা বৃদ্ধি করে। আপনি কম্পোজ অ্যাডাপ্টিভ কোডল্যাবে ম্যাটেরিয়াল নেভিগেশন কম্পোনেন্টগুলো সম্পর্কে আরও জানতে পারবেন।

একটি কম্পোনেন্টের থিমিং কাস্টমাইজ করুন

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
}
Material3Snippets.kt

আপনি ম্যাটেরিয়াল ৩ কাস্টমাইজ করার বিষয়ে আরও পড়তে পারেন।

সিস্টেম UI

ম্যাটেরিয়াল ইউ-এর কিছু বৈশিষ্ট্য অ্যান্ড্রয়েড ১২ এবং তার পরবর্তী সংস্করণগুলোর নতুন ভিজ্যুয়াল স্টাইল ও সিস্টেম UI থেকে এসেছে। দুটি প্রধান ক্ষেত্র যেখানে পরিবর্তন আনা হয়েছে, সেগুলো হলো রিপল এবং ওভারস্ক্রোল। এই পরিবর্তনগুলো কার্যকর করার জন্য কোনো অতিরিক্ত কাজের প্রয়োজন নেই।

রিপল

রিপল এখন চাপ দিলে পৃষ্ঠতল আলোকিত করতে একটি সূক্ষ্ম ঝিকিমিকি ব্যবহার করে। অ্যান্ড্রয়েডে কম্পোজ ম্যাটেরিয়াল রিপল অভ্যন্তরীণভাবে একটি প্ল্যাটফর্ম রিপলড্রয়েবল (RippleDrawable) ব্যবহার করে, তাই অ্যান্ড্রয়েড ১২ এবং তার উপরের সংস্করণগুলিতে সমস্ত ম্যাটেরিয়াল কম্পোনেন্টের জন্য স্পার্কল রিপল উপলব্ধ।

ওভারস্ক্রোল

ওভারস্ক্রোল এখন স্ক্রোলিং কন্টেইনারের প্রান্তে একটি স্ট্রেচ এফেক্ট ব্যবহার করে। Compose Foundation 1.1.0 এবং তার উপরের সংস্করণগুলিতে, API লেভেল নির্বিশেষে, LazyColumn , LazyRow , এবং LazyVerticalGrid এর মতো স্ক্রোলিং কন্টেইনার কম্পোজেবলগুলিতে স্ট্রেচ ওভারস্ক্রোল ডিফল্টরূপে চালু থাকে।

প্রবেশগম্যতা

ম্যাটেরিয়াল উপাদানগুলিতে অন্তর্নির্মিত অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ডগুলি অন্তর্ভুক্তিমূলক পণ্য ডিজাইনের জন্য একটি ভিত্তি প্রদানের উদ্দেশ্যে তৈরি করা হয়েছে। আপনার পণ্যের অ্যাক্সেসিবিলিটি বোঝা সকল ব্যবহারকারীর জন্য এর ব্যবহারযোগ্যতা বাড়াতে পারে, যার মধ্যে রয়েছেন স্বল্প দৃষ্টি, অন্ধত্ব, শ্রবণ প্রতিবন্ধকতা, জ্ঞানীয় প্রতিবন্ধকতা, চলন প্রতিবন্ধকতা, বা পরিস্থিতিগত অক্ষমতা (যেমন ভাঙা হাত) সম্পন্ন ব্যক্তিরা।

রঙের সহজলভ্যতা

ডাইনামিক কালার, রঙের বৈসাদৃশ্যের ক্ষেত্রে অ্যাক্সেসিবিলিটি মান পূরণের জন্য ডিজাইন করা হয়েছে। যেকোনো কালার স্কিমকে ডিফল্টরূপে অ্যাক্সেসিবল করে তোলার জন্য টোনাল প্যালেট সিস্টেমটি অত্যন্ত গুরুত্বপূর্ণ।

উপাদানটির রঙ ব্যবস্থা এমন আদর্শ টোন মান ও পরিমাপ প্রদান করে, যা ব্যবহারযোগ্য কনট্রাস্ট অনুপাত পূরণে কাজে লাগানো যায়।

সমস্ত ম্যাটেরিয়াল কম্পোনেন্ট এবং ডাইনামিক থিমিং ইতিমধ্যেই অ্যাক্সেসিবিলিটির প্রয়োজনীয়তা পূরণের জন্য নির্বাচিত টোনাল প্যালেটের একটি সেট থেকে উপরোক্ত কালার রোলগুলো ব্যবহার করে। তবে, আপনি যদি কম্পোনেন্টগুলো কাস্টমাইজ করেন, তাহলে যথাযথ কালার রোল ব্যবহার করা নিশ্চিত করুন এবং রঙের অমিল এড়িয়ে চলুন।

ব্যবহারকারীর কাছে সহজলভ্য বৈসাদৃশ্য তুলে ধরতে প্রাইমারি রঙের উপরে অন-প্রাইমারি, প্রাইমারি-কন্টেইনার রঙের উপরে অন-প্রাইমারি-কন্টেইনার ব্যবহার করুন এবং অন্যান্য অ্যাকসেন্ট ও নিউট্রাল রঙের ক্ষেত্রেও একই পদ্ধতি অনুসরণ করুন।

প্রাথমিক কন্টেইনারের উপরে তৃতীয় কন্টেইনারের ব্যবহার ব্যবহারকারীকে একটি নিম্ন কনট্রাস্টের বাটন প্রদান করে:

// ✅ 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
    )
) {
}
Material3Snippets.kt

টাইপোগ্রাফির অভিগম্যতা

M3 টাইপ স্কেলটি স্ট্যাটিক টাইপ র‍্যাম্প এবং মানগুলিকে আপডেট করে আকারের বিভাগগুলির একটি সরলীকৃত কিন্তু গতিশীল কাঠামো প্রদান করে, যা বিভিন্ন ডিভাইসে ব্যবহারযোগ্য।

উদাহরণস্বরূপ, M3-তে, ডিভাইসের প্রেক্ষাপট (যেমন ফোন বা ট্যাবলেট) অনুযায়ী Display Small-কে ভিন্ন ভিন্ন মান দেওয়া যেতে পারে।

বড় পর্দা

আপনার অ্যাপগুলোকে সহজলভ্য করতে এবং বড় ডিভাইস ব্যবহারকারীদের জন্য এরগোনমিক্স উন্নত করতে, ম্যাটেরিয়াল অ্যাডাপ্টিভ লেআউট ও ফোল্ডেবল ডিভাইস বিষয়ে নির্দেশনা প্রদান করে।

বড় ডিভাইসগুলোতে আরও ভালো ব্যবহারকারীর অভিজ্ঞতা দেওয়ার জন্য ম্যাটেরিয়াল বিভিন্ন ধরনের নেভিগেশন প্রদান করে।

আপনি অ্যান্ড্রয়েড বড় স্ক্রিনের অ্যাপের গুণমান নির্দেশিকা সম্পর্কে আরও জানতে পারেন এবং অভিযোজিত ও প্রবেশযোগ্য ডিজাইনের জন্য আমাদের রিপ্লাই (Reply) নমুনাটি দেখতে পারেন।

আরও জানুন

Compose-এ Material Theming সম্পর্কে আরও জানতে, নিম্নলিখিত রিসোর্সগুলো দেখুন:

নমুনা অ্যাপ

• রিপ্লাই M3 স্যাম্পল অ্যাপ

ডাক্তাররা

• Compose-এ Material 2 থেকে Material 3-এ স্থানান্তরিত হওয়া
• উপাদান নকশা নির্দেশিকা

এপিআই রেফারেন্স এবং সোর্স কোড

• কম্পোজ মেটেরিয়াল ৩ এপিআই রেফারেন্স
• সোর্স কোডে কম্পোজ মেটেরিয়াল ৩-এর নমুনা

ভিডিও

• জেটপ্যাক কম্পোজে আপনার উপাদান