মেটেরিয়াল ডিজাইন 3 হল মেটেরিয়াল ডিজাইনের পরবর্তী বিবর্তন। এতে আপডেটেড থিমিং, কম্পোনেন্ট এবং মেটেরিয়াল ইউ পার্সোনালাইজেশন ফিচার যেমন ডাইনামিক কালার রয়েছে। এটি মেটেরিয়াল ডিজাইন 2 এর একটি আপডেট এবং Android 12 এবং তার উপরে নতুন ভিজ্যুয়াল স্টাইল এবং সিস্টেম UI এর সাথে সুসংহত।
এই নির্দেশিকাটি কম্পোজ ম্যাটেরিয়াল (androidx.compose.material) জেটপ্যাক লাইব্রেরি থেকে কম্পোজ মেটেরিয়াল 3 (androidx.compose.material3) জেটপ্যাক লাইব্রেরিতে স্থানান্তরিত করার উপর দৃষ্টি নিবদ্ধ করে।
পন্থা
সাধারণভাবে আপনার দীর্ঘমেয়াদী একটি একক অ্যাপে M2 এবং M3 উভয়ই ব্যবহার করা উচিত নয় । এটি এই কারণে যে দুটি ডিজাইন সিস্টেম এবং সংশ্লিষ্ট লাইব্রেরি তাদের UX/UI ডিজাইন এবং রচনা বাস্তবায়নের ক্ষেত্রে উল্লেখযোগ্যভাবে পৃথক।
আপনার অ্যাপ একটি ডিজাইন সিস্টেম ব্যবহার করতে পারে, যেমন ফিগমা ব্যবহার করে তৈরি করা হয়েছে। এই ধরনের ক্ষেত্রে, আমরা উচ্চতর সুপারিশ করছি যে আপনি বা আপনার ডিজাইন টিম কম্পোজ মাইগ্রেশন শুরু করার আগে এটি M2 থেকে M3 তে স্থানান্তর করুন৷ কোনো অ্যাপ M3-এ স্থানান্তরিত করার কোনো মানে হয় না যদি এর UX/UI ডিজাইন M2-এর উপর ভিত্তি করে হয়।
উপরন্তু, আপনার অ্যাপের আকার, জটিলতা এবং UX/UI ডিজাইনের উপর নির্ভর করে মাইগ্রেশনের জন্য আপনার পদ্ধতির পার্থক্য হওয়া উচিত। এটি করা আপনাকে আপনার কোডবেসের উপর প্রভাব কমাতে সাহায্য করে। আপনার অভিবাসনের জন্য পর্যায়ক্রমে পদ্ধতি গ্রহণ করা উচিত।
কখন মাইগ্রেট করতে হবে
আপনার যত তাড়াতাড়ি সম্ভব মাইগ্রেশন শুরু করা উচিত। যাইহোক, M2 থেকে M3 তে সম্পূর্ণরূপে স্থানান্তরিত করার জন্য আপনার অ্যাপটি বাস্তবসম্মত অবস্থানে আছে কিনা তা বিবেচনা করা গুরুত্বপূর্ণ। আপনি শুরু করার আগে তদন্ত বিবেচনা করার জন্য কিছু ব্লকার পরিস্থিতি রয়েছে:
দৃশ্যকল্প | প্রস্তাবিত পদ্ধতির |
---|---|
কোন ব্লকার | পর্যায়ক্রমে মাইগ্রেশন শুরু করুন |
M2 থেকে একটি উপাদান এখনও M3 এ উপলব্ধ নয়। নীচের উপাদান এবং বিন্যাস বিভাগ দেখুন. | পর্যায়ক্রমে মাইগ্রেশন শুরু করুন |
আপনি বা আপনার ডিজাইন টিম অ্যাপটির ডিজাইন সিস্টেম M2 থেকে M3 তে স্থানান্তরিত করেননি | M2 থেকে M3 তে ডিজাইন সিস্টেম মাইগ্রেট করুন, তারপর পর্যায়ক্রমে মাইগ্রেশন শুরু করুন |
এমনকি যদি আপনি উপরের পরিস্থিতি দ্বারা প্রভাবিত হন তবে আপনাকে একটি অ্যাপ আপডেট করার এবং প্রকাশ করার আগে মাইগ্রেশনের জন্য একটি পর্যায়ক্রমে পদ্ধতি গ্রহণ করা উচিত। এই ক্ষেত্রে, আপনি M2 এবং M3 পাশাপাশি ব্যবহার করবেন এবং M3 এ স্থানান্তরিত করার সময় ধীরে ধীরে M2 ফেজ করবেন।
পর্যায়ক্রমে পদ্ধতি
পর্যায়ক্রমে মাইগ্রেশনের সাধারণ পদক্ষেপগুলি নিম্নরূপ:
- M2 নির্ভরতার পাশাপাশি M3 নির্ভরতা যোগ করুন।
- আপনার অ্যাপের থিমের M2 সংস্করণের পাশাপাশি আপনার অ্যাপের থিমের M3 সংস্করণ(গুলি) যোগ করুন।
- আপনার অ্যাপের আকার এবং জটিলতার উপর নির্ভর করে পৃথক মডিউল, স্ক্রিন বা কম্পোজেবলকে M3 তে স্থানান্তর করুন (বিশদ বিবরণের জন্য নীচের বিভাগগুলি দেখুন)।
- একবার সম্পূর্ণরূপে স্থানান্তরিত হলে, আপনার অ্যাপের থিম(গুলি) এর M2 সংস্করণ(গুলি) সরান৷
- M2 নির্ভরতা সরান।
নির্ভরতা
M3 এর একটি পৃথক প্যাকেজ এবং M2 এর সংস্করণ রয়েছে:
M2
implementation "androidx.compose.material:material:$m2-version"
M3
implementation "androidx.compose.material3:material3:$m3-version"
কম্পোজ ম্যাটেরিয়াল 3 রিলিজ পৃষ্ঠায় সর্বশেষ M3 সংস্করণগুলি দেখুন।
প্রধান M2 এবং M3 লাইব্রেরির বাইরে অন্যান্য উপাদান নির্ভরতা পরিবর্তিত হয়নি। তারা M2 এবং M3 প্যাকেজ এবং সংস্করণগুলির মিশ্রণ ব্যবহার করে, কিন্তু এটি মাইগ্রেশনের উপর কোন প্রভাব ফেলে না। এগুলি এম 3 এর সাথে যেমন ব্যবহার করা যেতে পারে:
লাইব্রেরি | প্যাকেজ এবং সংস্করণ |
---|---|
উপাদান আইকন রচনা করুন | androidx.compose.material:material-icons-*:$m2-version |
রচনা উপাদান লহর | androidx.compose.material:material-ripple:$m2-version |
পরীক্ষামূলক API
কিছু M3 API পরীক্ষামূলক বলে মনে করা হয়। এই ধরনের ক্ষেত্রে আপনাকে ExperimentalMaterial3Api
টীকা ব্যবহার করে ফাংশন বা ফাইল স্তরে নির্বাচন করতে হবে:
import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
থিমিং
M2 এবং M3 উভয় ক্ষেত্রেই, থিম কম্পোজেবলের নাম MaterialTheme
কিন্তু আমদানি প্যাকেজ এবং পরামিতি ভিন্ন:
M2
import androidx.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes
) {
// M2 content
}
M3
import androidx.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes
) {
// M3 content
}
রঙ
M3 এর রঙের সিস্টেম M2 থেকে উল্লেখযোগ্যভাবে আলাদা। রঙের পরামিতিগুলির সংখ্যা বৃদ্ধি পেয়েছে, তাদের বিভিন্ন নাম রয়েছে এবং তারা M3 উপাদানগুলিতে ভিন্নভাবে ম্যাপ করেছে। রচনায়, এটি M2 Colors
ক্লাস, M3 ColorScheme
ক্লাস এবং সম্পর্কিত ফাংশনের ক্ষেত্রে প্রযোজ্য:
M2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
val AppLightColors = lightColors(
// M2 light Color parameters
)
val AppDarkColors = darkColors(
// M2 dark Color parameters
)
val AppColors = if (darkTheme) {
AppDarkColors
} else {
AppLightColors
}
M3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
val AppLightColorScheme = lightColorScheme(
// M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
// M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
AppDarkColorScheme
} else {
AppLightColorScheme
}
M2 এবং M3 রঙের সিস্টেমের মধ্যে উল্লেখযোগ্য পার্থক্যের কারণে, Color
পরামিতিগুলির জন্য কোন যুক্তিসঙ্গত ম্যাপিং নেই। পরিবর্তে, একটি M3 রঙের স্কিম তৈরি করতে ম্যাটেরিয়াল থিম বিল্ডার টুল ব্যবহার করুন। টুলটিতে মূল উৎসের রঙ হিসেবে M2 রং ব্যবহার করুন, যা টুলটি M3 রঙের স্কিম দ্বারা ব্যবহৃত টোনাল প্যালেটে প্রসারিত হয়। নিম্নলিখিত ম্যাপিং একটি শুরু বিন্দু হিসাবে সুপারিশ করা হয়:
M2 | উপাদান থিম নির্মাতা |
---|---|
primary | প্রাথমিক |
primaryVariant | মাধ্যমিক |
secondary | টারশিয়ারি |
surface বা background | নিরপেক্ষ |
আপনি টুল থেকে হালকা এবং গাঢ় থিমগুলির জন্য রঙের হেক্স কোড মানগুলি অনুলিপি করতে পারেন এবং একটি M3 ColorScheme দৃষ্টান্ত বাস্তবায়ন করতে ব্যবহার করতে পারেন। বিকল্পভাবে, উপাদান থিম নির্মাতা রচনা কোড রপ্তানি করতে পারেন.
isLight
M2 Colors
ক্লাসের বিপরীতে, M3 ColorScheme
ক্লাসে একটি isLight
প্যারামিটার অন্তর্ভুক্ত নয়। সাধারণভাবে আপনি চেষ্টা করুন এবং থিম স্তরে এই তথ্য প্রয়োজন যাই হোক না কেন মডেল. যেমন:
M2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) darkColors(…) else lightColors(…)
MaterialTheme(
colors = colors,
content = content
)
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
…
}
}
M3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme
val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val cardElevation = if (darkTheme) 4.dp else 0.dp
CompositionLocalProvider(LocalCardElevation provides cardElevation) {
val colorScheme = if (darkTheme) darkColorScheme(…) else lightColorScheme(…)
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = LocalCardElevation.current
…
}
}
আরও তথ্যের জন্য কম্পোজ গাইডে কাস্টম ডিজাইন সিস্টেম দেখুন।
গতিশীল রঙ
M3-এ একটি নতুন বৈশিষ্ট্য হল গতিশীল রঙ । কাস্টম রঙ ব্যবহার করার পরিবর্তে, একটি M3 ColorScheme
নিম্নলিখিত ফাংশনগুলি ব্যবহার করে Android 12 এবং তার উপরে ডিভাইসের ওয়ালপেপার রঙগুলি ব্যবহার করতে পারে:
টাইপোগ্রাফি
M3 এ টাইপোগ্রাফি সিস্টেম M2 থেকে ভিন্ন। টাইপোগ্রাফি প্যারামিটারের সংখ্যা মোটামুটি একই, তবে তাদের আলাদা নাম রয়েছে এবং তারা M3 উপাদানগুলির সাথে ভিন্নভাবে ম্যাপ করে। কম্পোজে, এটি M2 Typography
ক্লাস এবং M3 Typography
ক্লাসে প্রযোজ্য:
M2
import androidx.compose.material.Typography
val AppTypography = Typography(
// M2 TextStyle parameters
)
M3
import androidx.compose.material3.Typography
val AppTypography = Typography(
// M3 TextStyle parameters
)
নিম্নলিখিত TextStyle
পরামিতি ম্যাপিং একটি শুরু বিন্দু হিসাবে সুপারিশ করা হয়:
M2 | M3 |
---|---|
h1 | displayLarge |
h2 | displayMedium |
h3 | displaySmall |
N/A | headlineLarge |
h4 | headlineMedium |
h5 | headlineSmall |
h6 | titleLarge |
subtitle1 | titleMedium |
subtitle2 | titleSmall |
body1 | bodyLarge |
body2 | bodyMedium |
caption | bodySmall |
button | labelLarge |
N/A | labelMedium |
overline | labelSmall |
আকৃতি
M3 এর আকৃতির সিস্টেম M2 থেকে আলাদা। আকৃতির প্যারামিটারের সংখ্যা বেড়েছে, তাদের নামকরণ করা হয়েছে ভিন্নভাবে এবং তারা M3 উপাদানে ভিন্নভাবে ম্যাপ করেছে। কম্পোজে, এটি M2 Shapes
ক্লাস এবং M3 Shapes
ক্লাসের ক্ষেত্রে প্রযোজ্য:
M2
import androidx.compose.material.Shapes
val AppShapes = Shapes(
// M2 Shape parameters
)
M3
import androidx.compose.material3.Shapes
val AppShapes = Shapes(
// M3 Shape parameters
)
নিম্নলিখিত Shape
পরামিতি ম্যাপিং একটি শুরু বিন্দু হিসাবে সুপারিশ করা হয়:
M2 | M3 |
---|---|
N/A | extraSmall |
small | small |
medium | medium |
large | large |
N/A | extraLarge |
উপাদান এবং বিন্যাস
M2 থেকে বেশিরভাগ উপাদান এবং লেআউট M3 এ উপলব্ধ। তবে, কিছু অনুপস্থিত এবং নতুন রয়েছে যা M2 তে বিদ্যমান ছিল না। তদ্ব্যতীত, কিছু M3 উপাদানের M2-এ তাদের সমতুল্য উপাদানগুলির চেয়ে বেশি বৈচিত্র্য রয়েছে। সাধারণভাবে M3 API পৃষ্ঠগুলি M2-তে তাদের নিকটতম সমতুল্যগুলির সাথে যতটা সম্ভব অনুরূপ হওয়ার চেষ্টা করে।
আপডেট করা রঙ, টাইপোগ্রাফি এবং আকৃতির সিস্টেমের প্রেক্ষিতে, M3 উপাদানগুলি নতুন থিমিং মানগুলির সাথে ভিন্নভাবে মানচিত্র তৈরি করে। এই ম্যাপিংয়ের জন্য সত্যের উত্স হিসাবে রচনা উপাদান 3 সোর্স কোডে টোকেন ডিরেক্টরিটি পরীক্ষা করা একটি ভাল ধারণা।
যদিও কিছু উপাদানের জন্য বিশেষ বিবেচনার প্রয়োজন হয়, নিম্নলিখিত ফাংশন ম্যাপিংগুলি একটি সূচনা বিন্দু হিসাবে সুপারিশ করা হয়:
অনুপস্থিত APIs :
M2 | M3 |
---|---|
androidx.compose.material.swipeable | এখনো পাওয়া যায় নি |
প্রতিস্থাপিত API :
M2 | M3 |
---|---|
androidx.compose.material.BackdropScaffold | কোন M3 সমতুল্য নয়, পরিবর্তে Scaffold বা BottomSheetScaffold স্থানান্তর করুন৷ |
androidx.compose.material.BottomDrawer | কোন M3 সমতুল্য নয়, পরিবর্তে ModalBottomSheet এ স্থানান্তর করুন |
নতুন নামকরণ করা APIs :
অন্যান্য সকল API :
কম্পোজ ম্যাটেরিয়াল 3 এপিআই রেফারেন্স ওভারভিউতে সর্বশেষ M3 উপাদান এবং লেআউটগুলি দেখুন এবং নতুন এবং আপডেট হওয়া APIগুলির জন্য রিলিজ পৃষ্ঠায় নজর রাখুন৷
ভারা, স্ন্যাকবার এবং নেভিগেশন ড্রয়ার
M3-এ স্ক্যাফোল্ড M2 থেকে আলাদা। M2 এবং M3 উভয় ক্ষেত্রেই, প্রধান লেআউট কম্পোজেবলের নাম Scaffold
কিন্তু আমদানি প্যাকেজ এবং পরামিতি ভিন্ন:
M2
import androidx.compose.material.Scaffold
Scaffold(
// M2 scaffold parameters
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
// M3 scaffold parameters
)
M2 Scaffold
একটি backgroundColor
প্যারামিটার রয়েছে যার নাম এখন M3 Scaffold
containerColor
রাখা হয়েছে:
M2
import androidx.compose.material.Scaffold
Scaffold(
backgroundColor = …,
content = { … }
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
containerColor = …,
content = { … }
)
M2 ScaffoldState
ক্লাস M3 এ আর বিদ্যমান নেই কারণ এতে একটি drawerState
প্যারামিটার রয়েছে যার আর প্রয়োজন নেই। M3 Scaffold
সাথে স্ন্যাকবার দেখাতে, পরিবর্তে SnackbarHostState
ব্যবহার করুন:
M2
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
content = {
…
scope.launch {
scaffoldState.snackbarHostState.showSnackbar(…)
}
}
)
M3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) },
content = {
…
scope.launch {
snackbarHostState.showSnackbar(…)
}
}
)
M2 Scaffold
থেকে সমস্ত drawer*
প্যারামিটার M3 Scaffold
থেকে সরিয়ে দেওয়া হয়েছে। এর মধ্যে drawerShape
এবং drawerContent
মতো পরামিতি অন্তর্ভুক্ত রয়েছে। M3 Scaffold
সাথে একটি ড্রয়ার দেখানোর জন্য, পরিবর্তে একটি নেভিগেশন ড্রয়ার কম্পোজযোগ্য, যেমন ModalNavigationDrawer
ব্যবহার করুন:
M2
import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState(
drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
drawerContent = { … },
drawerGesturesEnabled = …,
drawerShape = …,
drawerElevation = …,
drawerBackgroundColor = …,
drawerContentColor = …,
drawerScrimColor = …,
content = {
…
scope.launch {
scaffoldState.drawerState.open()
}
}
)
M3
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState
val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerSheet(
drawerShape = …,
drawerTonalElevation = …,
drawerContainerColor = …,
drawerContentColor = …,
content = { … }
)
},
gesturesEnabled = …,
scrimColor = …,
content = {
Scaffold(
content = {
…
scope.launch {
drawerState.open()
}
}
)
}
)
শীর্ষ অ্যাপ বার
M3-এর শীর্ষ অ্যাপ বারগুলি M2-এর থেকে আলাদা৷ M2 এবং M3 উভয় ক্ষেত্রেই, প্রধান শীর্ষ অ্যাপ বার কম্পোজেবলের নাম TopAppBar
কিন্তু আমদানি প্যাকেজ এবং পরামিতিগুলি আলাদা:
M2
import androidx.compose.material.TopAppBar
TopAppBar(…)
M3
import androidx.compose.material3.TopAppBar
TopAppBar(…)
আপনি যদি পূর্বে M2 TopAppBar
মধ্যে বিষয়বস্তু কেন্দ্রীভূত করেন তাহলে M3 CenterAlignedTopAppBar
ব্যবহার করার কথা বিবেচনা করুন। MediumTopAppBar
এবং LargeTopAppBar
সম্পর্কেও সচেতন হওয়া ভাল।
TopAppBarScrollBehavior
ক্লাসের মাধ্যমে স্ক্রলে বিভিন্ন কার্যকারিতা প্রদান করার জন্য M3 শীর্ষ অ্যাপ বারগুলিতে একটি নতুন scrollBehavior
প্যারামিটার রয়েছে, যেমন উচ্চতা পরিবর্তন করা। এটি Modifer.nestedScroll
এর মাধ্যমে কন্টেন্ট স্ক্রল করার সাথে একত্রে কাজ করে। এম TopAppBar
ম্যানুয়ালি elevation
পরামিতি পরিবর্তন করে এটি সম্ভব ছিল:
M2
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar
val state = rememberLazyListState()
val isAtTop by remember {
derivedStateOf {
state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
}
}
Scaffold(
topBar = {
TopAppBar(
elevation = if (isAtTop) {
0.dp
} else {
AppBarDefaults.TopAppBarElevation
},
…
)
},
content = {
LazyColumn(state = state) { … }
}
)
M3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
TopAppBar(
scrollBehavior = scrollBehavior,
…
)
},
content = {
LazyColumn { … }
}
)
নীচের নেভিগেশন / নেভিগেশন বার
M2-এ বটম নেভিগেশনের নাম পরিবর্তন করে M3-এ নেভিগেশন বার করা হয়েছে। M2 তে BottomNavigation
এবং BottomNavigationItem
কম্পোজেবল আছে, যখন M3 তে NavigationBar
এবং NavigationBarItem
কম্পোজেবল আছে:
M2
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
BottomNavigation {
BottomNavigationItem(…)
BottomNavigationItem(…)
BottomNavigationItem(…)
}
M3
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
NavigationBar {
NavigationBarItem(…)
NavigationBarItem(…)
NavigationBarItem(…)
}
বোতাম, আইকন বোতাম এবং FAB
M3-এর বোতাম, আইকন বোতাম এবং ফ্লোটিং অ্যাকশন বোতাম (FABs) M2-এর থেকে আলাদা। M3 তে M2 বোতামের সমস্ত কম্পোজেবল অন্তর্ভুক্ত রয়েছে:
M2
import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton
// M2 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M2 icon buttons
IconButton(…)
IconToggleButton(…)
// M2 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
M3
import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton
// M3 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M3 icon buttons
IconButton(…)
IconToggleButton(…)
// M3 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
M3 এছাড়াও নতুন বোতাম বৈচিত্র অন্তর্ভুক্ত. কম্পোজ ম্যাটেরিয়াল 3 এপিআই রেফারেন্স ওভারভিউতে সেগুলি দেখুন।
সুইচ
M3 এ স্যুইচ M2 থেকে ভিন্ন। M2 এবং M3 উভয় ক্ষেত্রেই, সুইচ কম্পোজেবলের নাম Switch
কিন্তু আমদানি প্যাকেজগুলি আলাদা:
M2
import androidx.compose.material.Switch
Switch(…)
M3
import androidx.compose.material3.Switch
Switch(…)
পৃষ্ঠ এবং উচ্চতা
M3 এর পৃষ্ঠ এবং উচ্চতা ব্যবস্থা M2 থেকে আলাদা। M3 এ দুটি ধরণের উচ্চতা রয়েছে:
- ছায়ার উচ্চতা (একটি ছায়া ফেলে, M2 এর মতো)
- টোনাল উচ্চতা (একটি রঙকে ওভারলে করে, M3-তে নতুন)
রচনায় এটি M2 Surface
ফাংশন এবং M3 Surface
ফাংশনে প্রযোজ্য:
M2
import androidx.compose.material.Surface
Surface(
elevation = …
) { … }
M3
import androidx.compose.material3.Surface
Surface(
shadowElevation = …,
tonalElevation = …
) { … }
আপনি UX/UI ডিজাইন পছন্দের উপর নির্ভর করে M3 তে shadowElevation
এবং/অথবা tonalElevation
উভয়ের জন্য M2-তে elevation
Dp
মান ব্যবহার করতে পারেন। Surface
হল বেশিরভাগ কম্পোনেন্টের পিছনে ব্যাকিং কম্পোজেবল, তাই কম্পোনেন্ট কম্পোজেবলগুলি উচ্চতার পরামিতিগুলিও প্রকাশ করতে পারে যা আপনাকে একইভাবে স্থানান্তর করতে হবে।
M3-তে টোনাল এলিভেশন M2 ডার্ক থিমে উচ্চতা ওভারলে ধারণাকে প্রতিস্থাপন করে। ফলস্বরূপ, ElevationOverlay
এবং LocalElevationOverlay
M3-তে বিদ্যমান নেই এবং M2-তে LocalAbsoluteElevation
M3-তে LocalAbsoluteTonalElevation
এ পরিবর্তিত হয়েছে।
জোর এবং বিষয়বস্তু আলফা
M3 তে জোর M2 থেকে উল্লেখযোগ্যভাবে আলাদা। M2-তে, টেক্সট এবং আইকনের মতো বিষয়বস্তুকে আলাদা করার জন্য নির্দিষ্ট আলফা মান সহ রঙ ব্যবহার করার উপর জোর দেওয়া হয়েছে। M3 এ, এখন কয়েকটি ভিন্ন পন্থা রয়েছে:
- প্রসারিত M3 রঙ সিস্টেম থেকে রঙের উপর তাদের বৈকল্পিক পাশাপাশি রং ব্যবহার করা।
- পাঠ্যের জন্য বিভিন্ন ফন্টের ওজন ব্যবহার করা।
ফলস্বরূপ, ContentAlpha
এবং LocalContentAlpha
M3 তে বিদ্যমান নেই এবং প্রতিস্থাপন করা প্রয়োজন।
নিম্নলিখিত ম্যাপিং একটি শুরু বিন্দু হিসাবে সুপারিশ করা হয়:
M2 | M3 |
---|---|
ContentAlpha.high সহ onSurface | সাধারণভাবে onSurface , FontWeight.Medium - FontWeight.Black টেক্সটের জন্য কালো |
ContentAlpha.medium সহ onSurface | onSurfaceVariant সাধারণভাবে, FontWeight.Thin - FontWeight.Normal টেক্সটের জন্য স্বাভাবিক |
ContentAlpha.disabled সহ onSurface | onSurface.copy(alpha = 0.38f) |
এখানে M2 বনাম M3 আইকন জোরের একটি উদাহরণ:
M2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Icon(…)
}
M3
import androidx.compose.material3.LocalContentColor
// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Icon(…)
}
এখানে M2 এবং M3 তে পাঠ্য জোর দেওয়ার উদাহরণ রয়েছে:
M2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Text(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Text(…)
}
M3
import androidx.compose.material3.LocalContentColor
// High emphasis
Text(
…,
fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
…,
fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Text(
…,
fontWeight = FontWeight.Normal
)
}
পটভূমি এবং পাত্রে
M2-এর পটভূমিগুলিকে M3-তে পাত্রের নাম দেওয়া হয়েছে। সাধারণভাবে, আপনি একই মান ব্যবহার করে M3-এ container*
দিয়ে M2-তে background*
প্যারামিটার প্রতিস্থাপন করতে পারেন। যেমন:
M2
Badge(
backgroundColor = MaterialTheme.colors.primary
) { … }
M3
Badge(
containerColor = MaterialTheme.colorScheme.primary
) { … }
দরকারী লিঙ্ক
রচনায় M2 থেকে M3 তে স্থানান্তরিত করার বিষয়ে আরও জানতে, নিম্নলিখিত অতিরিক্ত সংস্থানগুলি দেখুন৷
ডক্স
নমুনা অ্যাপ্লিকেশন
- M3 নমুনা অ্যাপের উত্তর দিন
- জেটচ্যাট নমুনা অ্যাপ M2 থেকে M3 মাইগ্রেশন
- Jetnews নমুনা অ্যাপ M2 থেকে M3 মাইগ্রেশন
- এখন Android M3 হিরো অ্যাপে: কোর-ডিজাইনসিস্টেম মডিউল
ভিডিও
API রেফারেন্স এবং সোর্স কোড
{% শব্দার্থে %}আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- কম্পোজে মেটেরিয়াল ডিজাইন 2
- কম্পোজে মেটেরিয়াল ডিজাইন 3
- কম্পোজে কাস্টম ডিজাইন সিস্টেম