आने वाले समय में, पीछे जाने के जेस्चर की सुविधा का इस्तेमाल करने के लिए, अपना ऐप्लिकेशन अपडेट करें

1. परिचय

Android 13 में, हमने ऐसे एपीआई जोड़े हैं जो अनुमान लगाने वाले बैक जेस्चर की सुविधा के लिए ज़रूरी हैं.

इस सुविधा की मदद से, उपयोगकर्ता को बैक जेस्चर का इस्तेमाल करने से पहले ही, उसके नतीजे की झलक दिख जाएगी. इससे उन्हें यह तय करने में मदद मिलेगी कि उन्हें मौजूदा व्यू में रहना है या कार्रवाई पूरी करनी है और होम स्क्रीन, पिछली गतिविधि या WebView में पहले देखे गए पेज पर वापस जाना है. यहां बताया गया है कि यह कैसा दिखेगा:

Android 13 में, अनुमान लगाने वाले बैक जेस्चर को सपोर्ट करने के लिए, विंडो-लेवल का नया OnBackInvokedCallback प्लैटफ़ॉर्म एपीआई जोड़ा गया है. यह एपीआई, KeyEvent.KEYCODE_BACK एपीआई और OnBackPressed का इस्तेमाल करने वाली सभी प्लैटफ़ॉर्म क्लास की जगह लेगा. इन क्लास को बंद किया जाना है. साथ ही, Android 13 के बाद रिलीज़ होने वाले अगले मुख्य Android वर्शन में, इन्हें माइग्रेट करना होगा. ज़्यादा जानकारी के लिए, हमारा दस्तावेज़ देखें.

इस कोडलैब में, हम सर्वे के उस फ़्रैगमेंट को ठीक करने जा रहे हैं जो WebView लागू करता है.

इस कोडलैब का मकसद

इस कोडलैब में, आपको AndroidX ऐप्लिकेशन तैयार करने का तरीका बताया गया है. यह ऐप्लिकेशन, सिस्टम के बैक बटन को इंटरसेप्ट करता है. इसके लिए, इसे WebView के साथ पीछे जाने के लिए अनुमानित जेस्चर की सुविधा के साथ काम करने के लिए माइग्रेट किया जाता है. साथ ही, पहले से पीछे जाने के नेविगेशन मॉडल को लागू करने वाले एपीआई का इस्तेमाल किया जाता है. दूसरे शब्दों में कहें, तो नए ऐनिमेशन को काम करने के लिए, सिस्टम को पहले से यह पता होना चाहिए कि ऐप्लिकेशन, बैक नेविगेशन के जेस्चर (स्पर्श) को इंटरसेप्ट कर रहा है या नहीं.

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

इस कोडलैब में, Sunflower ऐप्लिकेशन में वापस जाने के जेस्चर को मैनेज करने के लिए, AndroidX API लाइब्रेरी का इस्तेमाल किया जाएगा.

आपको क्या सीखने को मिलेगा

• AndroidX के लिए, 'वापस जाएं' बटन दबाने पर होने वाले कॉल को कैसे इंटरसेप्ट करें
• सिस्टम को 'वापस जाएं' इवेंट वापस भेजने का तरीका
• 'वापस जाएं' जेस्चर को मैनेज करने के अन्य विकल्प
• Android 13 और इसके बाद के वर्शन में, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए नया फ़ीचर उपलब्ध कराया जा रहा है. इससे बैक जेस्चर नेविगेशन को ज़्यादा अनुमानित बनाया जा सकेगा

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

• Android Studio
• जेस्चर वाला नेविगेशन की सुविधा चालू किया गया Android डिवाइस
• (ज़रूरी नहीं) Git

2. पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर की सुविधा के लिए प्लान बनाना

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

इस सुविधा को लागू करने के लिए, AndroidX API का इस्तेमाल करें

यह कोडलैब, उन ऐप्लिकेशन के लिए बनाया गया है जो पहले से ही AndroidX का इस्तेमाल करते हैं.

बैक नेविगेशन की सुविधा के लिए, आपको OnBackPressedDispatcher और OnBackPressedCallback लागू करना होगा.

दूसरे विकल्प

इस सुविधा को मैनेज करने के लिए, हमारे पास अन्य विकल्प भी हैं. ये विकल्प, आपके ऐप्लिकेशन की अलग-अलग ज़रूरतों के हिसाब से उपलब्ध हैं:

• AndroidX का इस्तेमाल न करने वाले ऐप्लिकेशन के लिए - अगर आप भी इनमें से एक हैं, तो हम आपकी मदद कर सकते हैं. Android 13 में लॉन्च की जा रही नई OnBackInvokedDispatcher और OnBackInvokedCallback प्लैटफ़ॉर्म क्लास का इस्तेमाल करें. इनकी मदद से, AndroidX की ज़रूरत के बिना ही, ऐप्लिकेशन को पहले से तैयार करने वाले एपीआई का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, दस्तावेज़ देखें.
• ऐसे ऐप्लिकेशन के लिए जो फ़िलहाल माइग्रेट नहीं किए जा सकते - अगर आपका ऐप्लिकेशन इनमें से किसी एक कैटगरी में आता है, तो हम आपकी मदद कर सकते हैं! अगर इस समय AndroidX लाइब्रेरी या प्लैटफ़ॉर्म एपीआई पर माइग्रेट करना संभव नहीं है, तो अनुमानित बैक जेस्चर की सुविधा से ऑप्ट आउट किया जा सकता है. ज़्यादा जानकारी के लिए, दस्तावेज़ देखें.

3. शुरू करने से पहले

Android Studio इंस्टॉल करना

Android Studio और Android 13 SDK इंस्टॉल करें.

डिवाइस पाना

इस कोडलैब का इस्तेमाल करके बनाए गए ऐप्लिकेशन को चलाने के लिए, वर्चुअल या फ़िज़िकल Android डिवाइस का इस्तेमाल किया जा सकता है.

जेस्चर वाला नेविगेशन चालू करना

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

कोड प्राप्त करें

इनमें से किसी एक तरीके से कोड पाएं:

ज़िप फ़ाइल डाउनलोड करें

ज़िप फ़ाइल (शुरुआती) डाउनलोड करें

Git के ज़रिए डाउनलोड करना

अगर आपको Git का इस्तेमाल करके कोड डाउनलोड करना है, तो यह तरीका अपनाएं:

1. Git इंस्टॉल करें.
2. इस अभ्यास के लिए ऐप्लिकेशन पाने के लिए, starter-code या main ब्रांच को क्लोन करें:

टर्मिनल

// Get starter app.
git clone --branch starter-code \
https://github.com/android/codelab-handling-back-navigation.git

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

यहां दिया गया तरीका अपनाएं:

1. Android Studio में ऐप्लिकेशन खोलें और उसे बनाएं.
2. नया वर्चुअल डिवाइस बनाएं और Tiramisu को चुनें. इसके अलावा, एपीआई लेवल 33 या उसके बाद के वर्शन पर काम करने वाले किसी डिवाइस को कनेक्ट किया जा सकता है.
3. Sunflower ऐप्लिकेशन चलाएं.

इसके बाद, आपको एक बेसलाइन सेट अप करनी होगी. साथ ही, Sunflower ऐप्लिकेशन के खराब अनुभव के बारे में जानना होगा.

4. बेसलाइन सेट अप करना

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

डेमो देखें

मुख्य स्क्रीन से शुरू करके, आइए हम आपके ऐप्लिकेशन के मुख्य वर्कफ़्लो पर एक नज़र डालें. इससे हमें WebView की सुविधा के साथ खराब अनुभव की समीक्षा करने में मदद मिलेगी.

1. Sunflower ऐप्लिकेशन की डिफ़ॉल्ट स्क्रीन पर, PLANT LIST पर टैप करें.

2. पौधों के कैटलॉग में, किसी भी पौधे पर टैप करें. (इस उदाहरण के लिए, हम ऐवकाडो फल का इस्तेमाल करेंगे.)

3. जिस पौधे पर आपने टैप किया है उसकी जानकारी वाली स्क्रीन पर, पौधे को रेटिंग देने के लिए सबसे ऊपर दाएं कोने में मौजूद 'पसंद करें' आइकॉन पर टैप करें.

4. सर्वे भरना शुरू करें. हालांकि, तीसरे सवाल पर पहुंचने के बाद इसे बंद कर दें.

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

आइए, अब इन समस्याओं को ठीक करने के लिए आगे बढ़ते हैं!

5. प्रिडिक्टिव बैक जेस्चर की सुविधा चालू करना

हमारा ऐप्लिकेशन पहले से ही AndroidX का इस्तेमाल करता है. इसलिए, आपको बैक नेविगेशन एपीआई का इस्तेमाल करना होगा. इनमें पहले से ही, समय से पहले डिलीवरी करने की सुविधा उपलब्ध है.

Android 13 को टारगेट करना

हमारे ऐप्लिकेशन के Studio प्रोजेक्ट में, ऐप्लिकेशन के बिल्ड कॉन्फ़िगरेशन को Android 13 को टारगेट करने के लिए अपडेट करें. इसके लिए, यहां दिया गया कोड स्निपेट देखें.

build.gradle (प्रोजेक्ट)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkVersion = 33
       targetSdkVersion = 33
   }
...
}

डिपेंडेंसी अपग्रेड करना

build.gradle में, appCompatVersion को 1.6.0 या इससे ज़्यादा पर सेट करें.

build.gradle (प्रोजेक्ट)

buildscript {
   ext {

    // App dependencies
    appCompatVersion = '1.6.0-rc01' // Built original with changes

...
}

AndroidX Activity 1.6.0 या इसके बाद के वर्शन पर अपग्रेड करें.

build.gradle (मॉड्यूल)

dependencies {
    implementation "androidx.activity:activity-ktx:1.6.0"
    ...
}

प्रिडिक्टिव बैक जेस्चर की सुविधा चालू करना

प्रिडिक्टिव बैक जेस्चर वाले एपीआई चालू करने के लिए, मेनिफ़ेस्ट में enableOnBackInvokedCallback को true पर सेट करें.

AndroidManifest.xml

<application
   ...
   android:enableOnBackInvokedCallback="true" // Enables this feature.
   ... >
...
</application>

वापस जाने के जेस्चर को हैंडल करने के लिए, OnBackPressedCallback को रजिस्टर करें और उसका एलान करें

कॉलबैक बनाएं और बैक जेस्चर को हैंडल करने के लिए, handleOnBackPressed तरीके को बदलें. वेबव्यू के इस्तेमाल के उदाहरण के लिए, पेज स्टैक में तब तक वापस जाने के लिए 'वापस जाएं' जेस्चर का इस्तेमाल करें, जब तक कोई और पेज न हो.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
  val onBackPressedCallback = object: OnBackPressedCallback(true) {
    override fun handleOnBackPressed() {
      when {
        webView.canGoBack() -> webView.goBack()
      }
    }
  }
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)
}

बनाए गए ऐप्लिकेशन को आज़माना

अब आपको यह जांच करनी है कि WebView नेविगेशन सही तरीके से काम कर रहा है या नहीं.

1. Android Studio में, ऐप्लिकेशन को फिर से बनाएं और चलाएं.
2. ठीक वैसे ही जैसे आपने पहली बार डेमो चलाया था, अपनी पसंद के किसी पौधे पर टैप करें. इसके बाद, 'पसंद करें' आइकॉन पर टैप करें. इसके बाद, सर्वे में तब तक जानकारी भरें, जब तक आप तीसरे सवाल तक न पहुंच जाएं.
3. वापस जाने के लिए, स्क्रीन के बाएं (या दाएं) किनारे से अंदर की ओर स्वाइप करें. WebView की मदद से, आपको सर्वे के दूसरे सवाल पर वापस जाना चाहिए.

हमें यही चाहिए था. हालांकि, हम सिर्फ़ आधे रास्ते पर हैं. यह समस्या अब भी पूरी तरह से ठीक नहीं हुई है. आइए, हम आपको बताते हैं कि हमारा क्या मतलब है:

4. दूसरे सवाल से, पहले सवाल पर वापस जाएं. इसके बाद, पौधे की जानकारी वाले फ़्रैगमेंट पर वापस जाने के लिए, एक बार और स्वाइप करें.

ध्यान दें कि पहले सवाल से, पौधे की जानकारी वाले फ़्रैगमेंट पर वापस नहीं जाया जा सकता. ऐसा इसलिए होता है, क्योंकि:

• आपका WebView, 'वापस जाएं' नेविगेशन को हैंडल करता है. इसके लिए, 'वापस जाएं' नेविगेशन का इस्तेमाल करते समय, WebView को बंद नहीं किया जाता.
• जब आपके ऐप्लिकेशन को बैक नेविगेशन की ज़रूरत न हो, तो उसे सिस्टम को वापस कर देना चाहिए. चलिए, इस समस्या को ठीक करने के लिए अगले सेक्शन पर जाएं!

6. 'वापस जाएं' जेस्चर की सुविधा ठीक करना

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

OnBackPressedCallback की मदद से, वापस जाने की सुविधा को चालू या बंद करना

1. doUpdateVisitedHistory तरीके को बदलें, ताकि यह तय किया जा सके कि बैक नेविगेशन को इंटरसेप्ट किया जाना चाहिए या नहीं. वापस जाने के नेविगेशन को मैनेज करने का लॉजिक यह है:
   • अगर WebView (webView.canGoBack()) में वापस जाने के लिए और पेज हैं, तो OnBackPressedCallback तरीके को चालू किया जाना चाहिए.
   • इसके उलट, अगर WebView में वापस जाने के लिए कोई और पेज नहीं है, तो OnBackPressedCallback तरीके को बंद कर देना चाहिए. इस वजह से, 'वापस जाएं' जेस्चर का इस्तेमाल करने पर, बैक स्टैक में सबसे ऊपर मौजूद फ़्रैगमेंट पर वापस जाया जा सकेगा.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)

  disableOnBackPressedCallback(webView, onBackPressedCallback)
  }
}

private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
  webView.webViewClient = object: WebViewClient() {
    override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
      // Disable the on-back press callback if there are no more questions in the
      // WebView to go back to, allowing us to exit the WebView and go back to
      // the fragment.
      onBackPressedCallback.isEnabled = webView.canGoBack()

    }
  }
}

2. WebView को फिर से टेस्ट करने के लिए, सर्वे में दिए गए सवालों के जवाब फिर से दें. ऐसा तब तक करें, जब तक आप तीसरे सवाल पर न पहुंच जाएं.
3. 'वापस जाएं' जेस्चर का इस्तेमाल करके, प्लांट की जानकारी वाले व्यू पर वापस जाएं. आपको यह काम बिना किसी समस्या के करना चाहिए.

ध्यान दें कि अब हम WebView से बाहर निकल सकते हैं और बिना किसी रुकावट के, पौधे की जानकारी वाले फ़्रैगमेंट को वापस देख सकते हैं.

यहां उदाहरण दिया गया है कि समस्या ठीक करने के बाद यह सब कैसा दिखना चाहिए:

'होम स्क्रीन पर वापस जाएं' जेस्चर के नए ऐनिमेशन की झलक देखना

Android के आने वाले वर्शन में, आपको अनुमान लगाने वाले बैक जेस्चर का अनुभव मिलेगा. यह जेस्चर, यहां दिए गए ऐनिमेशन में दिखाया गया है. हमारा सुझाव है कि आप इन बदलावों को जल्द से जल्द लागू करें!

डेवलपर विकल्प को चालू करके, 'वापस जाएं' जेस्चर वाले नए नेविगेशन की झलक देखी जा सकती है.

7. बधाई हो

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

हमने क्या-क्या कवर किया है

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

कोडलैब पूरा हुआ

ज़िप फ़ाइल डाउनलोड करें (हो गया)

// Get completed app.
git clone --branch main \
https://github.com/android/codelab-handling-back-navigation.git

अतिरिक्त सामग्री

• डेवलपर गाइड

रेफ़रंस दस्तावेज़

• OnBackPressedDispatcher और OnBackPressedCallback
• OnBackInvokedDispatcher और OnBackInvokedCallback