Android के लिए मटीरियल मोशन की मदद से, खूबसूरत ट्रांज़िशन बनाना

1. परिचय

मटीरियल डिज़ाइन एक ऐसा सिस्टम है जो अच्छे और आकर्षक डिजिटल प्रॉडक्ट बनाता है. सिद्धांतों और कॉम्पोनेंट के एक जैसे सेट के तहत स्टाइल, ब्रैंडिंग, इंटरैक्शन, और मोशन की सुविधा इस्तेमाल करके, प्रॉडक्ट टीम अपने डिज़ाइन की क्षमता को पहचान सकती हैं.

मटीरियल कॉम्पोनेंट (एमडीसी), मटीरियल डिज़ाइन लागू करने में डेवलपर की मदद करते हैं. Google के इंजीनियरों और UX डिज़ाइनर की टीम ने बनाया है. एमडीसी में दर्जनों खूबसूरत और काम करने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट हैं. यह Android, iOS, वेब, और Flutter.material.io/प्रॉडक्ट के लिए उपलब्ध है

Android के लिए Material का मोशन सिस्टम क्या है?

Android के लिए मटीरियल मोशन सिस्टम, MDC-Android लाइब्रेरी में ट्रांज़िशन पैटर्न का एक सेट है. इससे उपयोगकर्ताओं को किसी ऐप्लिकेशन को समझने और नेविगेट करने में मदद मिलती है. इस बारे में मटीरियल डिज़ाइन के दिशा-निर्देशों में बताया गया है.

Material के चार मुख्य ट्रांज़िशन पैटर्न इस तरह हैं:

• कंटेनर ट्रांसफ़ॉर्म: यह पैटर्न, उन यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बीच ट्रांज़िशन करता है जिनमें कंटेनर शामिल होता है. साथ ही, यह एक एलिमेंट को दूसरे में आसानी से बदलकर, दो अलग-अलग यूआई एलिमेंट के बीच दिखने वाला कनेक्शन बनाता है.
• शेयर किया गया ऐक्सिस: यह उन यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बीच ट्रांज़िशन के लिए इस्तेमाल किया जाता है जो दूरी या नेविगेशन के संदर्भ में एक-दूसरे से जुड़े होते हैं. यह एलिमेंट के बीच के संबंध को बेहतर बनाने के लिए, ऐक्स, वाई या ज़ेड ऐक्सिस के बीच शेयर होने वाले बदलाव के हिसाब से काम करता है.
• फ़ेड थ्रू: यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बीच ऐसे ट्रांज़िशन जिनका एक-दूसरे से बेहतर संबंध नहीं है. यह, मिलने वाले एलिमेंट के स्केल पर, क्रम में फ़ेड आउट और फ़ेड इन का इस्तेमाल करता है.
• फ़ेड: इसका इस्तेमाल उन यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए किया जाता है जो स्क्रीन की सीमाओं के अंदर ही दिखते हैं और फिर गायब हो जाते हैं.

एमडीसी-Android लाइब्रेरी इन पैटर्न के लिए ट्रांज़िशन क्लास की सुविधा देती है. इन्हें AndroidX ट्रांज़िशन लाइब्रेरी (androidx.transition) और Android ट्रांज़िशन फ़्रेमवर्क (android.transition), दोनों के ऊपर बनाया गया है:

AndroidX

• com.google.android.material.transition पैकेज में उपलब्ध है
• एपीआई लेवल 14 और उसके बाद के वर्शन के साथ काम करता है
• यह फ़्रैगमेंट और व्यू के साथ काम करता है, लेकिन ऐक्टिविटी या विंडो के साथ नहीं
• इसमें, बैकपोर्ट की गई गड़बड़ियों को ठीक किया गया है. साथ ही, यह सभी एपीआई लेवल पर एक जैसा काम करता है

फ़्रेमवर्क

• com.google.android.material.transition.platform पैकेज में उपलब्ध है
• एपीआई लेवल 21 और उसके बाद के वर्शन के साथ काम करता है
• फ़्रैगमेंट, व्यू, गतिविधियों, और विंडो के साथ काम करता है
• गड़बड़ियां ठीक की गईं

इस कोडलैब में, आपको AndroidX लाइब्रेरी पर बनाए गए मटीरियल ट्रांज़िशन का इस्तेमाल करना होगा. इसका मतलब है कि आपको मुख्य रूप से फ़्रैगमेंट और व्यू पर ध्यान देना होगा.

आपको क्या बनाना होगा

यह कोडलैब आपको उदाहरण के तौर पर जवाब नाम के Android ईमेल ऐप्लिकेशन में कुछ ट्रांज़िशन करने में मदद करेगा, ताकि आप यह दिखा सकें कि अपने ऐप्लिकेशन के लुक और स्टाइल को पसंद के मुताबिक बनाने के लिए, एमडीसी-Android लाइब्रेरी से ट्रांज़िशन का इस्तेमाल कैसे किया जा सकता है.

आपको Reply ऐप्लिकेशन का स्टार्टर कोड दिया जाएगा. साथ ही, आपको ऐप्लिकेशन में ये Material ट्रांज़िशन शामिल करने होंगे. इन्हें पूरा किए गए कोडलैब के GIF में देखा जा सकता है:

• कंटेनर ट्रांसफ़ॉर्म का इस्तेमाल, ईमेल सूची से ईमेल की ज़्यादा जानकारी वाले पेज पर किया जाता है
• ईमेल पेज लिखने के लिए, एफ़एबी से कंटेनर ट्रांसफ़ॉर्म का ट्रांज़िशन
• शेयर किया गया Z-ऐक्सिस का खोज आइकॉन से खोज व्यू पेज पर ट्रांज़िशन
• मेलबॉक्स के पेजों के बीच फ़ेड थ्रू ट्रांज़िशन
• ईमेल पते के चिप से कार्ड व्यू पर कंटेनर ट्रांसफ़ॉर्म ट्रांज़िशन

इस कोडलैब में, आप MDC-Android मोशन सिस्टम से मिले ट्रांज़िशन का इस्तेमाल करेंगे. एमडीसी-Android थीमिंग और कॉम्पोनेंट सिस्टम के बारे में ज़्यादा जानने के लिए, शुरुआती निर्देश देखें.

आपको इन चीज़ों की ज़रूरत होगी

• Android डेवलपमेंट और Kotlin की बुनियादी जानकारी
• Android Studio (अगर आपके पास यह पहले से नहीं है, तो इसे यहां डाउनलोड करें)
• Android Emulator या डिवाइस (Android Studio में उपलब्ध)
• सैंपल कोड (अगला चरण देखें)

Android ऐप्लिकेशन बनाने के अपने अनुभव को आप कितनी रेटिंग देंगे?

शुरुआती इंटरमीडिएट विशेषज्ञ

2. डेवलपमेंट एनवायरमेंट सेट अप करना

Android Studio को शुरू करना

Android Studio खोलने पर, आपको "Android Studio में आपका स्वागत है" टाइटल वाली विंडो दिखेगी. हालांकि, अगर Android Studio को पहली बार लॉन्च किया जा रहा है, तो डिफ़ॉल्ट वैल्यू के साथ Android Studio का सेटअप विज़र्ड के चरणों को पूरा करें. ज़रूरी फ़ाइलों को डाउनलोड और इंस्टॉल करने में, इस चरण में कुछ मिनट लग सकते हैं. इसलिए, अगले सेक्शन पर जाने के दौरान, इसे बैकग्राउंड में चलने दें.

पहला विकल्प: GitHub से स्टार्टर कोडलैब ऐप्लिकेशन को क्लोन करना

GitHub से इस कोडलैब का क्लोन बनाने के लिए, ये कमांड चलाएं:

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

ज़्यादा मदद पाने के लिए: GitHub से डेटा स्टोर करने की जगह को क्लोन करना

विकल्प 2: स्टार्टर कोडलैब ऐप्लिकेशन की ज़िप फ़ाइल डाउनलोड करें

स्टार्टर ऐप्लिकेशन डाउनलोड करें

स्टार्टर ऐप्लिकेशन, material-components-android-motion-codelab-develop डायरेक्ट्री में मौजूद होता है.

Android Studio में स्टार्टर कोड लोड करना

1. सेटअप विज़र्ड पूरा होने और Android Studio में आपका स्वागत है विंडो दिखने के बाद, Android Studio का कोई मौजूदा प्रोजेक्ट खोलें पर क्लिक करें.

2. प्रोजेक्ट खोलने के लिए, उस डायरेक्ट्री पर जाएं जिसमें आपने सैंपल कोड इंस्टॉल किया था. इसके बाद, सैंपल डायरेक्ट्री चुनें.
3. प्रोजेक्ट को बनाने और सिंक करने के लिए, Android Studio को कुछ समय इंतज़ार करें. इस प्रोजेक्ट को Android Studio की विंडो में सबसे नीचे, गतिविधि की जानकारी देने वाले इंडिकेटर में दिखाया गया है.

अगर Android Studio आपसे प्रोजेक्ट के 'Android Gradle प्लग इन' वर्शन को अपडेट करने का अनुरोध करता है, तो आपको इस प्रॉम्प्ट को अनदेखा करना होगा. ऐसा इसलिए, क्योंकि हो सकता है कि प्रोजेक्ट को Gradle के सबसे नए वर्शन पर टेस्ट न किया गया हो. साथ ही, अपडेट करने पर क्रैश या कंपाइलेशन से जुड़ी अन्य समस्याएं हो सकती हैं.

4. इस दौरान, Android Studio में कुछ बिल्ड गड़बड़ियां दिख सकती हैं. ऐसा इसलिए होता है, क्योंकि आपके पास Android SDK या बिल्ड टूल नहीं हैं. जैसे, यहां दिखाया गया टूल. इन्हें इंस्टॉल/अपडेट करने और अपने प्रोजेक्ट को सिंक करने के लिए, Android Studio में दिए गए निर्देशों का पालन करें. अगर आपको अब भी समस्याएं आ रही हैं, तो SDK Manager की मदद से अपने टूल अपडेट करने के बारे में बताने वाली गाइड देखें.

प्रोजेक्ट की डिपेंडेंसी की पुष्टि करना

प्रोजेक्ट को MDC-Android लाइब्रेरी पर डिपेंड करना होगा. आपने जो सैंपल कोड डाउनलोड किया है उसमें यह डिपेंडेंसी पहले से मौजूद होनी चाहिए. हालांकि, इसकी पुष्टि करने के लिए कॉन्फ़िगरेशन पर एक नज़र डालें.

app मॉड्यूल की build.gradle फ़ाइल पर जाएं और पक्का करें कि dependencies ब्लॉक में MDC-Android पर डिपेंडेंसी शामिल हो:

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

स्टार्टर ऐप्लिकेशन चलाना

1. पक्का करें कि डिवाइस विकल्प के बाईं ओर बिल्ड कॉन्फ़िगरेशन app है.
2. ऐप्लिकेशन बनाने और चलाने के लिए हरे रंग का Run / Play बटन दबाएं.

3. अगर आपके डिवाइसों की सूची में पहले से ही कोई Android डिवाइस मौजूद है, तो डिप्लॉयमेंट टारगेट चुनें विंडो में जाकर, आठवें चरण पर जाएं. अगर ऐसा नहीं है, तो नया वर्चुअल डिवाइस बनाएं पर क्लिक करें.
4. हार्डवेयर चुनें स्क्रीन पर, कोई फ़ोन डिवाइस चुनें. जैसे, Pixel 3. इसके बाद, आगे बढ़ें पर क्लिक करें.
5. सिस्टम इमेज स्क्रीन पर, Android का सबसे नया वर्शन चुनें. हमारा सुझाव है कि एपीआई लेवल का सबसे नया वर्शन चुनें. अगर उसे इंस्टॉल नहीं किया गया है, तो दिखने वाले डाउनलोड करें लिंक पर क्लिक करें और डाउनलोड पूरा करें.
6. आगे बढ़ें पर क्लिक करें.
7. Android वर्चुअल डिवाइस (AVD) स्क्रीन पर, सेटिंग में कोई बदलाव न करें और पूरा करें पर क्लिक करें.
8. डिप्लॉयमेंट टारगेट डायलॉग से कोई Android डिवाइस चुनें.
9. ठीक है पर क्लिक करें.
10. Android Studio, ऐप्लिकेशन बनाता है, उसे डिप्लॉय करता है, और टारगेट किए गए डिवाइस पर अपने-आप खोलता है.

अगर बनाते समय आपको INSTALL_FAILED_INVALID_APK गड़बड़ी मिलती है, तो Android Studio में 'बिल्ड' -> 'प्रोजेक्ट साफ़ करें' बनाकर देखें.

अगर आपने डिपेंडेंसी नहीं जोड़ी या ऐप्लिकेशन को सही से नहीं चलाया, तो अपने डेवलपर एनवायरमेंट को बंद करें और उसमें आ रही समस्या हल करें. ज़्यादा जानकारी के लिए, ऐप्लिकेशन बनाने और उसे चलाने से जुड़ी Android Studio गाइड देखें.

हो गया! जवाब दें सुविधा के होम पेज के लिए स्टार्टर कोड, आपके एम्युलेटर में चलना चाहिए. आपको इनबॉक्स दिखेगा, जिसमें ईमेल की सूची होगी.

ज़रूरी नहीं: डिवाइस के ऐनिमेशन की स्पीड कम करना

इस कोडलैब में तेज़ और बेहतर ट्रांज़िशन शामिल हैं. इसलिए, ट्रांज़िशन लागू करते समय, डिवाइस के ऐनिमेशन को धीमा करके, ट्रांज़िशन की बेहतर जानकारी देखी जा सकती है. ऐसा adb शेल कमांड या क्विक सेटिंग टाइल की मदद से किया जा सकता है. ध्यान दें कि डिवाइस के ऐनिमेशन को धीमा करने के इन तरीकों से, Reply ऐप्लिकेशन के अलावा डिवाइस पर मौजूद अन्य ऐनिमेशन पर भी असर पड़ेगा.

पहला तरीका: ADB शेल कमांड

डिवाइस के ऐनिमेशन को 10 गुना धीमा करने के लिए, कमांड लाइन से ये कमांड चलाएं:

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

दूसरा तरीका: क्विक सेटिंग टाइल

इसके अलावा, अगर आपने पहले से ऐसा नहीं किया है, तो सबसे पहले अपने डिवाइस पर डेवलपर सेटिंग को चालू करके, क्विक सेटिंग टाइल को सेट अप करें:

1. डिवाइस का "सेटिंग" ऐप्लिकेशन खोलें
2. नीचे की ओर स्क्रोल करके, "एमुलेट किए गए डिवाइस के बारे में जानकारी" पर क्लिक करें
3. नीचे तक स्क्रोल करें और "बिल्ड नंबर" पर तब तक क्लिक करें, जब तक डेवलपर सेटिंग चालू नहीं हो जातीं

इसके बाद, क्विक सेटिंग टाइल चालू करने के लिए, डिवाइस के "सेटिंग" ऐप्लिकेशन में जाकर ये काम करें:

1. स्क्रीन पर सबसे ऊपर मौजूद, खोज आइकॉन या खोज बार पर क्लिक करें
2. खोज फ़ील्ड में "टाइल" टाइप करें
3. "क्विक सेटिंग डेवलपर टाइल" लाइन पर क्लिक करें
4. "विंडो ऐनिमेशन का स्केल" स्विच पर क्लिक करें

आखिर में, पूरे कोडलैब के दौरान, स्क्रीन के सबसे ऊपर से सिस्टम नोटिफ़िकेशन शेड को नीचे की ओर खींचें. इसके बाद, धीमी और सामान्य स्पीड वाले ऐनिमेशन के बीच टॉगल करने के लिए, आइकॉन का इस्तेमाल करें.

क्विक सेटिंग टाइल को सेट अप करने के लिए, ऊपर दिए गए निर्देश शायद थोड़ा अलग हों या डिवाइस और एपीआई लेवल के आधार पर उपलब्ध न हों.

3. ऐप्लिकेशन के सैंपल कोड के बारे में जानकारी

आइए, कोड पर एक नज़र डालते हैं. हमने एक ऐप्लिकेशन उपलब्ध कराया है, जो Jetpack नेविगेशन कॉम्पोनेंट लाइब्रेरी का इस्तेमाल करके, एक ही ऐक्टिविटी, MainActivity में कुछ अलग-अलग फ़्रैगमेंट के बीच नेविगेट करता है:

• HomeFragment: ईमेल की सूची दिखाता है
• EmailFragment: एक पूरा ईमेल दिखाता है
• Composeफ़्रैगमेंट: नया ईमेल लिखने की सुविधा मिलती है
• Searchफ़्रैगमेंट: यह खोज व्यू दिखाता है

इस कोडलैब में इस्तेमाल किए गए मिलते-जुलते कॉन्सेप्ट के बारे में ज़्यादा जानने के लिए, कृपया नीचे दी गई गाइड और एक्सरसाइज़ देखें:

• Android के लिए Material Components का इस्तेमाल शुरू करना
• बेहतर Android 01.1: फ़्रैगमेंट
• Kotlin Android Fundamentals 03.2: नेविगेशन पाथ तय करना
• Kotlin Android Fundamentals 02.4: डेटा-बाइंडिंग की बुनियादी बातें

navigation_graph.xml

सबसे पहले, यह समझने के लिए कि ऐप्लिकेशन का नेविगेशन ग्राफ़ कैसे सेट अप किया जाता है, app -> src -> main -> res -> navigation डायरेक्ट्री में navigation_graph.xml खोलें:

<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 पर सेट होता है. फ़्रैगमेंट डेस्टिनेशन ग्राफ़ की एक्सएमएल डेफ़िनिशन और कार्रवाइयां, जनरेट किए गए उस Kotlin नेविगेशन कोड की जानकारी देती हैं जो ट्रांज़िशन को हुक अप करते समय आपको मिलेगा.

activity_main.xml

इसके बाद, app -> src -> main -> res -> layout डायरेक्ट्री में activity_main.xml के लेआउट पर एक नज़र डालें. आपको 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

आखिर में, इस्तेमाल की जा रही नेविगेशन ऐक्शन का उदाहरण देखने के लिए, app -> src -> main -> java -> com.materialstudies.reply.ui डायरेक्ट्री में MainActivity.kt खोलें. navigateToSearch() फ़ंक्शन ढूंढें, जो कुछ ऐसा दिखेगा:

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

इस इमेज में दिखाया गया है कि कस्टम ट्रांज़िशन के बिना, खोज व्यू पेज पर कैसे जाया जा सकता है. इस कोडलैब के दौरान, आपको Reply के MainActivity और चार मुख्य फ़्रैगमेंट के बारे में ज़्यादा जानकारी मिलेगी. इससे मटीरियल ट्रांज़िशन को सेट अप किया जा सकेगा, जो पूरे ऐप्लिकेशन में नेविगेशन की अलग-अलग कार्रवाइयों के साथ मिलकर काम करेंगे.

अब आपको स्टार्टर कोड के बारे में पता है. अब पहला ट्रांज़िशन लागू करते हैं.

4. ईमेल सूची से ईमेल की ज़्यादा जानकारी वाले पेज पर कंटेनर ट्रांसफ़ॉर्म का ट्रांज़िशन जोड़ें

शुरू करने के लिए, आपको किसी ईमेल पर क्लिक करते समय ट्रांज़िशन जोड़ना होगा. नेविगेशन में इस बदलाव के लिए, कंटेनर ट्रांसफ़ॉर्म पैटर्न का इस्तेमाल करना सबसे सही रहेगा. इस पैटर्न को उन यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बीच ट्रांज़िशन के लिए डिज़ाइन किया गया है जिनमें कंटेनर शामिल होता है. इस पैटर्न से दो यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बीच, दिखने वाला कनेक्शन बनाने में मदद मिलती है.

कोई कोड जोड़ने से पहले, Reply ऐप्लिकेशन चलाकर किसी ईमेल पर क्लिक करें. इसे बस जंप-कट किया जाना चाहिए, जिसका मतलब है कि स्क्रीन को बिना किसी ट्रांज़िशन के बदल दिया गया है:

MDC-Android लाइब्रेरी में कंटेनर ट्रांसफ़ॉर्मेशन को MaterialContainerTransform कहा जाता है. डिफ़ॉल्ट रूप से, यह Transition सबक्लास, शेयर किए गए एलिमेंट ट्रांज़िशन के तौर पर काम करता है. इसका मतलब है कि transitionName के साथ मार्क किए जाने पर, Android ट्रांज़िशन सिस्टम अलग-अलग लेआउट में दो व्यू चुन सकता है.

इस स्निपेट में दिखाए गए तरीके से, email_item_layout.xml के MaterialCardView पर transitionName एट्रिब्यूट जोड़कर शुरुआत करें:

email_item_layout.xml

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

ट्रांज़िशन के नाम में, पैरामीटर के साथ स्ट्रिंग रिसॉर्स होता है. आपको हर ईमेल के आईडी का इस्तेमाल करना होगा, ताकि यह पक्का किया जा सके कि हमारे EmailFragment में मौजूद हर transitionName यूनीक हो.

जवाब देने के लिए, SDK टूल का कम से कम लेवल 24 है. इसका मतलब है कि हम एपीआई लेवल 21 में उपलब्ध कराए गए android:transitionName एट्रिब्यूट का इस्तेमाल सीधे तौर पर कर सकते हैं. अगर आपके ऐप्लिकेशन पर एपीआई लेवल 21 से पहले के लेवल पर सुविधाएं मिलती हैं, तो व्यू के ट्रांज़िशन का नाम सेट करते समय ViewCompat#setTransitionName तरीका इस्तेमाल करें.

अब आपने ईमेल सूची के आइटम का ट्रांज़िशन नाम सेट कर लिया है. अब ईमेल की जानकारी वाले लेआउट में भी ऐसा ही करें. fragment_email.xml में, MaterialCardView के transitionName को इस स्ट्रिंग रिसॉर्स पर सेट करें:

fragment_email.xml

android:transitionName="@string/email_card_detail_transition_name"

"शुरू" व्यू (email_item_layout.xml में MaterialCardView) और "खत्म" व्यू (fragment_email.xml में MaterialCardView) के ट्रांज़िशन के नाम सेट करने से, Android ट्रांज़िशन सिस्टम को उन दो शेयर किए गए एलिमेंट व्यू के बारे में जानकारी मिलेगी जो इस ट्रांज़िशन में शामिल हैं.

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)

ऊपर दिए गए स्निपेट का मुख्य हिस्सा FragmentNavigatorExtras है. Android ट्रांज़िशन सिस्टम को पहले पैरामीटर (cardView) पर सेट किया गया ट्रांज़िशन नाम मिलेगा. इसके बाद, वह ट्रांज़िशन नाम और दूसरे पैरामीटर (emailCardDetailTransitionName) के तौर पर पास की गई ट्रांज़िशन नाम स्ट्रिंग के बीच मैपिंग करेगा. इससे सिस्टम को पता चलता है कि MaterialContainerTransform इंस्टेंस को "start" और "end" व्यू के बीच में बदलाव करने के लिए, कौनसे व्यू ढूंढना और उपलब्ध कराना है.

अब प्लंबिंग कॉन्फ़िगर हो जाने के बाद, आपके पास कंटेनर ट्रांसफ़ॉर्म बनाने का विकल्प है. EmailFragment onCreate तरीके में, यह स्निपेट जोड़कर sharedElementEnterTransition को MaterialContainerTransform के नए इंस्टेंस पर सेट करें (com.google.android.material.transition.platform वर्शन के बजाय com.google.android.material.transition वर्शन इंपोर्ट करना):

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

यहां कुछ ऐसी बातें हो रही हैं जिन पर ध्यान देने की ज़रूरत है:

• आसानी के लिए, sharedElementReturnTransition के उलट, सिर्फ़ sharedElementEnterTransition को सेट किया जा रहा है. डिफ़ॉल्ट रूप से, अगर वापस जाएं और वापस नेविगेट करने के लिए कोई ट्रांज़िशन सेट नहीं किया गया है, तो Android ट्रांज़िशन सिस्टम, ट्रांज़िशन की प्रोसेस को अपने-आप रिवर्स कर देगा.
• drawingViewId यह कंट्रोल करता है कि व्यू हैरारकी में ऐनिमेशन कंटेनर कहां रखा जाएगा. इससे, यूज़र इंटरफ़ेस (यूआई) में अन्य एलिमेंट के नीचे या ऊपर ट्रांज़िशन दिखाया जा सकता है. जवाब के मामले में, कंटेनर ट्रांसफ़ॉर्मेशन को फ़्रैगमेंट कंटेनर के उसी लेवल पर चलाया जा रहा है, ताकि यह पक्का किया जा सके कि इसे बॉटम ऐप्लिकेशन बार और फ़्लोटिंग ऐक्शन बटन के नीचे ड्रॉ किया गया है.
• scrimColor, MaterialContainerTransform पर मौजूद एक प्रॉपर्टी है, जो ऐनिमेशन वाले कंटेनर के पीछे बनाए गए पारदर्शी शेड के रंग को कंट्रोल करती है. डिफ़ॉल्ट रूप से, यह 32% काला पर सेट होता है. यहां इसे ट्रांसपैरंट पर सेट किया गया है. इसका मतलब है कि कोई स्क्रिम नहीं बनाया जाएगा. इसकी वजह यह है कि बाद के चरण में आपको ईमेल की सूची में एक एग्ज़िट ट्रांज़िशन जोड़ना होगा. यह ट्रांज़िशन, कंटेनर ट्रांसफ़ॉर्म के साथ अच्छी तरह से जुड़ा होगा.
• आखिर में, हमने कंटेनर के रंगों को MaterialContainerTransform से colorSurface पर सेट किया. जब MaterialContainerTransform दो व्यू के बीच ऐनिमेशन करता है, तो कैनवस पर तीन "कंटेनर" बनाए जाते हैं: 1) बैकग्राउंड कंटेनर 2) शुरुआती व्यू के लिए कंटेनर, और 3) आखिरी व्यू के लिए कंटेनर. इन तीनों कंटेनर को कोई भी रंग दिया जा सकता है. ये डिफ़ॉल्ट रूप से पारदर्शी होते हैं. बैकग्राउंड में भरने के लिए ये रंग सेट करना तब मददगार हो सकता है, जब आपका शुरुआती या आखिरी व्यू खुद बैकग्राउंड न बनाए. इसकी वजह से, ऐनिमेशन के दौरान उसके नीचे अन्य एलिमेंट दिखते हैं. इस उदाहरण में सभी कंटेनर को colorSurface पर सेट किया जाना चाहिए. इसलिए, हम setAllContainerColors हेल्पर तरीके का इस्तेमाल करके यह पक्का कर सकते हैं कि हमें विज़ुअल से जुड़ी कोई समस्या न हो.

अब ऐप्लिकेशन को फिर से चलाने की कोशिश करें.

चीज़ें ठीक से दिखने लगी हैं! ईमेल सूची में किसी ईमेल पर क्लिक करने पर, कंटेनर ट्रांसफ़ॉर्म की मदद से सूची के आइटम को फ़ुल स्क्रीन पर जानकारी वाले पेज में बड़ा किया जाना चाहिए. हालांकि, ध्यान दें कि 'वापस जाएं' बटन दबाने पर, ईमेल को सूची में वापस नहीं ले जाया जाता. इसके अलावा, ट्रांज़िशन की शुरुआत में ही ईमेल सूची गायब हो जाती है और विंडो का बैकग्राउंड स्लेटी रंग का दिखता है. फ़िलहाल, हमारा काम पूरा नहीं हुआ है.

आम तौर पर, कॉलप होने की यह पहली समस्या तब होती है, जब Android ट्रांज़िशन सिस्टम आपके रिटर्न ट्रांज़िशन को चलाने की कोशिश कर रहा हो. इस दौरान, ईमेल की सूची को RecyclerView में अभी तक शामिल नहीं किया गया है और न ही उसमें ईमेल जोड़े गए हैं. ट्रांज़िशन शुरू करने से पहले, हमें HomeFragment की सूची तैयार होने का इंतज़ार करने का तरीका चाहिए.

Android ट्रांज़िशन सिस्टम, postponeEnterTransition और startPostponedEnterTransition के ज़रिए ऐसा करने के तरीके उपलब्ध कराता है. अगर postponeEnterTransition को कॉल किया जाता है, तो कोई भी ट्रांज़िशन तब तक नहीं चलेगा, जब तक startPostponedEnterTransition को कॉल करके ट्रांज़िशन को बंद नहीं किया जाता. इससे हमें ट्रांज़िशन को तब तक "शेड्यूल" करने का मौका मिलता है, जब तक RecyclerView में ईमेल से जानकारी अपने-आप नहीं भर जाती और ट्रांज़िशन, आपकी कॉन्फ़िगर की गई मैपिंग को ढूंढ नहीं लेता.

आइटम लौटाने का ट्रांज़िशन ठीक करने के लिए, HomeFragment.kt में onViewCreated तरीके की इन दो पंक्तियों को जोड़ें:

HomeFragment.kt

postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }

ऐप्लिकेशन को फिर से चलाकर देखें. किसी ईमेल को खोलने के बाद, 'वापस जाएं' बटन दबाने पर, ईमेल फिर से सूची में दिखने लगेगा. बढ़िया! चलिए, ऐनिमेशन को बेहतर बनाते रहें.

ईमेल सूची के गायब होने की समस्या इसलिए होती है, क्योंकि नेविगेशन कॉम्पोनेंट का इस्तेमाल करके किसी नए फ़्रैगमेंट पर जाने पर, मौजूदा फ़्रैगमेंट तुरंत हट जाता है और उसे नए फ़्रैगमेंट से बदल दिया जाता है. ईमेल सूची को बदलने के बाद भी दिखने के लिए, HomeFragment में एक एक्सिट ट्रांज़िशन जोड़ा जा सकता है.

MDC-Android, आपके लिए ऐसा करने के लिए दो ट्रांज़िशन उपलब्ध कराता है - Hold और MaterialElevationScale. Hold ट्रांज़िशन, टारगेट को सिर्फ़ अपनी मौजूदा पोज़िशन पर रखता है, जबकि MaterialElevationScale बहुत छोटे-छोटे स्केल से ऐनिमेशन चलाता है.

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

जब मौजूदा फ़्रैगमेंट, पिछली गतिविधियों से पॉप-अप होता है, तब फ़्रैगमेंट फिर से व्यू में आता है. HomeFragment के लिए, EmailFragment से 'वापस जाएं' बटन दबाने पर ऐसा होता है. यहां, सूची पर वापस जाने पर, ईमेल की सूची थोड़ी बढ़ जाएगी.

इसके बाद, यह पक्का करने के लिए कि MaterialElevationScale ट्रांज़िशन, हैरारकी में मौजूद हर व्यू के बजाय, होम स्क्रीन पर लागू हो, fragment_home.xml में RecyclerView को ट्रांज़िशन ग्रुप के तौर पर मार्क करें.

fragment_home.xml

android:transitionGroup="true"

जवाब में SDK टूल का लेवल कम से कम 24 होना चाहिए. इसका मतलब है कि हम एपीआई लेवल 21 में उपलब्ध कराए गए android:transitionGroup एट्रिब्यूट का इस्तेमाल सीधे तौर पर कर सकते हैं. अगर आपका ऐप्लिकेशन, एपीआई लेवल 21 से नीचे के लेवल पर काम करता है, तो अपने व्यू के ट्रांज़िशन ग्रुप को सेट करते समय ViewGroupCompat#setTransitionGroup तरीके का इस्तेमाल करें.

इस चरण में, आपके कंटेनर का ट्रांसफ़ॉर्म पूरी तरह से काम करने वाला होना चाहिए. किसी ईमेल पर क्लिक करने से, सूची का आइटम ज़्यादा जानकारी वाली स्क्रीन पर बड़ा हो जाता है. साथ ही, ईमेल की सूची छोटी हो जाती है. 'वापस जाएं' बटन दबाने से ईमेल की जानकारी वाली स्क्रीन फिर से सूची में मौजूद हो जाती है, जबकि ईमेल की सूची बड़ी हो जाती है.

5. ईमेल पेज लिखने के लिए, एफ़एबी से कंटेनर ट्रांसफ़ॉर्म का ट्रांज़िशन जोड़ें

कंटेनर ट्रांसफ़ॉर्म की प्रोसेस जारी रखें और फ़्लोटिंग ऐक्शन बटन से ComposeFragment में ट्रांज़िशन जोड़ें. ऐसा करते हुए, एफ़एबी को उपयोगकर्ता के लिखे जाने वाले नए ईमेल में बड़ा करते हैं. सबसे पहले, ऐप्लिकेशन को फिर से चलाएं और एफ़एबी पर क्लिक करके देखें कि ईमेल लिखने वाली स्क्रीन को लॉन्च करते समय कोई ट्रांज़िशन नहीं हो रहा.

ऊपर दिया गया जंप-कट देखने के लिए, पक्का करें कि आपने ऐप्लिकेशन को नए सिरे से लॉन्च करने के बाद, ईमेल सूची देखते समय फ़्लोटिंग ऐक्शन बटन पर क्लिक किया हो. अगर आपने ऐप्लिकेशन के मौजूदा रन के दौरान पहले कोई ईमेल खोला है, तो हो सकता है कि आपको स्टैल किए गए एक्सिट या फिर से एंटर करने वाले ट्रांज़िशन की वजह से, ट्रांज़िशन का कुछ हिस्सा दिखे. ऐसा खास तौर पर तब होता है, जब ऐप्लिकेशन को चलाने के लिए Android Studio के हॉट रीलोड का इस्तेमाल किया जा रहा हो. कोडलैब के सभी फ़्लो पूरे हो जाने के बाद भी कोई समस्या नहीं होगी.

हम एक ही ट्रांज़िशन क्लास का इस्तेमाल करते हैं. हालांकि, इस इंस्टेंस को कॉन्फ़िगर करने का तरीका अलग होगा, क्योंकि हमारा एफ़एबी 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 को यहां मैन्युअल तरीके से सेट किया जा रहा है. 'Android ट्रांज़िशन सिस्टम' को यह बताने के लिए कि किन व्यू को बदलना है, transitionName एट्रिब्यूट का इस्तेमाल करने के बजाय, ज़रूरत पड़ने पर इन्हें मैन्युअल तौर पर तय किया जा सकता है.

अब, ऐप्लिकेशन को फिर से चलाएं. आपको फ़्लोटिंग ऐक्शन बटन, लिखने की स्क्रीन में बदला हुआ दिखेगा. इस चरण के आखिर में GIF देखें.

पिछले चरण की तरह ही, आपको HomeFragment में एक ट्रांज़िशन जोड़ना होगा, ताकि इसे हटाए जाने और ComposeFragment से बदलने के बाद वह गायब न हो सके.

नीचे दिए गए स्निपेट को navigateToCompose तरीके में कॉपी करें. ऐसा MainActivity में, कॉल NavController navigate से पहले करें.

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

ध्यान दें कि हमारी MaterialElevationScale और MaterialContainerTransform की अवधि एक ही है. इससे यह पक्का होता है कि HomeFragment को उतने ही समय तक होल्ड पर रखा जाए जितना कि कंटेनर ट्रांसफ़ॉर्म को चलने में लगता है. साथ ही, कंटेनर ट्रांसफ़ॉर्म के पूरा होते ही यह गायब हो जाएगा.

इस चरण के लिए बस इतना ही! स्क्रीन कंपोज़ करने के लिए, आपको एफ़एबी से कुछ इस तरह ट्रांज़िशन करना होगा:

6. खोज आइकॉन से खोज व्यू पेज पर शेयर किया गया ज़ेड-ऐक्सिस ट्रांज़िशन जोड़ना

इस चरण में, हम खोज आइकॉन से फ़ुल स्क्रीन खोज व्यू पर ट्रांज़िशन जोड़ेंगे. नेविगेशन के इस बदलाव में कोई स्थायी कंटेनर शामिल नहीं है. इसलिए, हम दो स्क्रीन के बीच के संबंध को बेहतर बनाने के लिए, शेयर किए गए Z-ऐक्सिस ट्रांज़िशन का इस्तेमाल कर सकते हैं. साथ ही, ऐप्लिकेशन के क्रम में एक लेवल ऊपर जाने का संकेत दे सकते हैं.

कोई और कोड जोड़ने से पहले, ऐप्लिकेशन को चलाकर देखें. इसके बाद, स्क्रीन के सबसे नीचे दाएं कोने में मौजूद खोज आइकॉन पर टैप करें. ऐसा करने पर, आपको बिना किसी ट्रांज़िशन के खोज व्यू की स्क्रीन दिखेगी.

शुरू करने के लिए, MainActivity में navigateToSearch तरीका ढूंढें. इसके बाद, मौजूदा फ़्रैगमेंट के एग्ज़िट को सेट अप करने के लिए, NavController navigate तरीके कॉल से पहले यहां दिए गए कोड स्निपेट को जोड़ें और MaterialSharedAxis Z-ऐक्सिस ट्रांज़िशन फिर से डालें.

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 forward बूलियन कन्स्ट्रक्टर पैरामीटर के हिसाब से, ये दोनों फ़्रैगमेंट एक साथ कैसे चलते हैं. जब MainActivity मौजूदा फ़्रैगमेंट बाहर निकल रहा होगा, तब SearchFragment अंदर आ रहा होगा. इसी वजह से, MainActivity के मौजूदा फ़्रैगमेंट में, एग्ज़िट ट्रांज़िशन आगे है और SearchFragment में, ट्रांज़िशन ट्रांज़िशन भी आगे है. इससे यह पक्का होगा कि इन ट्रांज़िशन पेयर के चलने पर, दोनों फ़्रैगमेंट एक ही दिशा में जा रहे हैं.

पीछे की दिशा में, यह क्रम उलट हो जाता है. SearchFragment फ़्रैगमेंट से बाहर निकलने पर, MainActivity का मौजूदा फ़्रैगमेंट दिखने लगेगा. इस वजह से, SearchFragment को बैकवर्ड डायरेक्शन में वापस जाने के लिए कॉन्फ़िगर किया गया है और MainActivity के मौजूदा फ़्रैगमेंट को बैकवर्ड डायरेक्शन में फिर से डालने के लिए कॉन्फ़िगर किया गया है.

आखिर में, यह पक्का करने के लिए कि MaterialSharedAxis ट्रांज़िशन, हैरारकी में मौजूद हर व्यू के बजाय, खोज स्क्रीन पर पूरी तरह से लागू हो, fragment_search.xml में LinearLayout को ट्रांज़िशन ग्रुप के तौर पर मार्क करें.

fragment_search.xml

android:transitionGroup="true"

Reply के लिए, SDK टूल का कम से कम लेवल 24 होना चाहिए. इसका मतलब है कि हम एपीआई लेवल 21 में पेश किए गए android:transitionGroup एट्रिब्यूट का सीधे तौर पर इस्तेमाल कर सकते हैं. अगर आपका ऐप्लिकेशन एपीआई लेवल 21 से पहले के वर्शन पर काम करता है, तो अपने व्यू के ट्रांज़िशन ग्रुप को सेट करते समय, ViewGroupCompat#setTransitionGroup तरीके का इस्तेमाल करें.

हो गया! अब ऐप्लिकेशन को फिर से चलाकर देखें और खोज आइकॉन पर टैप करें. होम और खोज व्यू की स्क्रीन, Z-ऐक्सिस के साथ-साथ एक साथ फीकी और स्केल होनी चाहिए. इससे दोनों स्क्रीन के बीच आसानी से ट्रांज़िशन किया जा सकता है.

7. मेलबॉक्स पेजों के बीच फ़ेड थ्रू ट्रांज़िशन जोड़ना

इस चरण में, हम अलग-अलग मेलबॉक्स के बीच ट्रांज़िशन जोड़ेंगे. हम किसी जगह या क्रम के हिसाब से संबंध पर ज़ोर नहीं देना चाहते. इसलिए, हम ईमेल की सूचियों के बीच आसानी से "स्वाप" करने के लिए, फ़ेड-थ्रू का इस्तेमाल करेंगे.

कोई भी अतिरिक्त कोड जोड़ने से पहले, ऐप्लिकेशन चलाकर देखें. सबसे नीचे ऐप्लिकेशन बार में जवाब दें लोगो पर टैप करें और मेलबॉक्स बदलकर देखें. ईमेल की सूची में कोई बदलाव नहीं होना चाहिए.

शुरू करने के लिए, MainActivity में navigateToHome तरीका ढूंढें. साथ ही, मौजूदा फ़्रैगमेंट के बाहर निकलने के MaterialFadeThrough ट्रांज़िशन को सेट अप करने के लिए, NavController navigate तरीके के कॉल से पहले यह कोड स्निपेट जोड़ें.

MainActivity.kt

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

इसके बाद, HomeFragment खोलें. onCreate में, फ़्रैगमेंट के enterTransition को MaterialFadeThrough के नए इंस्टेंस पर सेट करें.

HomeFragment.kt

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

ऊपर दिया गया सेटअप, मेलबॉक्स के काम करने के तरीके के कारण पिछले चरणों से थोड़ा अलग है. मेलबॉक्स सिर्फ़ एक HomeFragment और एक तर्क होता है जो दिखाता है कि ईमेल की कौनसी सूची दिखानी है. इस बात के अलावा कि हमारे नेविगेशन ग्राफ़ में HomeFragment को singleTop=true पर सेट किया गया है, इसका मतलब है कि आपको हमेशा नए मेलबॉक्स पर आगे जाना होगा. साथ ही, आपको वापस जाने या फिर से एंटर करने वाले ट्रांज़िशन (ट्रांज़िशन, जो किसी फ़्रैगमेंट के पॉप होने पर चलता है) से निपटने की ज़रूरत नहीं है. इस वजह से, आपको सिर्फ़ HomeFragment के एंटर और एग्ज़िट ट्रांज़िशन सेट करने की ज़रूरत है.

यह आर्किटेक्चर के ऐसे उदाहरण का उदाहरण है जिसका असर ट्रांज़िशन को कॉन्फ़िगर करने के तरीके पर पड़ता है. आपको अपने खुद के ऐप्लिकेशन में ट्रांज़िशन जोड़ते समय, इसी तरह की बातों पर ध्यान देना होगा!

ऐप्लिकेशन को फिर से चलाएं. जब नीचे मौजूद नेविगेशन ड्रॉअर खोला जाता है और मेलबॉक्स बदले जाते हैं, तो ईमेल की मौजूदा सूची फीकी हो जाती है और स्केल आउट हो जाती है. वहीं, नई सूची फीकी हो जाती है और स्केल इन हो जाती है. बढ़िया!

8. ईमेल पता चिप से कार्ड व्यू में, कंटेनर ट्रांसफ़ॉर्मेशन का ट्रांज़िशन जोड़ें

इस चरण में, आपको ऐसा ट्रांज़िशन जोड़ना होगा जो चिप को पॉप-अप कार्ड में बदल दे. यहां कंटेनर ट्रांसफ़ॉर्म का इस्तेमाल करके, उपयोगकर्ता को यह जानकारी दी जाती है कि पॉप-अप में की गई कार्रवाई का असर उस चिप पर पड़ेगा जिससे पॉप-अप शुरू हुआ था.

किसी भी कोड को जोड़ने से पहले जवाब देने वाले ऐप्लिकेशन को चलाकर देखें. इसके बाद, ईमेल पर क्लिक करें और "जवाब दें" एफ़एबी पर क्लिक करें. इसके बाद, पाने वाले व्यक्ति की संपर्क चिप पर क्लिक करके देखें. चिप तुरंत हट जाएगा और उस संपर्क के ईमेल पते वाला एक कार्ड, बिना ऐनिमेशन के पॉप-इन होगा.

इस चरण को पूरा करने के लिए, आपको 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)

addTarget को किया गया कॉल, ऊपर दिए गए ट्रांसफ़ॉर्म के कॉन्फ़िगरेशन का एक अहम हिस्सा है. डिफ़ॉल्ट रूप से, TransitionManager उन सभी व्यू के लिए ट्रांज़िशन चलाएगा जो बदल रहे हैं. टारगेट सेट करने से यह पक्का होगा कि कंटेनर ट्रांसफ़ॉर्म सिर्फ़ एक और तय किए गए टारगेट व्यू पर चलता है.

ऐप्लिकेशन को अभी इस्तेमाल करने पर, पाने वाले के लिए चिप, ईमेल पतों का एक कार्ड बन जाना चाहिए. इसके बाद, कार्ड को वापस चिप में ले जाने के लिए, रिटर्न ट्रांज़िशन को कॉन्फ़िगर करें.

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)

ऐप्लिकेशन को फिर से चलाएं. चिप पर क्लिक करने से वह बड़ा हो जाना चाहिए, जबकि कार्ड पर क्लिक करने से कार्ड, चिप में वापस छोटा हो जाएगा. बढ़िया!

9. सब हो गया

Kotlin कोड की 100 से कम लाइनों और कुछ बेसिक एक्सएमएल मार्कअप का इस्तेमाल करके, एमडीसी-Android लाइब्रेरी से आपको ऐसे मौजूदा ऐप्लिकेशन में खूबसूरत ट्रांज़िशन बनाने में मदद मिली है जो मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक है. साथ ही, यह सभी Android डिवाइसों पर एक जैसा दिखता है और काम करता है.

पूरा हो चुका जवाब मटीरियल मोशन सिस्टम ऐप्लिकेशन पूरी तरह से तैयार कोडलैब डाउनलोड करके उपलब्ध है या git: git checkout complete के साथ complete ब्रांच को देख सकता है.

इस कोडलैब के कोड में हुए सभी बदलावों को देखने के लिए, complete ब्रांच की अंतर तुलना पर नज़र डालें.

अगले चरण

Material मोशन सिस्टम के बारे में ज़्यादा जानने के लिए, स्पेसिफ़िकेशन और डेवलपर के लिए पूरा दस्तावेज़ देखना न भूलें. साथ ही, अपने ऐप्लिकेशन में कुछ Material ट्रांज़िशन जोड़कर देखें!

Material Motion को आज़माने के लिए धन्यवाद. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!

मुझे इस कोडलैब को पूरा करने में ज़्यादा समय और मेहनत नहीं लगी

पूरी तरह सहमत सहमत न तो सहमत, न ही असहमत असहमति है पूरी तरह असहमति है

मुझे आने वाले समय में, Material मोशन सिस्टम का इस्तेमाल जारी रखना है

पूरी तरह सहमत सहमत न तो सहमत, न ही असहमत असहमति है पूरी तरह असहमति है