কম্পোজে XML থিমগুলিকে ম্যাটেরিয়াল 3-এ স্থানান্তর করুন

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

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

যখন আপনি XML থেকে Compose-এ মাইগ্রেশন শুরু করবেন, তখন থিমিংটি Material 3 Compose থিমিং-এ মাইগ্রেট করুন।

শব্দকোষ

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

সীমাবদ্ধতা

স্থানান্তরের আগে নিম্নলিখিত সীমাবদ্ধতাগুলো সম্পর্কে অবগত হন:

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

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

এক্সএমএল ভিউ প্রজেক্টে কোন ডিজাইন সিস্টেম ব্যবহার করা হয়েছে তা শনাক্ত করুন। কম্পোজে বিদ্যমান ডিজাইন সিস্টেমটিকে ম্যাটেরিয়াল ৩-এ মাইগ্রেট করার জন্য মাইগ্রেশন পাথ এবং প্রয়োজনীয় পদক্ষেপগুলো বিশ্লেষণ করুন।

ধাপ ২: থিমের উৎস ফাইলগুলো শনাক্ত করুন

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

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

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

ধাপ ৩: রং স্থানান্তর করুন

মূল নীতি: XML নামযুক্ত হেক্স কালার ব্যবহার করে। ম্যাটেরিয়াল ৩ শব্দার্থিক ভূমিকা (যেমন, primary , onPrimary , surface ) ব্যবহার করে। হেক্স দিয়ে কালারের নামকরণ বন্ধ করুন; তাদের ভূমিকা অনুযায়ী নামকরণ করুন।

উদাহরণ:

XML রঙের নাম উপাদান ৩ এর ভূমিকা
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 শেপ ডেফিনিশনগুলোর অনুরূপ একটি Shape অবজেক্ট সংজ্ঞায়িত করুন।

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

      আরও বিস্তারিত জানতে, আকারসমূহ দেখুন।

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

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

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

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

রচনার ভূমিকা এক্সএমএল নাম
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)

এক্সএমএল স্টাইল (styles.xml) সিস্টেম নিম্নলিখিত বিষয়গুলোর স্টাইল এবং বাহ্যিক রূপ নির্ধারণ করে: ১. উইজেট, কম্পোনেন্ট, উইন্ডো এবং ডায়ালগের জন্য থিম ২. টাইপোগ্রাফি ৩. থিম এবং ওভারলে ৪. শেপ

এক্সএমএল ভিউ এবং কম্পোনেন্টগুলো একটি স্টাইল তৈরি করার জন্য একাধিক অ্যাট্রিবিউটকে একত্রিত করে। তারা styles.xml থেকে দুটি ভিন্ন উপায়ে তাদের স্টাইল নির্ধারণ করে: ১. এক্সএমএল ভিউতে সরাসরি এবং সুস্পষ্টভাবে "style="@style/..." সেট করে ২. একটি বৃহত্তর থিমের (theme.xml) অংশ হিসেবে কোনো কম্পোনেন্টের জন্য পরোক্ষভাবে এবং অন্তর্নিহিতভাবে স্টাইল সেট করে।

Compose-এ স্টাইলের কোনো সরাসরি প্রতিরূপ নেই — এর পরিবর্তে স্টাইলগুলি পাস করা হয়: কম্পোজেবল-এর প্যারামিটার হিসাবে, AppTheme-এ সংজ্ঞায়িত করে, অথবা সংজ্ঞায়িত স্টাইলটি ব্যবহার করে স্তরযুক্ত, পুনঃব্যবহারযোগ্য কম্পোজেবল ভ্যারিয়েশন তৈরি করার মাধ্যমে।

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

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

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

এক্সএমএল রচনা করুন
Theme.MaterialComponents.* MaterialTheme(colorScheme, typography, shapes) { }
TextAppearance.Material3.BodyMedium Typography(bodyMedium = ...) -এ TextStyle(...) সংজ্ঞায়িত করা হয়েছে
ShapeAppearance.*.SmallComponent Shapes(small = RoundedCornerShape(X.dp))
Widget.MaterialComponents.Button Button(colors = ButtonDefaults.buttonColors(...))
Widget.MaterialComponents.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 fontSize = X.sp TextStyle X.sp

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

কম্পোজে নতুন ম্যাটেরিয়াল থিমের জন্য নির্ভরযোগ্য উৎস হিসেবে সর্বদা মূল XML থিমের বিদ্যমান থিম ভ্যালুগুলো ব্যবহার করুন। ব্র্যান্ডের সামঞ্জস্য বজায় রাখতে এবং ভিজ্যুয়াল অবনতি এড়াতে, মাইগ্রেশনের সময় কখনোই নতুন থিম ভ্যালু তৈরি করবেন না।

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