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

1. परिचय

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

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

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

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

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

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

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

AndroidX

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

फ़्रेमवर्क

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

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

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

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

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

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

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

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

• Android डेवलपमेंट और Kotlin के बारे में बुनियादी जानकारी
• Android Studio (अगर आपके पास पहले से 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 ब्लॉक में, एमडीसी-Android पर डिपेंडेंसी शामिल हो:

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

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

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

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

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

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

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

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

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

पहला तरीका: 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

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

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

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

इसके बाद, डिवाइस "सेटिंग" में रहते हुए भी ये काम करें ऐप में क्विक सेटिंग टाइल चालू करने के लिए:

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

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

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

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

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

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

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

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

navigation_graph.xml

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

<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. ईमेल सूची से ईमेल की ज़्यादा जानकारी वाले पेज पर, कंटेनर ट्रांसफ़ॉर्मेशन का ट्रांज़िशन जोड़ें

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

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

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 इंस्टेंस को "शुरू करें" के तौर पर देना है और "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 अपनी सूची तैयार करने तक इंतज़ार करना होगा.

postponeEnterTransition और startPostponedEnterTransition - Android ट्रांज़िशन सिस्टम में इसके लिए कई तरीके उपलब्ध हैं. 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-ऐक्सिस से ट्रांज़िशन को खोज आइकॉन से खोज व्यू पेज पर जोड़ें

इस चरण में, हम खोज आइकॉन से फ़ुल स्क्रीन में खोज व्यू में ट्रांज़िशन जोड़ेंगे. नेविगेशन के इस बदलाव में कोई स्थायी कंटेनर शामिल नहीं है. इसलिए, हम दो स्क्रीन के बीच के संबंध को बेहतर बनाने के लिए, शेयर किए गए 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"

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

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

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

अगले चरण

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

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

मैंने सही समय और मेहनत में इस कोडलैब को पूरा कर लिया

पूरी तरह सहमत सहमत कोई फ़र्क़ नहीं पड़ता असहमत पूरी तरह असहमत

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

पूरी तरह सहमत सहमत कोई फ़र्क़ नहीं पड़ता असहमत पूरी तरह असहमत