অ্যান্ড্রয়েডের জন্য উপাদান গতির সাথে সুন্দর রূপান্তর তৈরি করা

1. ভূমিকা

মেটেরিয়াল ডিজাইন হল সাহসী এবং সুন্দর ডিজিটাল পণ্য তৈরির একটি সিস্টেম। নীতি এবং উপাদানগুলির একটি ধারাবাহিক সেটের অধীনে শৈলী, ব্র্যান্ডিং, মিথস্ক্রিয়া এবং গতি একত্রিত করার মাধ্যমে, পণ্য দলগুলি তাদের সর্বশ্রেষ্ঠ নকশা সম্ভাবনা উপলব্ধি করতে পারে।

logo_components_color_2x_web_96dp.png

মেটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সহায়তা করে। Google-এ প্রকৌশলী এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান বৈশিষ্ট্যযুক্ত এবং এটি Android, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ

অ্যান্ড্রয়েডের জন্য ম্যাটেরিয়ালের মোশন সিস্টেম কী?

অ্যান্ড্রয়েডের জন্য মেটেরিয়াল মোশন সিস্টেম হল MDC-Android লাইব্রেরির মধ্যে পরিবর্তনের প্যাটার্নের একটি সেট যা ব্যবহারকারীদের একটি অ্যাপ বুঝতে এবং নেভিগেট করতে সাহায্য করতে পারে, যেমনটি মেটেরিয়াল ডিজাইন নির্দেশিকাতে বর্ণিত হয়েছে৷

চারটি প্রধান উপাদান রূপান্তর নিদর্শন নিম্নরূপ:

  • ধারক রূপান্তর: UI উপাদানগুলির মধ্যে রূপান্তর যা একটি ধারক অন্তর্ভুক্ত করে; নির্বিঘ্নে একটি উপাদানকে অন্যটিতে রূপান্তর করে দুটি স্বতন্ত্র UI উপাদানের মধ্যে একটি দৃশ্যমান সংযোগ তৈরি করে।
  • ভাগ করা অক্ষ: UI উপাদানগুলির মধ্যে স্থানান্তর যা একটি স্থানিক বা নেভিগেশনাল সম্পর্ক রয়েছে; উপাদানগুলির মধ্যে সম্পর্ককে শক্তিশালী করতে x, y, বা z অক্ষে একটি ভাগ করা রূপান্তর ব্যবহার করে।
  • ফেইড থ্রু: UI উপাদানগুলির মধ্যে রূপান্তর যা একে অপরের সাথে শক্তিশালী সম্পর্ক নেই; ইনকামিং এলিমেন্টের স্কেল সহ একটি অনুক্রমিক ফেইড আউট এবং ফেড ইন ব্যবহার করে।
  • ফেইড: UI উপাদানগুলির জন্য ব্যবহৃত হয় যা স্ক্রিনের সীমানার মধ্যে প্রবেশ করে বা প্রস্থান করে।

MDC-Android লাইব্রেরি এই প্যাটার্নগুলির জন্য ট্রানজিশন ক্লাস অফার করে, AndroidX ট্রানজিশন লাইব্রেরি ( androidx.transition ) এবং Android ট্রানজিশন ফ্রেমওয়ার্ক ( android.transition ) উভয়ের উপরেই তৈরি করা হয়েছে :

অ্যান্ড্রয়েডএক্স

  • com.google.android.material.transition প্যাকেজে উপলব্ধ
  • API স্তর 14+ সমর্থন করে
  • টুকরা এবং দৃশ্য সমর্থন করে, কিন্তু কার্যকলাপ বা উইন্ডোজ নয়
  • এপিআই লেভেল জুড়ে ব্যাকপোর্ট করা বাগ ফিক্স এবং সামঞ্জস্যপূর্ণ আচরণ রয়েছে

ফ্রেমওয়ার্ক

  • com.google.android.material.transition.platform প্যাকেজে উপলব্ধ
  • API স্তর 21+ সমর্থন করে
  • ফ্র্যাগমেন্ট, ভিউ, অ্যাক্টিভিটি এবং উইন্ডোজ সমর্থন করে
  • বাগ ফিক্স ব্যাকপোর্ট করা হয়নি এবং এপিআই লেভেল জুড়ে ভিন্ন আচরণ থাকতে পারে

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

আপনি কি নির্মাণ করবেন

এই কোডল্যাব আপনার অ্যাপের চেহারা এবং অনুভূতি কাস্টমাইজ করতে আপনি কীভাবে MDC-Android লাইব্রেরি থেকে রূপান্তরগুলি ব্যবহার করতে পারেন তা প্রদর্শন করতে Kotlin ব্যবহার করে উত্তর নামক একটি উদাহরণ Android ইমেল অ্যাপে কিছু রূপান্তর তৈরি করার মাধ্যমে আপনাকে গাইড করবে৷

রিপ্লাই অ্যাপের জন্য স্টার্টার কোড প্রদান করা হবে, এবং আপনি অ্যাপটিতে নিম্নলিখিত উপাদানের রূপান্তরগুলিকে অন্তর্ভুক্ত করবেন, যা নীচে সম্পূর্ণ কোডল্যাবের জিআইএফ-এ দেখা যাবে:

  • ইমেল তালিকা থেকে ইমেল বিস্তারিত পৃষ্ঠায় কনটেইনার রূপান্তর
  • ইমেল পৃষ্ঠা রচনা করার জন্য FAB থেকে কনটেইনার রূপান্তর পরিবর্তন
  • সার্চ আইকন থেকে সার্চ ভিউ পৃষ্ঠায় শেয়ার করা জেড-অক্ষ পরিবর্তন
  • মেইলবক্স পৃষ্ঠাগুলির মধ্যে স্থানান্তরের মাধ্যমে বিবর্ণ
  • ইমেল ঠিকানা চিপ থেকে কার্ড ভিউতে কনটেইনার রূপান্তর

The domain of the requested iframe (youtu.be) has not been whitelisted.

আপনি কি প্রয়োজন হবে

  • অ্যান্ড্রয়েড বিকাশ এবং কোটলিনের প্রাথমিক জ্ঞান
  • অ্যান্ড্রয়েড স্টুডিও (যদি আপনার কাছে এটি ইতিমধ্যে না থাকে তবে এটি এখানে ডাউনলোড করুন)
  • একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
  • নমুনা কোড (পরবর্তী ধাপ দেখুন)

অ্যান্ড্রয়েড অ্যাপ তৈরি করার অভিজ্ঞতার স্তরকে আপনি কীভাবে রেট করবেন?

নবজাতক মধ্যবর্তী দক্ষ

2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

অ্যান্ড্রয়েড স্টুডিও চালু করুন

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

বিকল্প 1: GitHub থেকে স্টার্টার কোডল্যাব অ্যাপটি ক্লোন করুন

GitHub থেকে এই কোডল্যাব ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:

git clone https://github.com/material-components/material-components-android-motion-codelab.git
cd material-components-android-motion-codelab

বিকল্প 2: স্টার্টার কোডল্যাব অ্যাপ জিপ ফাইলটি ডাউনলোড করুন

স্টার্টার অ্যাপটি material-components-android-motion-codelab-develop ডিরেক্টরির মধ্যে অবস্থিত।

অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন

  1. সেটআপ উইজার্ড শেষ হয়ে গেলে এবং Android স্টুডিওতে স্বাগতম উইন্ডোটি দেখানো হলে, একটি বিদ্যমান অ্যান্ড্রয়েড স্টুডিও প্রকল্প খুলুন ক্লিক করুন।

e3f200327a67a53.png

  1. আপনি যে ডিরেক্টরিতে নমুনা কোড ইনস্টল করেছেন সেখানে নেভিগেট করুন এবং প্রকল্পটি খুলতে নমুনা ডিরেক্টরি নির্বাচন করুন।
  2. অ্যান্ড্রয়েড স্টুডিওর উইন্ডোর নীচে কার্যকলাপ নির্দেশক দ্বারা দেখানো হিসাবে, প্রকল্পটি তৈরি এবং সিঙ্ক করার জন্য কিছুক্ষণ অপেক্ষা করুন৷
  1. এই মুহুর্তে, Android স্টুডিও কিছু বিল্ড ত্রুটি বাড়াতে পারে কারণ আপনি Android SDK বা বিল্ড টুল মিস করছেন, যেমন নীচে দেখানো একটি। এগুলি ইনস্টল/আপডেট করতে এবং আপনার প্রকল্প সিঙ্ক করতে Android স্টুডিওতে নির্দেশাবলী অনুসরণ করুন। আপনি যদি এখনও সমস্যায় পড়ে থাকেন, তাহলে SDK ম্যানেজারের সাথে আপনার টুল আপডেট করার নির্দেশিকা অনুসরণ করুন।

6e026ae171f5b1eb.png

প্রকল্প নির্ভরতা যাচাই করুন

প্রকল্পটির MDC-Android লাইব্রেরির উপর নির্ভরতা প্রয়োজন। আপনি যে নমুনা কোডটি ডাউনলোড করেছেন তাতে ইতিমধ্যেই এই নির্ভরতা তালিকাভুক্ত থাকা উচিত, তবে নিশ্চিত করতে কনফিগারেশনটি একবার দেখে নেওয়া যাক।

app মডিউলের build.gradle ফাইলে নেভিগেট করুন এবং নিশ্চিত করুন যে dependencies ব্লকে MDC-Android-এর উপর নির্ভরতা অন্তর্ভুক্ত রয়েছে: 

implementation 'com.google.android.material:material:1.2.0'

স্টার্টার অ্যাপটি চালান

  1. নিশ্চিত করুন যে ডিভাইসের পছন্দের বাম দিকের বিল্ড কনফিগারেশনটি app ।
  2. অ্যাপটি তৈরি এবং চালাতে সবুজ রান/প্লে বোতাম টিপুন।

24218d0a6ae25803.png

  1. ডিপ্লয়মেন্ট টার্গেট নির্বাচন করুন উইন্ডোতে, যদি আপনার উপলব্ধ ডিভাইসগুলিতে ইতিমধ্যেই একটি Android ডিভাইস তালিকাভুক্ত থাকে, তাহলে ধাপ 8 এ যান। অন্যথায়, নতুন ভার্চুয়াল ডিভাইস তৈরি করুন ক্লিক করুন।
  2. হার্ডওয়্যার নির্বাচন করুন স্ক্রিনে, একটি ফোন ডিভাইস নির্বাচন করুন, যেমন পিক্সেল 3 , এবং তারপরে পরবর্তী ক্লিক করুন।
  3. সিস্টেম ইমেজ স্ক্রিনে, একটি সাম্প্রতিক Android সংস্করণ নির্বাচন করুন, বিশেষত সর্বোচ্চ API স্তর। এটি ইনস্টল করা না থাকলে, দেখানো ডাউনলোড লিঙ্কটিতে ক্লিক করুন এবং ডাউনলোডটি সম্পূর্ণ করুন।
  4. পরবর্তী ক্লিক করুন.
  5. অ্যান্ড্রয়েড ভার্চুয়াল ডিভাইস (AVD) স্ক্রিনে, সেটিংস যেমন আছে তেমনই রেখে দিন এবং ফিনিশ এ ক্লিক করুন।
  6. স্থাপনার লক্ষ্য ডায়ালগ থেকে একটি Android ডিভাইস নির্বাচন করুন।
  7. ওকে ক্লিক করুন।
  8. অ্যান্ড্রয়েড স্টুডিও অ্যাপটি তৈরি করে, এটি স্থাপন করে এবং স্বয়ংক্রিয়ভাবে লক্ষ্য ডিভাইসে এটি খোলে।

সফলতার ! উত্তরের হোম পৃষ্ঠার জন্য স্টার্টার কোড আপনার এমুলেটরে চলমান হওয়া উচিত। আপনার ইমেলের একটি তালিকা সম্বলিত ইনবক্স দেখতে হবে।

cc73eb0d0f779035.png

ঐচ্ছিক: ডিভাইস অ্যানিমেশন ধীর করুন

যেহেতু এই কোডল্যাবে দ্রুত, কিন্তু পালিশ করা ট্রানজিশন জড়িত, তাই আপনি যখন বাস্তবায়ন করছেন তখন ট্রানজিশনের কিছু সূক্ষ্ম বিবরণ পর্যবেক্ষণ করার জন্য ডিভাইসের অ্যানিমেশনগুলিকে ধীর করতে এটি কার্যকর হতে পারে। এটি হয় adb শেল কমান্ড বা একটি দ্রুত সেটিংস টাইল দিয়ে সম্পন্ন করা যেতে পারে। নোট করুন যে ডিভাইস অ্যানিমেশনগুলিকে ধীর করার এই পদ্ধতিগুলি উত্তর অ্যাপের বাইরের ডিভাইসে অ্যানিমেশনগুলিকেও প্রভাবিত করবে৷

পদ্ধতি 1: ADB শেল কমান্ড

10x এর একটি ফ্যাক্টর দ্বারা ডিভাইসের অ্যানিমেশনগুলিকে ধীর করতে, আপনি কমান্ড লাইন থেকে নিম্নলিখিত কমান্ডগুলি চালাতে পারেন:

adb shell settings put global window_animation_scale 10
adb shell settings put global transition_animation_scale 10
adb shell settings put global animator_duration_scale 10

ডিভাইসের অ্যানিমেশন গতিকে স্বাভাবিক অবস্থায় ফিরিয়ে আনতে, নিম্নলিখিত কমান্ডগুলি চালান:

adb shell settings put global window_animation_scale 1
adb shell settings put global transition_animation_scale 1
adb shell settings put global animator_duration_scale 1

পদ্ধতি 2: দ্রুত সেটিংস টাইল

বিকল্পভাবে, দ্রুত সেটিংস টাইল সেট আপ করতে, আগে আপনার ডিভাইসে বিকাশকারী সেটিংস সক্ষম করুন যদি আপনি এটি আগে না করে থাকেন:

  1. ডিভাইস "সেটিংস" অ্যাপ খুলুন
  2. নীচে স্ক্রোল করুন এবং "অনুকরণ করা ডিভাইস সম্পর্কে" ক্লিক করুন
  3. নীচের দিকে স্ক্রোল করুন এবং বিকাশকারী সেটিংস সক্ষম না হওয়া পর্যন্ত দ্রুত "বিল্ড নম্বর" এ ক্লিক করুন৷

এরপরে, দ্রুত সেটিংস টাইল সক্ষম করতে ডিভাইস "সেটিংস" অ্যাপের মধ্যেই নিম্নলিখিতগুলি করুন:

  1. স্ক্রিনের শীর্ষে অনুসন্ধান আইকন বা অনুসন্ধান বারে ক্লিক করুন
  2. অনুসন্ধান ক্ষেত্রে "টাইলস" টাইপ করুন
  3. "দ্রুত সেটিংস বিকাশকারী টাইলস" সারিতে ক্লিক করুন
  4. "উইন্ডো অ্যানিমেশন স্কেল" সুইচে ক্লিক করুন

অবশেষে, কোডল্যাব জুড়ে, স্ক্রিনের উপরে থেকে সিস্টেম বিজ্ঞপ্তি ছায়াটি টানুন এবং ব্যবহার করুন c7e3f98200023f6a.png ধীর এবং স্বাভাবিক গতির অ্যানিমেশনগুলির মধ্যে টগল করার জন্য আইকন।

3. নমুনা অ্যাপ কোডের সাথে পরিচিত হন

আসুন কোডটি দেখে নেওয়া যাক। আমরা একটি অ্যাপ প্রদান করেছি যা জেটপ্যাক নেভিগেশন কম্পোনেন্ট লাইব্রেরি ব্যবহার করে কয়েকটি ভিন্ন খণ্ডের মধ্যে নেভিগেট করার জন্য, সবগুলোই একটি একক কার্যকলাপের মধ্যে, প্রধান কার্যকলাপ :

  • HomeFragment: ইমেলের একটি তালিকা প্রদর্শন করে
  • EmailFragment: একটি একক, সম্পূর্ণ ইমেল প্রদর্শন করে
  • ComposeFragment: একটি নতুন ইমেল রচনার অনুমতি দেয়
  • SearchFragment: একটি অনুসন্ধান দৃশ্য প্রদর্শন করে

প্রথমত, অ্যাপের নেভিগেশন গ্রাফ কীভাবে সেট আপ করা হয়েছে তা বোঝার জন্য, অ্যাপে navigation_graph.xml খুলুন app -> src -> main -> res -> navigation Directory:

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/navigation_graph"
   app:startDestination="@id/homeFragment">

   <fragment
       android:id="@+id/homeFragment"
       android:name="com.materialstudies.reply.ui.home.HomeFragment"
       android:label="HomeFragment">
       <argument...>
       <action
           android:id="@+id/action_homeFragment_to_emailFragment"
           app:destination="@id/emailFragment" />
   </fragment>
   <fragment
       android:id="@+id/emailFragment"
       android:name="com.materialstudies.reply.ui.email.EmailFragment"
       android:label="EmailFragment">
       <argument...>
   </fragment>
   <fragment
       android:id="@+id/composeFragment"
       android:name="com.materialstudies.reply.ui.compose.ComposeFragment"
       android:label="ComposeFragment">
       <argument...>
   </fragment>
   <fragment
       android:id="@+id/searchFragment"
       android:name="com.materialstudies.reply.ui.search.SearchFragment"
       android:label="SearchFragment" />
   <action
       android:id="@+id/action_global_homeFragment"
       app:destination="@+id/homeFragment"
       app:launchSingleTop="true"
       app:popUpTo="@+id/navigation_graph"
       app:popUpToInclusive="true"/>
   <action
       android:id="@+id/action_global_composeFragment"
       app:destination="@+id/composeFragment" />
   <action
       android:id="@+id/action_global_searchFragment"
       app:destination="@+id/searchFragment" />
</navigation>

app:startDestination="@id/homeFragment" এর মাধ্যমে HomeFragment সেট করা ডিফল্ট লঞ্চ ফ্র্যাগমেন্ট সহ, উপরে উল্লিখিত সমস্ত খণ্ডগুলি কীভাবে উপস্থিত রয়েছে তা নোট করুন। ফ্র্যাগমেন্ট গন্তব্য গ্রাফের এই XML সংজ্ঞা, সেইসাথে ক্রিয়াগুলি, জেনারেট করা Kotlin নেভিগেশন কোডকে জানায় যা আপনি ট্রানজিশন হুক করার সময় সম্মুখীন হবেন।

activity_main.xml

এর পরে, অ্যাপটিতে activity_main.xml লেআউটটি দেখুন app -> src -> main -> res -> layout ডিরেক্টরি। আপনি NavHostFragment দেখতে পাবেন যা উপরে থেকে নেভিগেশন গ্রাফের সাথে কনফিগার করা হয়েছে:

<fragment
   android:id="@+id/nav_host_fragment"
   android:name="androidx.navigation.fragment.NavHostFragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:defaultNavHost="true"
   app:navGraph="@navigation/navigation_graph"/>

এই NavHostFragment স্ক্রীনকে পূর্ণ করে এবং অ্যাপের সমস্ত পূর্ণ স্ক্রীন ফ্র্যাগমেন্ট নেভিগেশন পরিবর্তনগুলি পরিচালনা করে। BottomAppBar এবং এর অ্যাঙ্কর করা FloatingActionButton , এছাড়াও activity_main.xml এ, NavHostFragment দ্বারা প্রদর্শিত বর্তমান টুকরোটির উপরে রাখা হয়েছে, এবং সেইজন্য প্রদত্ত নমুনা অ্যাপ কোড দ্বারা খণ্ডের গন্তব্যের উপর নির্ভর করে দেখানো বা লুকানো হবে।

অতিরিক্তভাবে, activity_main.xml এ BottomNavDrawerFragment হল একটি নিচের ড্রয়ার যাতে বিভিন্ন ইমেল মেলবক্সের মধ্যে নেভিগেট করার জন্য একটি মেনু থাকে, যা শর্তসাপেক্ষে BottomAppBar রিপ্লাই লোগো বোতামের মাধ্যমে দেখানো হয়।

MainActivity.kt

সবশেষে, ব্যবহার করা একটি নেভিগেশন অ্যাকশনের উদাহরণ দেখতে, অ্যাপে MainActivity.kt খুলুন app -> src -> main -> java -> com.materialstudies.reply.ui ডিরেক্টরি। navigateToSearch() ফাংশনটি সনাক্ত করুন, যা এইরকম হওয়া উচিত:

private fun navigateToSearch() {
   val directions = SearchFragmentDirections.actionGlobalSearchFragment()
   findNavController(R.id.nav_host_fragment).navigate(directions)
}

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

এখন যেহেতু আপনি স্টার্টার কোডের সাথে পরিচিত, আসুন আমাদের প্রথম রূপান্তরটি বাস্তবায়ন করি।

4. ইমেল তালিকা থেকে ইমেল বিস্তারিত পৃষ্ঠায় কনটেইনার ট্রান্সফর্ম ট্রানজিশন যোগ করুন

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

কোনো কোড যোগ করার আগে, রিপ্লাই অ্যাপটি চালানোর চেষ্টা করুন এবং একটি ইমেলে ক্লিক করুন। এটি একটি সাধারণ জাম্প-কাট করা উচিত, যার অর্থ স্ক্রীনটি কোনও রূপান্তর ছাড়াই প্রতিস্থাপিত হয়েছে:

f0e8a92eb2216bce.gif

নিম্নলিখিত স্নিপেটে দেখানো হিসাবে email_item_layout.xml এ MaterialCardView এ একটি transitionName অ্যাট্রিবিউট যোগ করে শুরু করুন:

email_item_layout.xml

android:transitionName="@{@string/email_card_transition_name(email.id)}"

ট্রানজিশন নামটি একটি প্যারামিটার সহ একটি স্ট্রিং রিসোর্সে নেয়। আমাদের EmailFragment প্রতিটি transitionName অনন্য তা নিশ্চিত করতে আপনাকে প্রতিটি ইমেলের আইডি ব্যবহার করতে হবে।

এখন যেহেতু আপনি আপনার ইমেল তালিকা আইটেমের রূপান্তর নাম সেট করেছেন, আসুন ইমেল বিবরণ লেআউটে একই কাজ করি৷ fragment_email.xml এ, MaterialCardView এর transitionName নিম্নলিখিত স্ট্রিং রিসোর্সে সেট করুন:

fragment_email.xml

android:transitionName="@string/email_card_detail_transition_name"

HomeFragment.kt এ, আপনার স্টার্ট ভিউ (ইমেল লিস্ট আইটেম) এবং শেষ ভিউ (ইমেল বিশদ স্ক্রীন) থেকে ম্যাপিং তৈরি করতে নিচের স্নিপেট দিয়ে onEmailClicked এ কোডটি প্রতিস্থাপন করুন:

HomeFragment.kt

val emailCardDetailTransitionName = getString(R.string.email_card_detail_transition_name)
val extras = FragmentNavigatorExtras(cardView to emailCardDetailTransitionName)
val directions = HomeFragmentDirections.actionHomeFragmentToEmailFragment(email.id)
findNavController().navigate(directions, extras)

এখন আপনার প্লাম্বিং কনফিগার করা আছে, আপনি একটি ধারক রূপান্তর তৈরি করতে পারেন। EmailFragment onCreate পদ্ধতিতে, sharedElementEnterTransition MaterialContainerTransform এর একটি নতুন উদাহরণে সেট করুন ( com.google.android.material.transition সংস্করণের বিপরীতে com.google.android.material.transition.platform সংস্করণ আমদানি করা) নিম্নলিখিত snippet যোগ করে :

EmailFragment.kt

sharedElementEnterTransition = MaterialContainerTransform().apply {
   drawingViewId = R.id.nav_host_fragment
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   scrimColor = Color.TRANSPARENT
   setAllContainerColors(requireContext().themeColor(R.attr.colorSurface))
}

এখন অ্যাপটি পুনরায় চালানোর চেষ্টা করুন।

ed62cedec31da268.gif

জিনিসগুলি দুর্দান্ত দেখতে শুরু করছে! আপনি যখন ইমেল তালিকায় একটি ইমেলে ক্লিক করেন, একটি ধারক রূপান্তর তালিকা আইটেমটিকে একটি পূর্ণ স্ক্রীন বিবরণ পৃষ্ঠায় প্রসারিত করা উচিত। যাইহোক, লক্ষ্য করুন কিভাবে পিছনে চাপলে ইমেলটি তালিকায় ফিরে আসে না। উপরন্তু, ইমেল তালিকা পরিবর্তনের শুরুতে অবিলম্বে অদৃশ্য হয়ে যায়, ধূসর উইন্ডোর পটভূমি দেখায়। তাই আমরা এখনও সম্পন্ন করছি না.

রিটার্ন ট্রানজিশন ঠিক করতে, HomeFragment.kt এ onViewCreated পদ্ধতিতে নিম্নলিখিত দুটি লাইন যোগ করুন:

HomeFragment.kt

postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }

অ্যাপটি আবার চালানোর চেষ্টা করুন। একটি ইমেল খোলার পরে ফিরে টিপলে ইমেলটি তালিকায় ফিরে আসবে। চমৎকার! আসুন অ্যানিমেশনের উন্নতি করতে থাকি।

ইমেল তালিকা অদৃশ্য হওয়ার সমস্যাটি হল কারণ যখন নেভিগেশন কম্পোনেন্ট ব্যবহার করে একটি নতুন ফ্র্যাগমেন্টে নেভিগেট করা হয়, তখন বর্তমান ফ্র্যাগমেন্টটি অবিলম্বে সরানো হয় এবং আমাদের নতুন, ইনকামিং ফ্র্যাগমেন্টের সাথে প্রতিস্থাপিত হয়। প্রতিস্থাপিত হওয়ার পরেও ইমেল তালিকাটি দৃশ্যমান রাখতে, আপনি HomeFragment এ একটি প্রস্থান পরিবর্তন যোগ করতে পারেন।

HomeFragment onEmailClicked পদ্ধতিতে নীচের স্নিপেটটি যোগ করুন যাতে ইমেলগুলির তালিকাটি সূক্ষ্মভাবে প্রস্থান করার সময় এবং পুনরায় প্রবেশের সময় ফিরে আসে:

HomeFragment.kt

exitTransition = MaterialElevationScale(false).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

এরপরে, MaterialElevationScale রূপান্তরটি সম্পূর্ণরূপে হোম স্ক্রিনে প্রয়োগ করা হয়েছে তা নিশ্চিত করার জন্য, অনুক্রমের প্রতিটি পৃথক দৃশ্যের পরিবর্তে, একটি ট্রানজিশন গ্রুপ হিসাবে fragment_home.xml এ RecyclerView চিহ্নিত করুন।

fragment_home.xml

android:transitionGroup="true"

এই পর্যায়ে, আপনার একটি সম্পূর্ণরূপে কাজ করা পাত্রে রূপান্তর হওয়া উচিত। একটি ইমেলের উপর ক্লিক করা ইমেলের তালিকা প্রত্যাহার করার সময় তালিকা আইটেমটিকে একটি বিশদ স্ক্রিনে প্রসারিত করে। ইমেলের তালিকায় স্কেল করার সময় পিছনে টিপলে ইমেলের বিবরণের স্ক্রীনটি একটি তালিকা আইটেমে ফিরে আসে।

9df2b39d5a150418.gif

5. ইমেল পৃষ্ঠা রচনা করতে FAB থেকে কনটেইনার ট্রান্সফর্ম ট্রানজিশন যোগ করুন

চলুন কন্টেইনার ট্রান্সফর্ম চালিয়ে যাই এবং ফ্লোটিং অ্যাকশন বোতাম থেকে ComposeFragment একটি রূপান্তর যোগ করি, ব্যবহারকারীর দ্বারা লিখিত একটি নতুন ইমেলে FAB-কে প্রসারিত করা হয়। প্রথমে, অ্যাপটি পুনরায় চালান এবং ইমেল রচনা স্ক্রীনটি চালু করার সময় কোন পরিবর্তন নেই তা দেখতে FAB-এ ক্লিক করুন।

d242c9708abd382c.gif

যখন আমরা একই ট্রানজিশন ক্লাস ব্যবহার করি, তখন আমাদের এই উদাহরণটি কনফিগার করার পদ্ধতিটি ভিন্ন হবে কারণ আমাদের FAB MainActivity এ থাকে এবং আমাদের ComposeFragment আমাদের MainActivity নেভিগেশন হোস্ট কন্টেইনারের মধ্যে রাখা হয়।

ComposeFragment.kt এ, onViewCreated পদ্ধতিতে নিম্নলিখিত স্নিপেট যোগ করুন, Slide এর androidx.transition সংস্করণ আমদানি করা নিশ্চিত করুন।

ComposeFragment.kt

enterTransition = MaterialContainerTransform().apply {
   startView = requireActivity().findViewById(R.id.fab)
   endView = emailCardView
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   scrimColor = Color.TRANSPARENT
   containerColor = requireContext().themeColor(R.attr.colorSurface)
   startContainerColor = requireContext().themeColor(R.attr.colorSecondary)
   endContainerColor = requireContext().themeColor(R.attr.colorSurface)
}
returnTransition = Slide().apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()
   addTarget(R.id.email_card_view)
}

আমাদের পূর্ববর্তী কন্টেইনার ট্রান্সফর্ম কনফিগার করতে ব্যবহৃত প্যারামিটারগুলি ছাড়াও, startView এবং endView এখানে ম্যানুয়ালি সেট করা হচ্ছে। অ্যান্ড্রয়েড ট্রানজিশন সিস্টেমকে কোন দৃশ্যগুলিকে রূপান্তরিত করা উচিত তা জানাতে transitionName বৈশিষ্ট্যগুলি ব্যবহার করার পরিবর্তে, আপনি প্রয়োজনে এগুলি ম্যানুয়ালি নির্দিষ্ট করতে পারেন৷

এখন, অ্যাপটি পুনরায় চালান। আপনি FAB কে কম্পোজ স্ক্রিনে রূপান্তরিত দেখতে পাবেন (এই ধাপের শেষে GIF দেখুন)।

পূর্ববর্তী ধাপের মতই, আপনাকে HomeFragment এ একটি ট্রানজিশন যোগ করতে হবে যাতে এটি ComposeFragment দ্বারা অপসারণ এবং প্রতিস্থাপিত হওয়ার পরে অদৃশ্য হয়ে না যায়।

কল NavController navigate আগে MainActivity তে navigateToCompose পদ্ধতিতে নীচের স্নিপেটটি অনুলিপি করুন।

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialElevationScale(false).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
   reenterTransition = MaterialElevationScale(true).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

এই পদক্ষেপের জন্য এটি! নিচের মত দেখতে স্ক্রীন রচনা করতে আপনার FAB থেকে একটি রূপান্তর হওয়া উচিত:

81b68391ac4b0a9.gif

6. সার্চ ভিউ পেজে সার্চ আইকন থেকে শেয়ার্ড জেড-অ্যাক্সিস ট্রানজিশন যোগ করুন

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

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

499e1a677b4216bb.gif

শুরু করতে, MainActivity এ navigateToSearch পদ্ধতিটি খুঁজুন এবং বর্তমান খণ্ডটির প্রস্থান সেট আপ করতে এবং MaterialSharedAxis Z-Axis ট্রানজিশনগুলি পুনরায় প্রবেশ করতে NavController navigate পদ্ধতি কলের আগে নিম্নলিখিত কোড স্নিপেটটি যোগ করুন।

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
   reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

এরপরে, SearchFragment এ onCreate পদ্ধতিতে নিম্নলিখিত কোড স্নিপেট যোগ করুন, যা এর এন্টার এবং রিটার্ন MaterialSharedAxis ট্রানজিশন কনফিগার করে।

SearchFragment.kt

enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

সবশেষে, MaterialSharedAxis ট্রানজিশন সম্পূর্ণরূপে সার্চ স্ক্রিনে প্রয়োগ করা হয়েছে তা নিশ্চিত করার জন্য, অনুক্রমের প্রতিটি পৃথক ভিউয়ের পরিবর্তে, একটি ট্রানজিশন গ্রুপ হিসেবে fragment_search.xml এ LinearLayout চিহ্নিত করুন।

fragment_search.xml

android:transitionGroup="true"

তাই তো! এখন অ্যাপটি পুনরায় চালানোর চেষ্টা করুন এবং অনুসন্ধান আইকনে আলতো চাপুন। হোম এবং সার্চ ভিউ স্ক্রীনগুলি একই সাথে Z-অক্ষ বরাবর বিবর্ণ এবং স্কেল করা উচিত, যা দুটি পর্দার মধ্যে একটি বিরামহীন প্রভাব তৈরি করে।

e5c0b0a130e807db.gif

7. মেলবক্স পৃষ্ঠাগুলির মধ্যে পরিবর্তনের মাধ্যমে ফেইড যোগ করুন

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

কোনও অতিরিক্ত কোড যোগ করার আগে, অ্যাপটি চালানোর চেষ্টা করুন, নীচের অ্যাপ বারে উত্তর লোগোতে আলতো চাপুন এবং মেলবক্সগুলি স্যুইচ করুন৷ ইমেলের তালিকা কোন পরিবর্তন ছাড়াই পরিবর্তন করা উচিত।

2c874c0a4588e8fb.gif

শুরু করতে, MainActivity এ navigateToHome পদ্ধতিটি খুঁজুন এবং বর্তমান খণ্ডটির প্রস্থান MaterialFadeThrough ট্রানজিশন সেট আপ করতে NavController navigate পদ্ধতি কলের আগে নিম্নলিখিত কোড স্নিপেট যোগ করুন।

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialFadeThrough().apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

এরপরে, HomeFragment খুলুন। onCreate এ, MaterialFadeThrough এর একটি নতুন উদাহরণে ফ্র্যাগমেন্টের enterTransition সেট করুন।

HomeFragment.kt

enterTransition = MaterialFadeThrough().apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

অ্যাপটি আবার চালান। আপনি যখন নীচের নেভিগেশন ড্রয়ারটি খুলবেন এবং মেলবক্সগুলি পরিবর্তন করবেন, তখন ইমেলের বর্তমান তালিকাটি বিবর্ণ হওয়া উচিত এবং স্কেল করা উচিত যখন নতুন তালিকাটি বিবর্ণ এবং স্কেল করা হবে। চমৎকার!

f61dfd58ea7bd3fd.gif

8. ইমেল ঠিকানা চিপ থেকে কার্ড ভিউতে কনটেইনার ট্রান্সফর্ম ট্রানজিশন যোগ করুন

এই ধাপে, আপনি একটি পরিবর্তন যোগ করবেন যা একটি চিপকে একটি পপআপ কার্ডে রূপান্তরিত করবে। একটি কন্টেইনার ট্রান্সফর্ম ব্যবহার করা হয়েছে ব্যবহারকারীকে জানাতে সাহায্য করার জন্য যে পপআপে গৃহীত পদক্ষেপ চিপটিকে প্রভাবিত করবে যেখান থেকে পপআপের উৎপত্তি হয়েছে।

কোনো কোড যোগ করার আগে, রিপ্লাই অ্যাপ চালান, একটি ইমেলে ক্লিক করুন, "উত্তর" FAB-এ ক্লিক করুন এবং তারপর প্রাপকের কন্টাক্ট চিপে ক্লিক করার চেষ্টা করুন। চিপটি অবিলম্বে অদৃশ্য হওয়া উচিত এবং সেই পরিচিতির জন্য ইমেল ঠিকানা সহ একটি কার্ড কোনও অ্যানিমেশন ছাড়াই দেখতে হবে৷

6200c682da2382d5.gif

আপনি এই ধাপের জন্য ComposeFragment এ কাজ করবেন। ইতিমধ্যেই ComposeFragment লেআউটে যোগ করা হয়েছে প্রাপক চিপ (ডিফল্টরূপে দৃশ্যমান) এবং একটি প্রাপক কার্ড (ডিফল্টরূপে অদৃশ্য)। একটি প্রাপক চিপ এবং এই কার্ডটি হল দুটি ভিউ যার মধ্যে আপনি একটি ধারক রূপান্তর তৈরি করবেন।

শুরু করতে, ComposeFragment খুলুন এবং expandChip পদ্ধতিটি খুঁজুন। প্রদত্ত chip ক্লিক করা হলে এই পদ্ধতি বলা হয়। লাইনের উপরে নিম্নলিখিত কোড স্নিপেট যোগ করুন যা recipientCardView এবং chip দৃশ্যমানতা অদলবদল করে, যা beginDelayedTransition এর মাধ্যমে নিবন্ধিত কন্টেইনার রূপান্তরকে ট্রিগার করবে।

ComposeFragment.kt

val transform = MaterialContainerTransform().apply {
   startView = chip
   endView = binding.recipientCardView
   scrimColor = Color.TRANSPARENT
   endElevation = requireContext().resources.getDimension(
       R.dimen.email_recipient_card_popup_elevation_compat
   )
   addTarget(binding.recipientCardView)
}

TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)

আপনি এখন অ্যাপটি চালালে, চিপটি প্রাপকের জন্য ইমেল ঠিকানাগুলির একটি কার্ডে রূপান্তরিত হবে। এর পরে, কার্ডটিকে চিপে আবার ভেঙে ফেলার জন্য রিটার্ন ট্রানজিশন কনফিগার করি।

ComposeFragment এ collapseChip পদ্ধতিতে, কার্ডটিকে আবার চিপে ভেঙে ফেলার জন্য নিচের কোড স্নিপেট যোগ করুন।

ComposeFragment.kt

val transform = MaterialContainerTransform().apply {
   startView = binding.recipientCardView
   endView = chip
   scrimColor = Color.TRANSPARENT
   startElevation = requireContext().resources.getDimension(
       R.dimen.email_recipient_card_popup_elevation_compat
   )
   addTarget(chip)
}

TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)

অ্যাপটি আবার চালান। চিপে ক্লিক করলে চিপটিকে একটি কার্ডে প্রসারিত করা উচিত যখন কার্ডটি ক্লিক করার সময় কার্ডটি চিপে ফিরে আসবে। চমৎকার!

e823b28e2890e05d.gif

9. সব সম্পন্ন

Kotlin কোডের 100 টিরও কম লাইন এবং কিছু মৌলিক XML মার্কআপ ব্যবহার করে, MDC-Android লাইব্রেরি আপনাকে একটি বিদ্যমান অ্যাপে সুন্দর রূপান্তর তৈরি করতে সাহায্য করেছে যা মেটেরিয়াল ডিজাইন নির্দেশিকাগুলির সাথে সামঞ্জস্যপূর্ণ, এবং সমস্ত Android ডিভাইস জুড়ে ধারাবাহিকভাবে দেখায় এবং আচরণ করে৷

454a47ba96017a25.gif

পরবর্তী পদক্ষেপ

ম্যাটেরিয়াল মোশন সিস্টেম সম্পর্কে আরও তথ্যের জন্য, বিশেষত্ব এবং সম্পূর্ণ বিকাশকারী ডকুমেন্টেশন পরীক্ষা করে দেখতে ভুলবেন না এবং আপনার অ্যাপে কিছু উপাদান ট্রানজিশন যোগ করার চেষ্টা করুন!

উপাদান গতি চেষ্টা করার জন্য ধন্যবাদ. আমরা আশা করি আপনি এই কোডল্যাব উপভোগ করেছেন!

আমি যুক্তিসঙ্গত সময় এবং প্রচেষ্টার সাথে এই কোডল্যাবটি সম্পূর্ণ করতে সক্ষম হয়েছি

দৃঢ়ভাবে একমত একমত নিরপেক্ষ অসম্মতি দৃঢ়ভাবে অসম্মতি

আমি ভবিষ্যতে মেটেরিয়াল মোশন সিস্টেম ব্যবহার চালিয়ে যেতে চাই

দৃঢ়ভাবে একমত একমত নিরপেক্ষ অসম্মতি দৃঢ়ভাবে অসম্মতি