রচনায় উপাদান 2 থেকে উপাদান 3 এ স্থানান্তর করুন৷

মেটেরিয়াল ডিজাইন 3 হল মেটেরিয়াল ডিজাইনের পরবর্তী বিবর্তন। এতে আপডেটেড থিমিং, কম্পোনেন্ট এবং মেটেরিয়াল ইউ পার্সোনালাইজেশন ফিচার যেমন ডাইনামিক কালার রয়েছে। এটি মেটেরিয়াল ডিজাইন 2 এর একটি আপডেট এবং Android 12 এবং তার উপরে নতুন ভিজ্যুয়াল স্টাইল এবং সিস্টেম UI এর সাথে সুসংহত।

এই নির্দেশিকাটি কম্পোজ ম্যাটেরিয়াল (androidx.compose.material) জেটপ্যাক লাইব্রেরি থেকে কম্পোজ মেটেরিয়াল 3 (androidx.compose.material3) জেটপ্যাক লাইব্রেরিতে স্থানান্তরিত করার উপর দৃষ্টি নিবদ্ধ করে।

দ্রষ্টব্য: এই নির্দেশিকাটি বিনিময়যোগ্য পদগুলি উল্লেখ করতে সংক্ষেপণ "M3" ব্যবহার করে: "Material 3", "Material Design 3", "Material You", এবং Compose Material 3 (androidx.compose.material3) Jetpack লাইব্রেরি। সংক্ষেপে "M2" ব্যবহার করা হয় বিনিময়যোগ্য পদগুলিকে বোঝাতে: "Material 2", "Material Design 2", এবং Compose Material ( androidx.compose.material ) Jetpack লাইব্রেরি।

পন্থা

সাধারণভাবে আপনার দীর্ঘমেয়াদী একটি একক অ্যাপে M2 এবং M3 উভয়ই ব্যবহার করা উচিত নয় । এটি এই কারণে যে দুটি ডিজাইন সিস্টেম এবং সংশ্লিষ্ট লাইব্রেরি তাদের UX/UI ডিজাইন এবং রচনা বাস্তবায়নের ক্ষেত্রে উল্লেখযোগ্যভাবে পৃথক।

আপনার অ্যাপ একটি ডিজাইন সিস্টেম ব্যবহার করতে পারে, যেমন ফিগমা ব্যবহার করে তৈরি করা হয়েছে। এই ধরনের ক্ষেত্রে, আমরা উচ্চতর সুপারিশ করছি যে আপনি বা আপনার ডিজাইন টিম কম্পোজ মাইগ্রেশন শুরু করার আগে এটি M2 থেকে M3 তে স্থানান্তর করুন৷ কোনো অ্যাপ M3-এ স্থানান্তরিত করার কোনো মানে হয় না যদি এর UX/UI ডিজাইন M2-এর উপর ভিত্তি করে হয়।

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

দ্রষ্টব্য: আপনি যদি একটি বিদ্যমান অ্যাপ M2 থেকে M3 তে স্থানান্তরিত করার পরিবর্তে একটি নতুন অ্যাপ শুরু করেন, তাহলে আমরা শুরু থেকেই M3 ব্যবহার করার পরামর্শ দিই।

কখন মাইগ্রেট করতে হবে

আপনার যত তাড়াতাড়ি সম্ভব মাইগ্রেশন শুরু করা উচিত। যাইহোক, M2 থেকে M3 তে সম্পূর্ণরূপে স্থানান্তরিত করার জন্য আপনার অ্যাপটি বাস্তবসম্মত অবস্থানে আছে কিনা তা বিবেচনা করা গুরুত্বপূর্ণ। আপনি শুরু করার আগে তদন্ত বিবেচনা করার জন্য কিছু ব্লকার পরিস্থিতি রয়েছে:

দৃশ্যকল্প	প্রস্তাবিত পদ্ধতির
কোন ব্লকার	পর্যায়ক্রমে মাইগ্রেশন শুরু করুন
M2 থেকে একটি উপাদান এখনও M3 এ উপলব্ধ নয়। নীচের উপাদান এবং বিন্যাস বিভাগ দেখুন.	পর্যায়ক্রমে মাইগ্রেশন শুরু করুন
আপনি বা আপনার ডিজাইন টিম অ্যাপটির ডিজাইন সিস্টেম M2 থেকে M3 তে স্থানান্তরিত করেননি	M2 থেকে M3 তে ডিজাইন সিস্টেম মাইগ্রেট করুন, তারপর পর্যায়ক্রমে মাইগ্রেশন শুরু করুন

এমনকি যদি আপনি উপরের পরিস্থিতি দ্বারা প্রভাবিত হন তবে আপনাকে একটি অ্যাপ আপডেট করার এবং প্রকাশ করার আগে মাইগ্রেশনের জন্য একটি পর্যায়ক্রমে পদ্ধতি গ্রহণ করা উচিত। এই ক্ষেত্রে, আপনি M2 এবং M3 পাশাপাশি ব্যবহার করবেন এবং M3 এ স্থানান্তরিত করার সময় ধীরে ধীরে M2 ফেজ করবেন।

পর্যায়ক্রমে পদ্ধতি

পর্যায়ক্রমে মাইগ্রেশনের সাধারণ পদক্ষেপগুলি নিম্নরূপ:

1. M2 নির্ভরতার পাশাপাশি M3 নির্ভরতা যোগ করুন।
2. আপনার অ্যাপের থিমের M2 সংস্করণের পাশাপাশি আপনার অ্যাপের থিমের M3 সংস্করণ(গুলি) যোগ করুন।
3. আপনার অ্যাপের আকার এবং জটিলতার উপর নির্ভর করে পৃথক মডিউল, স্ক্রিন বা কম্পোজেবলকে M3 তে স্থানান্তর করুন (বিশদ বিবরণের জন্য নীচের বিভাগগুলি দেখুন)।
4. একবার সম্পূর্ণরূপে স্থানান্তরিত হলে, আপনার অ্যাপের থিম(গুলি) এর M2 সংস্করণ(গুলি) সরান৷
5. 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
}

দ্রষ্টব্য: দুটি ধরণের MaterialTheme এর জন্য পরামিতিগুলি আলাদা। এর ফলে পরিবর্তনের পর ত্রুটি দেখা দেয়। এটি কীভাবে সমাধান করা যায় তার রঙ , টাইপোগ্রাফি এবং আকৃতি বিভাগগুলি দেখুন।

রঙ

চিত্র 1 । M2 রঙ সিস্টেম (বাম) বনাম M3 রঙ সিস্টেম (ডান)।

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	নিরপেক্ষ

দ্রষ্টব্য: কিছু M2 এবং M3 রঙের নাম একই, যেমন প্রাথমিক এবং মাধ্যমিক। যাইহোক, তাদের হেক্স কোড মান একই নাও হতে পারে। এর কারণ হল মেটেরিয়াল থিম বিল্ডার M2 রঙ থেকে টোনাল প্যালেট তৈরি করতে একটি অ্যালগরিদম ব্যবহার করে, যা টুলগুলি M3 রঙের স্কিমে ব্যবহার করে।

চিত্র 2 । জেটচ্যাটের M2 রঙগুলি একটি M3 রঙের স্কিম তৈরি করতে ম্যাটেরিয়াল থিম বিল্ডারে ব্যবহৃত হয়।

আপনি টুল থেকে হালকা এবং গাঢ় থিমগুলির জন্য রঙের হেক্স কোড মানগুলি অনুলিপি করতে পারেন এবং একটি 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 এবং তার উপরে ডিভাইসের ওয়ালপেপার রঙগুলি ব্যবহার করতে পারে:

• dynamicLightColorScheme
• dynamicDarkColorScheme

দ্রষ্টব্য: এমনকি যদি আপনি একটি গতিশীল রঙের স্কিম ব্যবহার করতে চান তবে আপনার প্রায় সবসময়ই অ্যান্ড্রয়েড 12 এবং তার উপরে সীমাবদ্ধতার জন্য একটি ফলব্যাক কাস্টম রঙের স্কিম প্রয়োজন। একটি উদাহরণ হিসাবে Jetchat দেখুন.

টাইপোগ্রাফি

চিত্র 3 । M3 টাইপোগ্রাফি সিস্টেম (বাম) বনাম M2 টাইপোগ্রাফি সিস্টেম (ডান)

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

দ্রষ্টব্য: M2 Typography ক্লাসের বিপরীতে, M3 Typography ক্লাসে বর্তমানে একটি defaultFontFamily প্যারামিটার অন্তর্ভুক্ত নেই। এর পরিবর্তে আপনাকে প্রতিটি পৃথক TextStyles fontFamily প্যারামিটার ব্যবহার করতে হবে।

আকৃতি

চিত্র 4 । M2 শেপ সিস্টেম (বাম) বনাম M3 শেপ সিস্টেম (ডান)

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

দ্রষ্টব্য: M3 শেপ সিস্টেম none এবং full শৈলীকেও সংজ্ঞায়িত করে না যা ধ্রুবক এবং Shapes শ্রেণীর অংশ নয়। এগুলোর জন্য যথাক্রমে RectangleShape এবং CircleShape ব্যবহার করুন।

উপাদান এবং বিন্যাস

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 :

M2	M3
androidx.compose.material.BottomNavigation	androidx.compose.material3.NavigationBar
androidx.compose.material.BottomNavigationItem	androidx.compose.material3.NavigationBarItem
androidx.compose.material.Chip	androidx.compose.material3.AssistChip বা androidx.compose.material3.SuggestionChip
androidx.compose.material.ModalBottomSheetLayout	androidx.compose.material3.ModalBottomSheet
androidx.compose.material.ModalDrawer	androidx.compose.material3.ModalNavigationDrawer

অন্যান্য সকল API :

M2	M3
androidx.compose.material.AlertDialog	androidx.compose.material3.AlertDialog
androidx.compose.material.Badge	androidx.compose.material3.Badge
androidx.compose.material.BadgedBox	androidx.compose.material3.BadgedBox
androidx.compose.material.BottomAppBar	androidx.compose.material3.BottomAppBar
androidx.compose.material.BottomSheetScaffold	androidx.compose.material3.BottomSheetScaffold
androidx.compose.material.Button	androidx.compose.material3.Button
androidx.compose.material.Card	androidx.compose.material3.Card
androidx.compose.material.Checkbox	androidx.compose.material3.Checkbox
androidx.compose.material.CircularProgressIndicator	androidx.compose.material3.CircularProgressIndicator
androidx.compose.material.Divider	androidx.compose.material3.Divider
androidx.compose.material.DropdownMenu	androidx.compose.material3.DropdownMenu
androidx.compose.material.DropdownMenuItem	androidx.compose.material3.DropdownMenuItem
androidx.compose.material.ExposedDropdownMenuBox	androidx.compose.material3.ExposedDropdownMenuBox
androidx.compose.material.ExtendedFloatingActionButton	androidx.compose.material3.ExtendedFloatingActionButton
androidx.compose.material.FilterChip	androidx.compose.material3.FilterChip
androidx.compose.material.FloatingActionButton	androidx.compose.material3.FloatingActionButton
androidx.compose.material.Icon	androidx.compose.material3.Icon
androidx.compose.material.IconButton	androidx.compose.material3.IconButton
androidx.compose.material.IconToggleButton	androidx.compose.material3.IconToggleButton
androidx.compose.material.LeadingIconTab	androidx.compose.material3.LeadingIconTab
androidx.compose.material.LinearProgressIndicator	androidx.compose.material3.LinearProgressIndicator
androidx.compose.material.ListItem	androidx.compose.material3.ListItem
androidx.compose.material.NavigationRail	androidx.compose.material3.NavigationRail
androidx.compose.material.NavigationRailItem	androidx.compose.material3.NavigationRailItem
androidx.compose.material.OutlinedButton	androidx.compose.material3.OutlinedButton
androidx.compose.material.OutlinedTextField	androidx.compose.material3.OutlinedTextField
androidx.compose.material.RadioButton	androidx.compose.material3.RadioButton
androidx.compose.material.RangeSlider	androidx.compose.material3.RangeSlider
androidx.compose.material.Scaffold	androidx.compose.material3.Scaffold
androidx.compose.material.ScrollableTabRow	androidx.compose.material3.ScrollableTabRow
androidx.compose.material.Slider	androidx.compose.material3.Slider
androidx.compose.material.Snackbar	androidx.compose.material3.Snackbar
androidx.compose.material.Switch	androidx.compose.material3.Switch
androidx.compose.material.Tab	androidx.compose.material3.Tab
androidx.compose.material.TabRow	androidx.compose.material3.TabRow
androidx.compose.material.Text	androidx.compose.material3.Text
androidx.compose.material.TextButton	androidx.compose.material3.TextButton
androidx.compose.material.TextField	androidx.compose.material3.TextField
androidx.compose.material.TopAppBar	androidx.compose.material3.TopAppBar
androidx.compose.material.TriStateCheckbox	androidx.compose.material3.TriStateCheckbox

কম্পোজ ম্যাটেরিয়াল 3 এপিআই রেফারেন্স ওভারভিউতে সর্বশেষ M3 উপাদান এবং লেআউটগুলি দেখুন এবং নতুন এবং আপডেট হওয়া APIগুলির জন্য রিলিজ পৃষ্ঠায় নজর রাখুন৷

ভারা, স্ন্যাকবার এবং নেভিগেশন ড্রয়ার

চিত্র 5 । স্ন্যাকবার সহ M2 স্ক্যাফোল্ড এবং নেভিগেশন ড্রয়ার (বাম) বনাম M3 স্ক্যাফোল্ড স্ন্যাকবার এবং নেভিগেশন ড্রয়ার (ডানদিকে)।

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-তে SnackbarData ক্লাস SnackbarData এবং M3-এ SnackbarVisuals এ বিভক্ত হয়েছে।

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()
                }
            }
        )
    }
)

শীর্ষ অ্যাপ বার

চিত্র 6 । শীর্ষ অ্যাপ বার সহ M2 স্ক্যাফোল্ড এবং স্ক্রোল করা তালিকা (বামে) বনাম M3 স্ক্যাফোল্ড শীর্ষ অ্যাপ বার এবং স্ক্রোল করা তালিকা (ডানদিকে)

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 এর মাধ্যমে কন্টেন্ট স্ক্রল করার সাথে একত্রে কাজ করে। এম 2 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 { … }
    }
)

নীচের নেভিগেশন / নেভিগেশন বার

চিত্র 7 । M2 নীচের নেভিগেশন (বাম) বনাম M3 নেভিগেশন বার (ডান)।

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

চিত্র 8 । M2 বোতাম (বাম) বনাম M3 বোতাম (ডান)

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 এপিআই রেফারেন্স ওভারভিউতে সেগুলি দেখুন।

সুইচ

চিত্র 9 । M2 সুইচ (বাম) বনাম M3 সুইচ (ডান)।

M3 এ স্যুইচ M2 থেকে ভিন্ন। M2 এবং M3 উভয় ক্ষেত্রেই, সুইচ কম্পোজেবলের নাম Switch কিন্তু আমদানি প্যাকেজগুলি আলাদা:

M2

import androidx.compose.material.Switch

Switch(…)

M3

import androidx.compose.material3.Switch

Switch(…)

পৃষ্ঠ এবং উচ্চতা

চিত্র 10 । M2 পৃষ্ঠের উচ্চতা বনাম M3 পৃষ্ঠের উচ্চতা হালকা থিমে (বাম) এবং অন্ধকার থিমে (ডানদিকে)।

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 এ tonalElevation দ্বারা ব্যবহৃত ডিফল্ট রঙ primary । আপনি ColorScheme ক্লাসে surfaceTint প্যারামিটার ব্যবহার করে এটিকে ওভাররাইড করতে পারেন।

M3-তে টোনাল এলিভেশন M2 ডার্ক থিমে উচ্চতা ওভারলে ধারণাকে প্রতিস্থাপন করে। ফলস্বরূপ, ElevationOverlay এবং LocalElevationOverlay M3-তে বিদ্যমান নেই এবং M2-তে LocalAbsoluteElevation M3-তে LocalAbsoluteTonalElevation এ পরিবর্তিত হয়েছে।

জোর এবং বিষয়বস্তু আলফা

চিত্র 11 । M2 আইকন এবং টেক্সট জোর (বাম) বনাম M3 আইকন এবং টেক্সট জোর (ডান)

M3 তে জোর M2 থেকে উল্লেখযোগ্যভাবে আলাদা। M2-তে, টেক্সট এবং আইকনের মতো বিষয়বস্তুকে আলাদা করার জন্য নির্দিষ্ট আলফা মান সহ রঙ ব্যবহার করার উপর জোর দেওয়া হয়েছে। M3 এ, এখন কয়েকটি ভিন্ন পন্থা রয়েছে:

• প্রসারিত M3 রঙ সিস্টেম থেকে রঙের উপর তাদের বৈকল্পিক পাশাপাশি রং ব্যবহার করা।
• পাঠ্যের জন্য বিভিন্ন ফন্টের ওজন ব্যবহার করা।

ফলস্বরূপ, ContentAlpha এবং LocalContentAlpha M3 তে বিদ্যমান নেই এবং প্রতিস্থাপন করা প্রয়োজন।

দ্রষ্টব্য: M3-এ অক্ষম রাজ্যগুলির জন্য, এটি এখনও M2-এর মতো আলফা মান সহ রঙগুলিতে ব্যবহার করা গ্রহণযোগ্য। আরও তথ্যের জন্য, রঙের ভূমিকা দেখুন।

নিম্নলিখিত ম্যাপিং একটি শুরু বিন্দু হিসাবে সুপারিশ করা হয়:

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 তে স্থানান্তরিত করার বিষয়ে আরও জানতে, নিম্নলিখিত অতিরিক্ত সংস্থানগুলি দেখুন৷

ডক্স

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

নমুনা অ্যাপ্লিকেশন

• M3 নমুনা অ্যাপের উত্তর দিন
• জেটচ্যাট নমুনা অ্যাপ M2 থেকে M3 মাইগ্রেশন
  • প্রাথমিক আলফা01 মাইগ্রেশন
  • ফলো-আপ alpha10 আপডেট
• Jetnews নমুনা অ্যাপ M2 থেকে M3 মাইগ্রেশন
• এখন Android M3 হিরো অ্যাপে: কোর-ডিজাইনসিস্টেম মডিউল

ভিডিও

• আপনি জেটপ্যাক কম্পোজ ব্যবহার করে উপাদান বাস্তবায়ন করছেন

API রেফারেন্স এবং সোর্স কোড

• রচনা উপাদান 3 API রেফারেন্স
• সোর্স কোডে উপাদান 3 নমুনা রচনা করুন

{% শব্দার্থে %} {% endverbatim %}