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

1. परिचय

Material Design, डिजिटल प्रॉडक्ट को बेहतर और खूबसूरत बनाने का एक सिस्टम है. स्टाइल, ब्रैंडिंग, इंटरैक्शन, और मोशन को सिद्धांतों और कॉम्पोनेंट के एक जैसे सेट के तहत लाकर, प्रॉडक्ट टीमें डिज़ाइन की अपनी पूरी क्षमता का इस्तेमाल कर सकती हैं.

logo_components_color_2x_web_96dp.png

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

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

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

Material डिज़ाइन के चार मुख्य ट्रांज़िशन पैटर्न यहां दिए गए हैं:

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

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

AndroidX

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

फ़्रेमवर्क

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

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

आपको क्या बनाने को मिलेगा

इस कोडलैब में, Kotlin का इस्तेमाल करके Reply नाम के Android ईमेल ऐप्लिकेशन में कुछ ट्रांज़िशन बनाने के बारे में बताया गया है. इससे यह दिखाया जा सकेगा कि MDC-Android लाइब्रेरी से ट्रांज़िशन का इस्तेमाल करके, अपने ऐप्लिकेशन के लुक और फ़ील को कैसे पसंद के मुताबिक बनाया जा सकता है.

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

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

अनुरोध किए गए iframe (youtu.be) के डोमेन को अनुमति नहीं दी गई है.

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

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

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

शुरुआती सामान्य एडवांस

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

Android Studio शुरू करना

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

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

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

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

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

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

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

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

e3f200327a67a53.png

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

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

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

cc73eb0d0f779035.png

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

इस कोडलैब में, तेज़ी से होने वाले ट्रांज़िशन शामिल हैं. इसलिए, ट्रांज़िशन की कुछ बारीकियों को समझने के लिए, डिवाइस के ऐनिमेशन की स्पीड को कम किया जा सकता है. इसके लिए, 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. "विंडो ऐनिमेशन स्केल" स्विच पर क्लिक करें

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

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

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

  • HomeFragment: यह ईमेल की सूची दिखाता है
  • EmailFragment: यह एक पूरा ईमेल दिखाता है
  • ComposeFragment: इसकी मदद से नया ईमेल लिखा जा सकता है
  • SearchFragment: यह एक सर्च व्यू दिखाता है

सबसे पहले, ऐप्लिकेशन का नेविगेशन ग्राफ़ सेट अप करने का तरीका जानने के लिए, 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>

ध्यान दें कि ऊपर बताए गए सभी फ़्रैगमेंट मौजूद हैं. साथ ही, डिफ़ॉल्ट लॉन्च फ़्रैगमेंट को HomeFragment via app:startDestination="@id/homeFragment" पर सेट किया गया है. फ़्रैगमेंट डेस्टिनेशन ग्राफ़ की यह एक्सएमएल परिभाषा, साथ ही कार्रवाइयां, जनरेट किए गए 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

आखिर में, नेविगेशन ऐक्शन के इस्तेमाल का उदाहरण देखने के लिए, 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 ऐप्लिकेशन चलाकर देखें. इसके बाद, किसी ईमेल पर क्लिक करें. इसमें एक सामान्य जंप-कट होना चाहिए. इसका मतलब है कि स्क्रीन को बिना किसी ट्रांज़िशन के बदल दिया जाता है:

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

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

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

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

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

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

नीचे दिए गए स्निपेट को MainActivity में navigateToCompose वाले तरीके में कॉपी करें. ऐसा 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()
   }
}

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

81b68391ac4b0a9.gif

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

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

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

499e1a677b4216bb.gif

शुरू करने के लिए, MainActivity में navigateToSearch तरीका ढूंढें. इसके बाद, मौजूदा फ़्रैगमेंट के एक्ज़िट और रीएंटर MaterialSharedAxis Z-ऐक्सिस ट्रांज़िशन सेट अप करने के लिए, 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 में, फ़्रैगमेंट के enterTransition को MaterialFadeThrough के नए इंस्टेंस पर सेट करें.

HomeFragment.kt

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

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

f61dfd58ea7bd3fd.gif

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

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

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

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. सब हो गया

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

454a47ba96017a25.gif

अगले चरण

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

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

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

पूरी तरह सहमत सहमत न तो सहमत और न ही असहमत असहमत पूरी तरह असहमत

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

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