ম্যাটেরিয়াল ডিজাইন ৩ হলো ম্যাটেরিয়াল ডিজাইনের পরবর্তী সংস্করণ। এতে আপডেট করা থিমিং, কম্পোনেন্ট এবং ম্যাটেরিয়াল ইউ পার্সোনালাইজেশন ফিচার, যেমন ডাইনামিক কালার অন্তর্ভুক্ত রয়েছে। এটি ম্যাটেরিয়াল ডিজাইন ২- এর একটি আপডেট এবং অ্যান্ড্রয়েড ১২ ও তার পরবর্তী সংস্করণগুলোর নতুন ভিজ্যুয়াল স্টাইল ও সিস্টেম UI-এর সাথে সামঞ্জস্যপূর্ণ।
এই নির্দেশিকাটি Compose Material (androidx.compose.material) Jetpack লাইব্রেরি থেকে Compose Material 3 (androidx.compose.material3) Jetpack লাইব্রেরিতে স্থানান্তরের উপর আলোকপাত করে।
পদ্ধতি
সাধারণত, দীর্ঘমেয়াদে একটি অ্যাপে M2 এবং M3 উভয়ই ব্যবহার করা উচিত নয় । এর কারণ হলো, এই দুটি ডিজাইন সিস্টেম এবং তাদের নিজ নিজ লাইব্রেরিগুলো তাদের UX/UI ডিজাইন এবং Compose বাস্তবায়নের দিক থেকে উল্লেখযোগ্যভাবে ভিন্ন।
আপনার অ্যাপে ফিগমার মতো কোনো ডিজাইন সিস্টেম ব্যবহার করা থাকতে পারে। সেক্ষেত্রে, কম্পোজ মাইগ্রেশন শুরু করার আগে আমরা আপনাকে বা আপনার ডিজাইন টিমকে অ্যাপটি M2 থেকে M3-তে মাইগ্রেট করার জন্য জোরালোভাবে পরামর্শ দিই। কোনো অ্যাপের UX/UI ডিজাইন যদি M2-এর উপর ভিত্তি করে তৈরি হয়, তবে সেটিকে M3-তে মাইগ্রেট করার কোনো মানে হয় না।
এছাড়াও, মাইগ্রেশন করার সময় আপনার অ্যাপের আকার, জটিলতা এবং ইউএক্স/ইউআই ডিজাইন বিবেচনায় রাখা উচিত। এটি করলে আপনার কোডবেসের উপর প্রভাব কমানো সম্ভব হয়। পর্যায়ক্রমে মাইগ্রেশন করুন।
কখন স্থানান্তর করতে হবে
আদর্শগতভাবে আপনার যত তাড়াতাড়ি সম্ভব মাইগ্রেশন শুরু করা উচিত। তবে, আপনার অ্যাপটি M2 থেকে M3-তে সম্পূর্ণরূপে মাইগ্রেট করার মতো বাস্তবসম্মত অবস্থানে আছে কিনা, তা বিবেচনা করা গুরুত্বপূর্ণ। শুরু করার আগে কিছু প্রতিবন্ধকতার পরিস্থিতি খতিয়ে দেখা প্রয়োজন:
| দৃশ্যকল্প | সুপারিশকৃত পদ্ধতি |
|---|---|
| আপনার অ্যাপে কোনো উল্লেখযোগ্য প্রতিবন্ধকতা নেই। | পর্যায়ক্রমিক স্থানান্তর শুরু করুন। |
| আপনার অ্যাপ M2-এর এমন একটি কম্পোনেন্ট ব্যবহার করছে যা এখনও M3-তে উপলব্ধ নয়। কম্পোনেন্ট এবং লেআউট বিভাগটি দেখুন। | পর্যায়ক্রমিক স্থানান্তর শুরু করুন। |
| আপনি বা আপনার ডিজাইন টিম অ্যাপটির ডিজাইন সিস্টেম M2 থেকে M3-তে স্থানান্তর করেননি। | ডিজাইন সিস্টেমটি M2 থেকে M3-তে স্থানান্তর করুন, তারপর পর্যায়ক্রমিক স্থানান্তর শুরু করুন। |
পূর্ববর্তী পরিস্থিতিগুলো দ্বারা প্রভাবিত হলেও, অ্যাপ আপডেট কমিট ও রিলিজ করার আগে মাইগ্রেশনের জন্য আপনার একটি পর্যায়ক্রমিক পদ্ধতি অবলম্বন করা উচিত। এই ক্ষেত্রে, আপনি M2 এবং M3 পাশাপাশি ব্যবহার করবেন এবং M3-তে মাইগ্রেট করার সময় ক্রমান্বয়ে M2-কে পর্যায়ক্রমে বাদ দেবেন।
পর্যায়ক্রমিক পদ্ধতি
পর্যায়ক্রমিক স্থানান্তরের সাধারণ পদক্ষেপগুলো নিম্নরূপ:
- M2 ডিপেন্ডেন্সির পাশাপাশি M3 ডিপেন্ডেন্সিটিও যোগ করুন।
- আপনার অ্যাপের থিমগুলোর M2 ভার্সনের পাশাপাশি M3 ভার্সনগুলোও যোগ করুন।
- আপনার অ্যাপের আকার ও জটিলতার ওপর নির্ভর করে স্বতন্ত্র মডিউল, স্ক্রিন বা কম্পোজেবলগুলোকে M3-তে মাইগ্রেট করুন (বিস্তারিত জানতে পরবর্তী বিভাগগুলো দেখুন)।
- সম্পূর্ণভাবে মাইগ্রেট হয়ে গেলে, আপনার অ্যাপের থিমগুলোর M2 সংস্করণগুলো সরিয়ে ফেলুন।
- M2 নির্ভরতাটি অপসারণ করুন।
নির্ভরশীলতা
M3-এর প্যাকেজ ও সংস্করণ M2 থেকে আলাদা:
এম২
implementation "androidx.compose.material:material:$m2-version"
এম৩
implementation "androidx.compose.material3:material3:$m3-version"
Compose Material 3 রিলিজ পেজে M3-এর সর্বশেষ সংস্করণগুলো দেখুন।
মূল M2 এবং M3 লাইব্রেরিগুলো ছাড়া অন্যান্য Material নির্ভরতাগুলো অপরিবর্তিত রয়েছে। এগুলোতে M2 এবং M3 প্যাকেজ ও ভার্সনের মিশ্রণ ব্যবহৃত হয়, কিন্তু মাইগ্রেশনের উপর এর কোনো প্রভাব নেই। এগুলো M3-এর সাথে যেমন আছে তেমনই ব্যবহার করা যাবে।
| লাইব্রেরি | প্যাকেজ এবং সংস্করণ |
|---|---|
| কম্পোজ ম্যাটেরিয়াল আইকন | androidx.compose.material:material-icons-*:$m2-version |
| উপাদান তরঙ্গ রচনা করুন | androidx.compose.material:material-ripple:$m2-version |
পরীক্ষামূলক এপিআই
কিছু M3 API পরীক্ষামূলক হিসেবে বিবেচিত হয়। সেক্ষেত্রে, আপনাকে ফাংশন বা ফাইল লেভেলে ExperimentalMaterial3Api অ্যানোটেশন ব্যবহার করে এটি ব্যবহারের অনুমতি দিতে হবে:
import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
থিমিং
M2 এবং M3 উভয় ক্ষেত্রেই, কম্পোজেবল থিমটির নাম MaterialTheme , কিন্তু ইম্পোর্ট প্যাকেজ এবং প্যারামিটারগুলো ভিন্ন:
এম২
import androidx.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes
) {
// M2 content
}
এম৩
import androidx.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes
) {
// M3 content
}
রঙ

M3-এর কালার সিস্টেম M2 থেকে উল্লেখযোগ্যভাবে ভিন্ন। কালার প্যারামিটারের সংখ্যা বেড়েছে, সেগুলোর নাম আলাদা, এবং M3 কম্পোনেন্টগুলোর সাথে সেগুলোর ম্যাপিংও ভিন্ন। Compose-এ, এটি M2 Colors ক্লাস, M3 ColorScheme ক্লাস এবং সম্পর্কিত ফাংশনগুলোর ক্ষেত্রে প্রযোজ্য:
এম২
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
}
এম৩
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 কালার স্কিমে ব্যবহৃত টোনাল প্যালেটে পরিণত করে। প্রাথমিক পদক্ষেপ হিসেবে নিম্নলিখিত ম্যাপিংগুলো সুপারিশ করা হচ্ছে:
| এম২ | ম্যাটেরিয়াল থিম বিল্ডার |
|---|---|
primary | প্রাথমিক |
primaryVariant | মাধ্যমিক |
secondary | তৃতীয় |
surface বা background | নিরপেক্ষ |

আপনি টুলটি থেকে লাইট এবং ডার্ক থিমের কালার হেক্স কোড ভ্যালুগুলো কপি করে একটি M3 ColorScheme ইনস্ট্যান্স ইমপ্লিমেন্ট করতে ব্যবহার করতে পারেন। বিকল্পভাবে, ম্যাটেরিয়াল থিম বিল্ডার কম্পোজ কোড এক্সপোর্ট করতে পারে।
isLight
M2 Colors ক্লাসের মতো নয়, M3 ColorScheme ক্লাসে isLight প্যারামিটার অন্তর্ভুক্ত নেই। সাধারণত, থিম লেভেলেই এই তথ্যের প্রয়োজন এমন বিষয়গুলো মডেল করার চেষ্টা করা উচিত। উদাহরণস্বরূপ:
এম২
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
…
}
}
এম৩
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
…
}
}
আরও তথ্যের জন্য Compose-এর কাস্টম ডিজাইন সিস্টেম গাইডটি দেখুন।
গতিশীল রঙ
M3-এর একটি নতুন ফিচার হলো ডাইনামিক কালার । কাস্টম কালার ব্যবহার করার পরিবর্তে, একটি M3 ColorScheme অ্যান্ড্রয়েড ১২ এবং তার পরবর্তী সংস্করণগুলোতে নিম্নলিখিত ফাংশনগুলো ব্যবহার করে ডিভাইসের ওয়ালপেপার কালার কাজে লাগাতে পারে:
টাইপোগ্রাফি

M3-এর টাইপোগ্রাফি সিস্টেম M2 থেকে ভিন্ন। টাইপোগ্রাফি প্যারামিটারের সংখ্যা মোটামুটি একই, কিন্তু সেগুলোর নাম আলাদা এবং M3 কম্পোনেন্টগুলোর সাথে সেগুলোর ম্যাপিংও ভিন্ন। Compose-এ, এই বিষয়টি M2 Typography ক্লাস এবং M3 Typography ক্লাস উভয়ের ক্ষেত্রেই প্রযোজ্য:
এম২
import androidx.compose.material.Typography
val AppTypography = Typography(
// M2 TextStyle parameters
)
এম৩
import androidx.compose.material3.Typography
val AppTypography = Typography(
// M3 TextStyle parameters
)
প্রাথমিক পদক্ষেপ হিসেবে নিম্নলিখিত TextStyle প্যারামিটার ম্যাপিংগুলো সুপারিশ করা হচ্ছে:
| এম২ | এম৩ |
|---|---|
h1 | displayLarge |
h2 | displayMedium |
h3 | displaySmall |
| প্রযোজ্য নয় | headlineLarge |
h4 | headlineMedium |
h5 | headlineSmall |
h6 | titleLarge |
subtitle1 | titleMedium |
subtitle2 | titleSmall |
body1 | bodyLarge |
body2 | bodyMedium |
caption | bodySmall |
button | labelLarge |
| প্রযোজ্য নয় | labelMedium |
overline | labelSmall |
আকৃতি

M3-এর শেপ সিস্টেম M2 থেকে ভিন্ন। শেপ প্যারামিটারের সংখ্যা বেড়েছে, সেগুলোর নাম আলাদা এবং M3 কম্পোনেন্টগুলোর সাথে সেগুলোর ম্যাপিংও ভিন্ন। Compose-এ, এই বিষয়টি M2 Shapes ক্লাস এবং M3 Shapes ক্লাস উভয়ের ক্ষেত্রেই প্রযোজ্য:
এম২
import androidx.compose.material.Shapes
val AppShapes = Shapes(
// M2 Shape parameters
)
এম৩
import androidx.compose.material3.Shapes
val AppShapes = Shapes(
// M3 Shape parameters
)
প্রাথমিক পদক্ষেপ হিসেবে নিম্নলিখিত Shape প্যারামিটার ম্যাপিংগুলো সুপারিশ করা হচ্ছে:
| এম২ | এম৩ |
|---|---|
| প্রযোজ্য নয় | extraSmall |
small | small |
medium | medium |
large | large |
| প্রযোজ্য নয় | extraLarge |
উপাদান এবং বিন্যাস
M2-এর বেশিরভাগ কম্পোনেন্ট এবং লেআউট M3-তে পাওয়া যায়। তবে, কিছু অনুপস্থিত থাকার পাশাপাশি এমন কিছু নতুনও রয়েছে যা M2-তে ছিল না। এছাড়াও, M3-এর কিছু কম্পোনেন্টের M2-এর সমতুল্যগুলোর চেয়ে বেশি বৈচিত্র্য রয়েছে। সাধারণভাবে, M3 API সারফেসগুলোকে M2-এর নিকটতম সমতুল্যগুলোর সাথে যথাসম্ভব সাদৃশ্যপূর্ণ করে ডিজাইন করা হয়েছে।
আপডেট করা কালার, টাইপোগ্রাফি এবং শেপ সিস্টেমের কারণে, M3 কম্পোনেন্টগুলো নতুন থিমিং ভ্যালুগুলোর সাথে ভিন্নভাবে ম্যাপ হওয়ার প্রবণতা দেখায়। এই ম্যাপিংগুলোর নির্ভরযোগ্য উৎস হিসেবে Compose Material 3 সোর্স কোডের টোকেনস ডিরেক্টরিটি দেখে নেওয়া ভালো।
যদিও কিছু উপাদানের জন্য বিশেষ বিবেচনার প্রয়োজন হয়, প্রাথমিক পদক্ষেপ হিসেবে নিম্নলিখিত ফাংশন ম্যাপিংগুলো সুপারিশ করা হয়:
অনুপস্থিত এপিআই :
| এম২ | এম৩ |
|---|---|
androidx.compose.material.swipeable | এখনও উপলব্ধ নয় |
প্রতিস্থাপিত এপিআই :
| এম২ | এম৩ |
|---|---|
androidx.compose.material.BackdropScaffold | M3-এর কোনো সমতুল্য নেই, এর পরিবর্তে Scaffold বা BottomSheetScaffold এ স্থানান্তরিত হন। |
androidx.compose.material.BottomDrawer | M3-এর কোনো সমতুল্য নেই, এর পরিবর্তে ModalBottomSheet এ স্থানান্তরিত হন। |
এপিআইগুলির নাম পরিবর্তন করুন :
অন্যান্য সকল এপিআই :
Compose Material 3 API রেফারেন্স ওভারভিউ- তে সর্বশেষ M3 কম্পোনেন্ট এবং লেআউটগুলো দেখুন, এবং নতুন ও আপডেট করা API-গুলোর জন্য রিলিজ পেজে নজর রাখুন।
স্ক্যাফোল্ড, স্ন্যাকবার এবং নেভিগেশন ড্রয়ার

M3-এর স্ক্যাফোল্ড M2 থেকে আলাদা। M2 এবং M3 উভয় ক্ষেত্রেই, প্রধান লেআউট কম্পোজেবলের নাম Scaffold , কিন্তু ইম্পোর্ট প্যাকেজ এবং প্যারামিটারগুলো ভিন্ন:
এম২
import androidx.compose.material.Scaffold
Scaffold(
// M2 scaffold parameters
)
এম৩
import androidx.compose.material3.Scaffold
Scaffold(
// M3 scaffold parameters
)
M2 Scaffold থাকা backgroundColor প্যারামিটারটির নাম এখন M3 Scaffold containerColor রাখা হয়েছে:
এম২
import androidx.compose.material.Scaffold
Scaffold(
backgroundColor = …,
content = { … }
)
এম৩
import androidx.compose.material3.Scaffold
Scaffold(
containerColor = …,
content = { … }
)
M2-এর ScaffoldState ক্লাসটি M3-তে আর নেই, কারণ এতে একটি drawerState প্যারামিটার ছিল যার আর প্রয়োজন নেই। M3 Scaffold সাথে স্নাকবার দেখানোর জন্য, এর পরিবর্তে SnackbarHostState ব্যবহার করুন:
এম২
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(…)
}
}
)
এম৩
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 মতো একটি নেভিগেশন ড্রয়ার কম্পোজেবল ব্যবহার করুন:
এম২
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()
}
}
)
এম৩
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 , কিন্তু ইম্পোর্ট প্যাকেজ এবং প্যারামিটারগুলো ভিন্ন:
এম২
import androidx.compose.material.TopAppBar
TopAppBar(…)
এম৩
import androidx.compose.material3.TopAppBar
TopAppBar(…)
আপনি যদি আগে M2 TopAppBar মধ্যে কন্টেন্ট মাঝখানে রাখতেন, তাহলে M3 CenterAlignedTopAppBar ব্যবহার করার কথা বিবেচনা করতে পারেন। MediumTopAppBar এবং LargeTopAppBar সম্পর্কেও অবগত থাকা ভালো।
M3 টপ অ্যাপ বারগুলিতে একটি নতুন scrollBehavior প্যারামিটার রয়েছে, যা TopAppBarScrollBehavior ক্লাসের মাধ্যমে স্ক্রল করার সময় বিভিন্ন কার্যকারিতা প্রদান করে, যেমন এলিভেশন পরিবর্তন করা। এটি Modifier.nestedScroll ব্যবহার করে কন্টেন্ট স্ক্রল করার সাথে একত্রে কাজ করে। M2 TopAppBar এটি elevation প্যারামিটারটি ম্যানুয়ালি পরিবর্তন করে করা সম্ভব ছিল:
এম২
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) { … }
}
)
এম৩
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 কম্পোজেবল রয়েছে:
এম২
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
BottomNavigation {
BottomNavigationItem(…)
BottomNavigationItem(…)
BottomNavigationItem(…)
}
এম৩
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
NavigationBar {
NavigationBarItem(…)
NavigationBarItem(…)
NavigationBarItem(…)
}
বাটন, আইকন বাটন এবং FAB

M3-এর বাটন, আইকন বাটন এবং ফ্লোটিং অ্যাকশন বাটন (FAB) M2-এর থেকে ভিন্ন। M3-তে 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(…)
এম৩
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-তে নতুন ধরনের বাটনও অন্তর্ভুক্ত রয়েছে। Compose Material 3 API রেফারেন্স ওভারভিউ- তে সেগুলো দেখে নিন।
সুইচ

M3-এর Switch, M2-এর থেকে আলাদা। M2 এবং M3 উভয় ক্ষেত্রেই, সুইচ কম্পোজেবলটির নাম Switch , কিন্তু ইম্পোর্ট প্যাকেজগুলো ভিন্ন:
এম২
import androidx.compose.material.Switch
Switch(…)
এম৩
import androidx.compose.material3.Switch
Switch(…)
পৃষ্ঠতল এবং উচ্চতা

M3-এর ভূপৃষ্ঠ ও উচ্চতা ব্যবস্থা M2 থেকে ভিন্ন। M3-তে দুই ধরনের উচ্চতা রয়েছে:
- ছায়ার উচ্চতা (ছায়া ফেলে, M2-এর মতোই)
- টোনাল এলিভেশন (একটি রঙের উপর স্তর তৈরি করে, M3-তে নতুন)
Compose-এ, এটি M2 Surface ফাংশন এবং M3 Surface ফাংশনের ক্ষেত্রে প্রযোজ্য:
এম২
import androidx.compose.material.Surface
Surface(
elevation = …
) { … }
এম৩
import androidx.compose.material3.Surface
Surface(
shadowElevation = …,
tonalElevation = …
) { … }
ইউএক্স/ইউআই ডিজাইনের পছন্দের উপর নির্ভর করে, আপনি M2-এর elevation Dp মানগুলি M3-এর shadowElevation এবং/অথবা tonalElevation উভয়ের জন্যই ব্যবহার করতে পারেন। Surface হলো বেশিরভাগ কম্পোনেন্টের পেছনের ব্যাকং কম্পোজেবল, তাই কম্পোনেন্ট কম্পোজেবলগুলিও এলিভেশন প্যারামিটার প্রকাশ করতে পারে যা আপনাকে একইভাবে মাইগ্রেট করতে হবে।
M3-তে টোনাল এলিভেশন, M2 ডার্ক থিমের এলিভেশন ওভারলে-র ধারণাটিকে প্রতিস্থাপন করেছে। ফলে, M3-তে ElevationOverlay এবং LocalElevationOverlay অস্তিত্ব নেই, এবং M2-এর LocalAbsoluteElevation M3-তে LocalAbsoluteTonalElevation এ পরিবর্তিত হয়েছে।
জোর এবং বিষয়বস্তু আলফা

M3-তে এমফাসিস বা জোর দেওয়ার বিষয়টি M2 থেকে উল্লেখযোগ্যভাবে আলাদা। M2-তে, টেক্সট এবং আইকনের মতো বিষয়বস্তুকে আলাদা করার জন্য নির্দিষ্ট আলফা মানের রঙ ব্যবহার করা হতো। M3-তে এখন কয়েকটি ভিন্ন পদ্ধতি রয়েছে:
- সম্প্রসারিত M3 কালার সিস্টেম থেকে প্রাপ্ত রঙগুলোর পাশাপাশি সেগুলোর বিভিন্ন রূপ ব্যবহার করা।
- টেক্সটের জন্য বিভিন্ন ফন্ট ওয়েট ব্যবহার করা।
ফলস্বরূপ, M3-তে ContentAlpha এবং LocalContentAlpha বিদ্যমান নেই এবং এগুলো প্রতিস্থাপন করা প্রয়োজন।
প্রারম্ভিক পদক্ষেপ হিসেবে নিম্নলিখিত ম্যাপিংগুলো সুপারিশ করা হচ্ছে:
| এম২ | এম৩ |
|---|---|
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-এর মধ্যে আইকনের ওপর গুরুত্বারোপের একটি উদাহরণ নিচে দেওয়া হলো:
এম২
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(…)
}
এম৩
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-তে পাঠ্যে জোর দেওয়ার কিছু উদাহরণ দেওয়া হলো:
এম২
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(…)
}
এম৩
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-তে নামযুক্ত কন্টেইনার। সাধারণভাবে, আপনি একই মান ব্যবহার করে M2-এর background* প্যারামিটারগুলোকে M3-এর container* দিয়ে প্রতিস্থাপন করতে পারেন। উদাহরণস্বরূপ:
এম২
Badge(
backgroundColor = MaterialTheme.colors.primary
) { … }
এম৩
Badge(
containerColor = MaterialTheme.colorScheme.primary
) { … }
দরকারী লিঙ্ক
Compose-এ M2 থেকে M3-তে মাইগ্রেট করার বিষয়ে আরও জানতে, নিম্নলিখিত অতিরিক্ত রিসোর্সগুলো দেখুন।
ডাক্তাররা
নমুনা অ্যাপ
- রিপ্লাই M3 স্যাম্পল অ্যাপ
- জেটচ্যাট নমুনা অ্যাপ M2 থেকে M3 মাইগ্রেশন
- জেটনিউজ নমুনা অ্যাপ M2 থেকে M3 মাইগ্রেশন
- এখন অ্যান্ড্রয়েড এম৩ হিরো অ্যাপে :কোর-ডিজাইনসিস্টেম মডিউল
ভিডিও
এপিআই রেফারেন্স এবং সোর্স কোড
{% হুবহু %}আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলেও লিঙ্কের লেখা প্রদর্শিত হয়।
- কম্পোজে ম্যাটেরিয়াল ডিজাইন ২
- কম্পোজে ম্যাটেরিয়াল ডিজাইন ৩
- কম্পোজে কাস্টম ডিজাইন সিস্টেম