Compose-এ XML থিম Material 3-এ মাইগ্রেট করা

আগে থেকে আছে এমন অ্যাপে Compose নিয়ে আসার সময়, Compose কম্পোনেন্টের জন্য MaterialTheme ব্যবহার করতে, আপনাকে Material XML থিম মাইগ্রেট করতে হবে। এর অর্থ হল আপনার অ্যাপের থিমিংয়ের দুটি সোর্স অফ ট্রুথ থাকবে: ভিউ-ভিত্তিক থিম এবং কম্পোজ থিম। আপনার স্টাইলিংয়ে কোনও পরিবর্তন করতে হলে তা একাধিক জায়গায় করতে হবে। আপনার অ্যাপ Compose-এ সম্পূর্ণভাবে মাইগ্রেট করা হয়ে গেলে, XML থিমিং সরিয়ে দিন।

রঙ মাইগ্রেট করার জন্য আপনি মেটিরিয়াল থিম বিল্ডার টুল ব্যবহার করতে পারেন।

XML থেকে Compose-এ মাইগ্রেশন শুরু করার সময়, থিমিং মাইগ্রেট করে Material 3 Compose থিমিংয়ে নিয়ে যান।

শব্দকোষ

শব্দ সংজ্ঞা
MaterialTheme কম্পোজেবল ফাংশন যা Compose UI কম্পোনেন্টে থিমিং (রঙ, টাইপোগ্রাফি, আকার) প্রদান করে।
Shapes MaterialTheme-এর জন্য কাস্টম কম্পোনেন্ট শেপ নির্ধারণ করতে Compose অবজেক্ট ব্যবহার করা হয়।
Typography একটি Compose অবজেক্ট যা MaterialTheme-এর জন্য কাস্টম টেক্সট স্টাইল (ফন্ট ফ্যামিলি, সাইজ, ওজন) নির্ধারণ করতে ব্যবহৃত হয়।
ColorScheme MaterialTheme-এর জন্য কাস্টম রঙের স্কিম নির্ধারণ করতে Compose অবজেক্ট ব্যবহার করা হয়।
XML থিম Android থিমিং সিস্টেম XML ফাইলে সংজ্ঞায়িত করা হয়েছে, যা ভিউ সিস্টেম দ্বারা ব্যবহৃত হয়।

সীমাবদ্ধতা

মাইগ্রেট করার আগে, নিম্নলিখিত সীমাবদ্ধতা সম্পর্কে সচেতন থাকুন:

  • এই নির্দেশিকা শুধুমাত্র Material 3-এ মাইগ্রেট করার উপর ফোকাস করে। বিকল্প ডিজাইন সিস্টেম থেকে মাইগ্রেট করার জন্য, Material 2 অথবা Compose-এ কাস্টম ডিজাইন সিস্টেম দেখুন।
  • চূড়ান্ত লক্ষ্য হল Compose-এ সম্পূর্ণ মাইগ্রেশন করা, যা XML থিমিং সরানোর অনুমতি দেয়। এই নির্দেশিকা থেকে আপনি মাইগ্রেট করার পদ্ধতি সম্পর্কে জানতে পারবেন, তবে XML থিমিং কীভাবে সম্পূর্ণভাবে সরিয়ে দিতে হয় তা ব্যাখ্যা করে না।

ধাপ ১: ডিজাইন সিস্টেম মূল্যায়ন করা

XML View প্রোজেক্টে কোন ডিজাইন সিস্টেম ব্যবহার করা হয়েছে তা শনাক্ত করুন। Compose-এ আগে থেকে থাকা ডিজাইন সিস্টেমকে Material 3-তে মাইগ্রেট করার জন্য মাইগ্রেশন পাথ ও প্রয়োজনীয় ধাপগুলি বিশ্লেষণ করুন।

ধাপ ২: থিম সোর্স ফাইল শনাক্ত করা

XML-এ আপনি ?attr/colorPrimary লেখেন। Compose-এ, আপনি MaterialTheme.*-এর মাধ্যমে থিমের ভ্যালু অ্যাক্সেস করেন:

থিম করার জন্য প্রয়োজনীয় সব XML রিসোর্স ও ফাইল শনাক্ত ও লোকেট করুন: লাইট ও ডার্ক কালার স্কিম ও কোয়ালিফায়ার, থিম, আকার, ডাইমেনশন, টাইপোগ্রাফি, স্টাইল ও অন্যান্য প্রাসঙ্গিক ফাইল।

স্ট্রিংয়ের মতো রিসোর্স যেমন আছে তেমনই আবার ব্যবহার করা যেতে পারে এবং মাইগ্রেট করার প্রয়োজন নেই।

ধাপ ৩: রঙ মাইগ্রেট করা

মূল নীতি: XML-এ নামযুক্ত হেক্স রঙ ব্যবহার করা হয়। Material 3 সিম্যান্টিক ভূমিকা (যেমন, primary, onPrimary, surface) ব্যবহার করে। হেক্স অনুযায়ী রঙের নাম দেওয়া বন্ধ করুন; তাদের ভূমিকা অনুযায়ী নাম দিন।

উদাহরণ:

XML রঙের নাম Material 3 রোল
colorPrimary primary
colorPrimaryDark / colorPrimaryVariant primaryContainer বা secondary
colorAccent secondary বা tertiary
colorOnPrimary onPrimary
android:colorBackground background
colorSurface surface
colorOnSurface onSurface
colorError error
colorOnError onError
colorOutline outline
colorSurfaceVariant surfaceVariant
colorOnSurfaceVariant onSurfaceVariant

XML থেকে ডার্ক ও লাইট রঙের স্কিম মাইগ্রেট করে Material 3 Compose-এ তার সমতুল্য স্কিমে নিয়ে যান।

ধাপ ৪: কাস্টম আকার ও টাইপোগ্রাফি মাইগ্রেট করা

  • আপনার অ্যাপ কাস্টম আকার ব্যবহার করলে:

    1. আপনার Compose কোডে, আপনার XML শেপ ডেফিনেশন রেপ্লিকেট করতে একটি Shapes অবজেক্ট সংজ্ঞায়িত করুন।

    2. আপনার MaterialTheme-এ এই Shapes অবজেক্ট প্রদান করুন।

      আরও জানতে, শেপ দেখুন।

  • আপনার অ্যাপ কাস্টম টাইপোগ্রাফি ব্যবহার করলে:

    1. আপনার কম্পোজ কোডে, আপনার XML টেক্সট স্টাইল এবং ফন্ট সংজ্ঞা প্রতিলিপি করতে আপনার কম্পোজ কোডে একটি Typography অবজেক্ট সংজ্ঞায়িত করুন।

    2. আপনার MaterialTheme-এ এই Typography অবজেক্ট প্রদান করুন।

      আরও জানতে, টাইপোগ্রাফি দেখুন।

কম্পোজ ভূমিকা XML নাম
displayLarge TextAppearance.Material3.DisplayLarge
displayMedium TextAppearance.Material3.DisplayMedium
displaySmall TextAppearance.Material3.DisplaySmall
headlineLarge TextAppearance.Material3.HeadlineLarge
headlineMedium TextAppearance.Material3.HeadlineMedium
headlineSmall TextAppearance.Material3.HeadlineSmall
titleLarge TextAppearance.Material3.TitleLarge
titleMedium TextAppearance.Material3.TitleMedium
titleSmall TextAppearance.Material3.TitleSmall
bodyLarge TextAppearance.Material3.BodyLarge
bodyMedium TextAppearance.Material3.BodyMedium
bodySmall TextAppearance.Material3.BodySmall
labelLarge TextAppearance.Material3.LabelLarge
labelMedium TextAppearance.Material3.LabelMedium
labelSmall TextAppearance.Material3.LabelSmall

ধাপ ৫: স্টাইল মাইগ্রেট করা (styles.xml)

XML স্টাইল (styles.xml) সিস্টেম নিম্নলিখিত আইটেমের স্টাইল ও অ্যাপিয়ারেন্স নির্দিষ্ট করে:

  1. উইজেট, কম্পোনেন্ট, উইন্ডো ও ডায়ালগের জন্য থিম
  2. টাইপোগ্রাফি
  3. থিম ও ওভারলে
  4. আকার

XML ভিউ এবং কম্পোনেন্ট একাধিক অ্যাট্রিবিউট একত্রিত করে একটি স্টাইল তৈরি করে। তারা styles.xml থেকে দুটি ভিন্ন উপায়ে তাদের স্টাইল সেট করে:

  1. XML ভিউতে সরাসরি ও স্পষ্টভাবে "style="@style/..." সেট করা হচ্ছে
  2. আরও বড় থিমের (theme.xml) অংশ হিসেবে কোনও কম্পোনেন্টের জন্য পরোক্ষভাবে এবং অন্তর্নিহিতভাবে স্টাইল সেট করা

Compose-এ স্টাইলের কোনও সরাসরি সমতুল্য নেই - পরিবর্তে স্টাইলগুলি এইভাবে পাস করা হয়: কম্পোজেবলের প্যারামিটার বা মডিফায়ার হিসেবে, AppTheme-এ সংজ্ঞায়িত নতুন, পরীক্ষামূলক Styles API ব্যবহার করে, অথবা সংজ্ঞায়িত স্টাইলের সাথে লেয়ারযুক্ত, পুনরায় ব্যবহারযোগ্য কম্পোজেবল ভেরিয়েশন তৈরি করে।

স্টাইল এবং বেস কম্পোনেন্ট অনুযায়ী নাম দেওয়া আলাদা @Composable ফাংশন প্রদান করুন, যাতে সেইসব কম্পোনেন্টের স্টাইলিং এবং ব্যবহারের ক্ষেত্রে পার্থক্য বোঝা যায়।

  • প্যাটার্ন: কোনও XML এলিমেন্ট কাস্টম স্টাইল ব্যবহার করলে (যেমন, style="@style/MyPrimaryButton"), ইনলাইন স্টাইল রেপ্লিকেট করার চেষ্টা করবেন না। পরিবর্তে, একটি নির্দিষ্ট কম্পোজেবল তৈরি করার সাজেশন দিন।
  • উদাহরণ:
    • XML: <Button style="@style/MyPrimaryButton" ... />
    • কম্পোজ: MyPrimaryButton(onClick = { ... })
  • সাধারণ অ্যাট্রিবিউট গ্রুপ: কোনও স্টাইল যদি সাধারণ মডিফায়ার সেট করে (যেমন প্যাডিং + উচ্চতা), তাহলে সেগুলিকে একটি রিডেবল এক্সটেনশন প্রপার্টি বা শেয়ার করা মডিফায়ার ভেরিয়েবলে এক্সট্র্যাক্ট করুন।

সাধারণ উদাহরণ

XML লিখুন
Theme.Material3.* MaterialTheme(colorScheme, typography, shapes) { }
TextAppearance.Material3.BodyMedium Typography(bodyMedium = ...)-এ TextStyle(...) সংজ্ঞায়িত করা হয়েছে
ShapeAppearance.*.SmallComponent Shapes(small = RoundedCornerShape(X.dp))
Widget.Material3.Button Button(colors = ButtonDefaults.buttonColors(...))
Widget.Material3.CardView Card(shape=..., elevation=..., colors=...)
Widget.*.TextInputLayout.OutlinedBox OutlinedTextField(colors = OutlinedTextFieldDefaults.colors(...))
Widget.*.Chip.Filter FilterChip(colors = FilterChipDefaults.filterChipColors(...))
Widget.*.Toolbar.Primary TopAppBar(colors = TopAppBarDefaults.topAppBarColors(...))
Widget.*.FloatingActionButton FloatingActionButton(containerColor = ...)
backgroundTint ComponentDefaults.ComponentColors()-এ containerColor
android:textColor ComponentDefaults.ComponentColors()-এ contentColor
cornerRadius shape = RoundedCornerShape(X.dp)
android:elevation elevation = ComponentDefaults.elevation(defaultElevation = X.dp)
android:padding contentPadding = PaddingValues(...) বা Modifier.padding()
android:minHeight Modifier.heightIn(min = X.dp)
strokeColor + strokeWidth border = BorderStroke(width, color)
android:textSize TextStyle-এ fontSize = X.sp

ধাপ ৬: থিম মাইগ্রেশন যাচাই করা

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

সব নতুন Compose থিমের ভ্যালু আগে থেকে থাকা XML ভ্যালুর সাথে মিলছে কিনা তা যাচাই করুন। মাইগ্রেট করা কোনও ভ্যালু হার্ডকোড করবেন না।