Compose-এ Material Design 3

Jetpack Compose, Material You এবং Material 3 Expressive-এর প্রয়োগ অফার করে, এটি হল Material Design-এর পরবর্তী ধাপ। M3 Expressive হল Material Design 3-এর একটি বর্ধিত রূপ, যার মধ্যে থিমিং, কম্পোনেন্ট, মোশন, টাইপোগ্রাফি ও আরও অনেক কিছুতে গবেষণা-ভিত্তিক আপডেট অন্তর্ভুক্ত — এগুলি সবই আপনাকে এমন আকর্ষণীয় ও পছন্দসই প্রোডাক্ট তৈরি করতে সাহায্য করার জন্য ডিজাইন করা হয়েছে যা ব্যবহারকারীরা পছন্দ করেন। এছাড়াও, এটি ডায়নামিক কালারের মতো Material You পছন্দমতো সেট করার ফিচার কাজ করে। M3 Expressive ফন্টটি Android 16-এর ভিজ্যুয়াল স্টাইল ও সিস্টেম UI-এর সাথে মানানসই।

নিচে, আমরা Material Design 3 প্রয়োগ দেখিয়েছি, যেখানে Reply sample app-কে উদাহরণ হিসেবে ব্যবহার করা হয়েছে। উত্তর দেওয়ার নমুনাটি সম্পূর্ণভাবে Material Design 3-এর উপর ভিত্তি করে তৈরি করা হয়েছে।

ডিপেন্ডেন্সি

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

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

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

পরীক্ষামূলক API

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

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

মেটেরিয়াল থিমিং

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

Jetpack Compose, M3 MaterialTheme composable-এর মাধ্যমে এই ধারণাগুলি প্রয়োগ করে:

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

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

রঙের স্কিম

পাঁচটি মূল রঙের সেট হল কালার স্কিমের ভিত্তি। এই প্রতিটি রং ১৩টি টোনের টোনাল প্যালেটের সাথে সম্পর্কিত, যা Material 3 কম্পোনেন্ট ব্যবহার করে। যেমন, এটি হল উত্তর দেওয়ার জন্য লাইট থিমের কালার স্কিম:

কালার স্কিম ও কালার রোল সম্পর্কে আরও জানুন।

কালার স্কিম তৈরি করা

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

• 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() ব্যবহার করুন। কোন রঙের স্কিম ব্যবহার করতে হবে তা সিস্টেম সেটিংসের উপর ভিত্তি করে নির্ধারণ করুন: লাইট বা ডার্ক।

ডায়নামিক কালার স্কিম

ডায়নামিক কালার হল 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
}
Material3Snippets.kt

রঙের ব্যবহার

আপনি এগুলির মাধ্যমে আপনার অ্যাপে Material থিমের রঙ অ্যাক্সেস করতে পারবেন 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

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

টাইপোগ্রাফি

Material Design 3 একটি টাইপ স্কেল নির্ধারণ করে, যার মধ্যে Material Design 2 থেকে নেওয়া টেক্সট স্টাইল অন্তর্ভুক্ত। নামকরণ ও গ্রুপিংকে সরল করে এগুলি করা হয়েছে: ডিসপ্লে, হেডলাইন, শীর্ষক, বডি ও লেবেল, প্রতিটি ক্ষেত্রে বড়, মাঝারি ও ছোট সাইজ।

টাইপোগ্রাফি বলতে কী বোঝায় তা ব্যাখ্যা করো

Compose, Material 3 টাইপ স্কেল মডেল করার জন্য — আগে থেকে থাকা 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

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

আপনি 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

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

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

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

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

আকার

মেটেরিয়াল সারফেস বিভিন্ন আকারে দেখানো যেতে পারে। আকৃতি সরাসরি মনোযোগ আকর্ষণ করে, উপাদান শনাক্ত করে, অবস্থা জানায় এবং ব্র্যান্ডের পরিচয় দেয়।

শেপ স্কেল কন্টেনার কোণের স্টাইলকে সংজ্ঞায়িত করে, যা স্কোয়ার থেকে সম্পূর্ণ গোলাকার পর্যন্ত গোলাকার আকৃতির একটি রেঞ্জ অফার করে।

আকার নির্দিষ্ট করা

নতুন M3 শেপ কাজ করানোর জন্য Compose, 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 — যেগুলি Compose-এর অংশ। আয়তাকার শেপে কোনও বর্ডার রেডিয়াস নেই এবং বৃত্তাকার শেপে সম্পূর্ণ বৃত্তাকার প্রান্ত দেখানো হয়েছে:

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

উচ্চতা

Material 3 মূলত টোনাল কালার ওভারলে ব্যবহার করে এলিভেশন দেখায়। এটি হল কন্টেনার ও সারফেসকে একে অপরের থেকে আলাদা করার একটি নতুন পদ্ধতি — টোনাল এলিভেশন বাড়ালে আরও বেশি প্রমিনেন্ট টোন ব্যবহার করা হয় — এটি ছাড়াও শ্যাডো ব্যবহার করা হয়।

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

M3 Surface — বেশিরভাগ M3 কম্পোনেন্টের পেছনের কম্পোজ করা যায় এমন এলিমেন্ট — এতে টোনাল ও শ্যাডো এলিভেশন দু'টির জন্যই সহায়তা অন্তর্ভুক্ত:

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

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

নেভিগেশন কম্পোনেন্ট

এছাড়াও, Material-এ বেশ কিছু নেভিগেশন কম্পোনেন্ট আছে যা আপনাকে বিভিন্ন স্ক্রিন সাইজ ও স্টেট অনুযায়ী নেভিগেশন প্রয়োগ করতে সাহায্য করে।

আপনি ৫ বা তার কম ডেস্টিনেশন টার্গেট করতে চাইলে, কম্প্যাক্ট ডিভাইসের জন্য 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

নেভিগেশন বিকল্প ব্যবহারকারীর অভিজ্ঞতা, কর্মদক্ষতা ও অ্যাক্সেসযোগ্যতা বাড়ায়। আপনি 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
}
Material3Snippets.kt

আপনি Material 3 কাস্টমাইজ করা সম্পর্কে আরও পড়তে পারেন।

সিস্টেম UI

Material You-এর কিছু দিক Android 12 ও এর পরের যেকোনও ভার্সনে নতুন ভিজ্যুয়াল স্টাইল ও সিস্টেম UI থেকে আসে। দুটি মূল ক্ষেত্র যেখানে পরিবর্তন করা হয়েছে তা হল রিপেল এবং ওভারস্ক্রল। এইসব পরিবর্তন প্রয়োগ করার জন্য অতিরিক্ত কিছু করতে হবে না।

রিপল

এখন, প্রেস করা হলে সারফেস আলোকিত করতে Ripple হালকা স্পার্কল ব্যবহার করে। Compose Material Ripple Android-এ ব্যাকগ্রাউন্ডে প্ল্যাটফর্ম RippleDrawable ব্যবহার করে, তাই Android 12 ও তার পরবর্তী যেকোনও ভার্সনে সব Material কম্পোনেন্টের জন্য স্পার্কল রিপেল উপলভ্য।

ওভারস্ক্রল

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

অ্যাক্সেসিবিলিটি

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

রঙ সংক্রান্ত অ্যাক্সেসিবিলিটি

কালার কনট্রাস্টের জন্য অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড মেনে চলার কথা মাথায় রেখে ডায়নামিক কালার ডিজাইন করা হয়েছে। ডিফল্ট হিসেবে কোনও কালার স্কিম অ্যাক্সেসযোগ্য করে তোলার জন্য টোনাল প্যালেট সিস্টেম খুবই গুরুত্বপূর্ণ।

অ্যাক্সেসিবল কনট্রাস্ট রেশিও পূরণ করার জন্য ব্যবহার করা যেতে পারে এমন স্ট্যান্ডার্ড টোন ভ্যালু ও পরিমাপ Material-এর কালার সিস্টেম প্রদান করে।

অ্যাক্সেসিবিলিটি সংক্রান্ত প্রয়োজনীয়তা পূরণের জন্য বেছে নেওয়া টোনার প্যালেট-এর একটি সেট থেকে সব Material কম্পোনেন্ট ও ডায়নামিক থিমিং আগে থেকেই উপরের কালার রোল ব্যবহার করে। তবে, আপনি কম্পোনেন্ট কাস্টমাইজ করলে, উপযুক্ত কালার রোল ব্যবহার করতে এবং মিসম্যাচ এড়াতে ভুলবেন না।

ব্যবহারকারীকে অ্যাক্সেসযোগ্য কনট্রাস্ট প্রদান করতে, প্রাইমারির উপরে অন-প্রাইমারি এবং প্রাইমারি-কন্টেনারের উপরে অন-প্রাইমারি-কন্টেনার ব্যবহার করুন এবং অন্যান্য অ্যাকসেন্ট ও নিউট্রাল রঙের ক্ষেত্রেও একই কাজ করুন।

প্রাইমারি কন্টেনারের উপরে টারশিয়ারি কন্টেনার ব্যবহার করলে ব্যবহারকারীকে খারাপ কনট্রাস্ট বোতাম দেওয়া হয়:

// ✅ 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-এর জন্য আলাদা আলাদা ভ্যালু অ্যাসাইন করা যেতে পারে।

বড় স্ক্রিন

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

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

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

আরও জানুন

Compose-এ মেটেরিয়াল থিমিং সম্পর্কে আরও জানতে, নিম্নলিখিত রিসোর্স দেখুন:

Sample apps

• Reply M3 sample app

Docs

• Compose-এ Material 2 থেকে Material 3-তে মাইগ্রেট করা
• মেটেরিয়াল ডিজাইন নির্দেশিকা

API রেফারেন্স ও সোর্স কোড

• Compose Material 3 API রেফারেন্স
• সোর্স কোডে Material 3 স্যাম্পেল কম্পোজ করা

ভিডিও

• Jetpack Compose-এ Material You