अनुमानित बैक ऐनिमेशन के लिए सहायता जोड़ें

सिस्टम बैक एपीआई का इस्तेमाल करते समय, इन-ऐप्लिकेशन ऐनिमेशन पाने और पसंद के मुताबिक ट्रांज़िशन के लिए ऑप्ट इन किया जा सकता है.

पहला वीडियो: पहले से अनुमानित बैक ऐनिमेशन

ऑप्ट-इन करने के बाद, आपका ऐप्लिकेशन होम स्क्रीन पर वापस जाने, एक गतिविधि से दूसरी गतिविधि पर जाने, और एक टास्क से दूसरे टास्क पर जाने के लिए ऐनिमेशन दिखाता है.

मटीरियल कॉम्पोनेंट के ऐनिमेशन पाने के लिए, मटीरियल कॉम्पोनेंट की डिपेंडेंसी को MDC Android के v1.10.0 पर भी अपग्रेड किया जा सकता है. जैसे:

ज़्यादा जानकारी के लिए, GitHub पर मौजूद, मेटल कॉम्पोनेंट के लिए डेवलपर गाइड देखें.

इस वीडियो में, Android Settings ऐप्लिकेशन का इस्तेमाल करके, एक ऐप्लिकेशन से दूसरे ऐप्लिकेशन पर जाने और होम स्क्रीन पर वापस जाने के लिए, ऐनिमेशन के सुझाव दिखाने की सुविधा के बारे में बताया गया है.

  1. ऐनिमेशन में, उपयोगकर्ता पिछली सेटिंग स्क्रीन पर वापस जाने के लिए, पीछे की ओर स्वाइप करता है. यह क्रॉस-ऐक्टिविटी ऐनिमेशन का उदाहरण है.
  2. अब उपयोगकर्ता पिछली स्क्रीन पर, दूसरी बार स्वाइप करना शुरू करता है. इससे होम स्क्रीन की झलक दिखती है. यह होम स्क्रीन पर वापस जाने वाले ऐनिमेशन का उदाहरण है.
  3. उपयोगकर्ता दाईं ओर स्वाइप करता रहता है. इससे, होम स्क्रीन पर आइकॉन के तौर पर दिखने वाली विंडो का ऐनिमेशन दिखता है.
  4. अब उपयोगकर्ता पूरी तरह से होम स्क्रीन पर वापस आ गया है.

'वापस जाएं' जेस्चर के लिए अनुमानित सुविधा जोड़ने के तरीके के बारे में ज़्यादा जानें.

ऐप्लिकेशन में कस्टम ट्रांज़िशन और ऐनिमेशन जोड़ना

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

Progress API का इस्तेमाल करके कस्टम ट्रांज़िशन जोड़ना

AndroidX Activity 1.8.0-alpha01 या इसके बाद के वर्शन के साथ, अपने ऐप्लिकेशन में ऐनिमेशन के लिए कस्टम ऐनिमेशन बनाने के लिए, अनुमानित बैक जेस्चर के लिए प्रगति एपीआई का इस्तेमाल किया जा सकता है. प्रगति एपीआई, व्यू को ऐनिमेट करने में मदद करते हैं. हालांकि, फ़्रैगमेंट के बीच ट्रांज़िशन को ऐनिमेट करने में इनकी सीमाएं होती हैं. OnBackPressedCallback में, हमने उपयोगकर्ता के पीछे स्वाइप करने पर ऑब्जेक्ट को ऐनिमेट करने के लिए, handleOnBackProgressed, handleOnBackCancelled, और handleOnBackStarted तरीकों को जोड़ा है. अगर आपको सिस्टम से मिले डिफ़ॉल्ट ऐनिमेशन या Material कॉम्पोनेंट के ऐनिमेशन के अलावा, ज़्यादा ऐनिमेशन बनाने हैं, तो इन तरीकों का इस्तेमाल करें.

हमें उम्मीद है कि ज़्यादातर ऐप्लिकेशन, पुराने सिस्टम के साथ काम करने वाले AndroidX एपीआई का इस्तेमाल करेंगे. हालांकि, Android 14 के डेवलपर के लिए उपलब्ध झलक 1 और इसके बाद के वर्शन में, जांच के लिए OnBackAnimationCallback इंटरफ़ेस में मिलते-जुलते प्लैटफ़ॉर्म एपीआई भी उपलब्ध हैं.

AndroidX ट्रांज़िशन के साथ Progress API का इस्तेमाल करना

Android 14 और उसके बाद के वर्शन पर, अनुमानित बैक ट्रांज़िशन बनाने के लिए, Progress API का इस्तेमाल AndroidX Transitions 1.5.0-alpha01 या इसके बाद के वर्शन के साथ किया जा सकता है.

  1. उपयोगकर्ता के वापस स्वाइप करने पर ट्रांज़िशन चलाने के लिए, beginDelayedTransition के बजाय TransitionManager#controlDelayedTransition का इस्तेमाल करें.
  2. handleOnBackStarted में ट्रांज़िशन बनाएं.
  3. currentFraction को BackEvent.progress से जोड़कर, handleOnBackProgressed में बैक इवेंट के साथ ट्रांज़िशन चलाएं. इससे पता चलता है कि उपयोगकर्ता ने कितनी दूर स्वाइप किया है.
  4. जब उपयोगकर्ता handleOnBackPressed में बैक जेस्चर का इस्तेमाल कर ले, तब ट्रांज़िशन पूरा करें.
  5. आखिर में, handleOnBackCancelled में ट्रांज़िशन की स्थिति रीसेट करें.

यहां दिए गए वीडियो, Kotlin कोड, और एक्सएमएल में, OnBackPressedCallback की मदद से लागू किए गए दो बॉक्स के बीच कस्टम ट्रांज़िशन दिखाया गया है:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  
<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

अनुमानित बैक ट्रांज़िशन का इस्तेमाल करते समय, इन बातों का ध्यान रखें:

  • isSeekingSupported का इस्तेमाल करके देखें कि ट्रांज़िशन में, अनुमानित बैक सुविधा काम करती है या नहीं.
  • अपने कस्टम ट्रांज़िशन के लिए 'सही है' दिखाने के लिए, isSeekingSupported को बदलें.
  • हर ऐनिमेशन के लिए एक कंट्रोलर बनाएं.
  • अनुमानित बैक ट्रांज़िशन, AndroidX ट्रांज़िशन के साथ काम करते हैं, लेकिन फ़्रेमवर्क ट्रांज़िशन के साथ नहीं. फ़्रेमवर्क ट्रांज़िशन से माइग्रेट करें और इसके बजाय Animator और AndroidX ट्रांज़िशन का इस्तेमाल करें.
  • अनुमानित बैक ट्रांज़िशन की सुविधा, Android 14 और उसके बाद के वर्शन वाले डिवाइसों पर काम करती है. यह सुविधा, पुराने वर्शन वाले डिवाइसों पर काम नहीं करती.
  • एक्सएमएल सीन की मदद से बनाए गए ट्रांज़िशन भी काम करते हैं. handleOnBackStarted में, TransitionSeekController को controlDelayedTransition के नतीजे के बजाय, TransitionManager.createSeekController के नतीजे पर सेट करें.

Android 14 और उसके बाद के वर्शन पर, गतिविधि के लिए कस्टम ट्रांज़िशन जोड़ना

यह पक्का करने के लिए कि कस्टम गतिविधि ट्रांज़िशन, Android 14 और उसके बाद के वर्शन पर, अनुमानित बैक ट्रांज़िशन के साथ काम करते हैं, overridePendingTransition के बजाय overrideActivityTransition का इस्तेमाल किया जा सकता है. इसका मतलब है कि जब उपयोगकर्ता वापस स्वाइप करता है, तब ट्रांज़िशन ऐनिमेशन चलता है.

यह कैसे काम कर सकता है, इसका उदाहरण देने के लिए, एक ऐसी स्थिति की कल्पना करें जिसमें ऐक्टिविटी B, बैक स्टैक में ऐक्टिविटी A के ऊपर हो. कस्टम ऐक्टिविटी ऐनिमेशन को इस तरह मैनेज किया जा सकता है:

  • गतिविधि B के onCreate तरीके में, ट्रांज़िशन को खोलने या बंद करने के लिए कॉल करें.
  • जब उपयोगकर्ता गतिविधि B पर जाता है, तो OVERRIDE_TRANSITION_OPEN का इस्तेमाल करें. जब उपयोगकर्ता गतिविधि A पर वापस जाने के लिए स्वाइप करता है, तो OVERRIDE_TRANSITION_CLOSE का इस्तेमाल करें.

  • OVERRIDE_TRANSITION_CLOSE तय करते समय, enterAnim गतिविधि A के शुरू होने का ऐनिमेशन है और exitAnim गतिविधि B के खत्म होने का ऐनिमेशन है.

फ़्रैगमेंट के साथ, 'पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर' की सुविधा जोड़ना

फ़्रैगमेंट के साथ अनुमानित बैक को लागू करने के दो तरीके हैं.

मौजूदा एपीआई का इस्तेमाल करना

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

इन बातों का ध्यान रखें:

  • ट्रांज़िशन 1.5.0 या इसके बाद का वर्शन और फ़्रैगमेंट 1.7.0 या इसके बाद का वर्शन इंपोर्ट करें. फ़्रैगमेंट में, 'वापस जाएं' सुविधा का ज़्यादातर हिस्सा, ट्रांज़िशन के ऐनिमेशन को आगे-पीछे करने की सुविधा पर निर्भर करता है. यह सुविधा सिर्फ़ ट्रांज़िशन 1.5.0 या इसके बाद के वर्शन में काम करती है.
  • बैक स्टैक को हैंडल करने के लिए, FragmentManager या नेविगेशन कॉम्पोनेंट के साथ फ़्रैगमेंट का इस्तेमाल करें. अगर आपने बैक स्टैक को खुद मैनेज किया है, तो अनुमानित बैक सुविधा काम नहीं करती. उन बैक स्टैक से माइग्रेट करें जिनके बारे में FragmentManager को पता नहीं है.
  • कुछ लाइब्रेरी में, अनुमानित तौर पर वापस जाने की सुविधा शामिल होती है. पक्का करने के लिए दस्तावेज़ देखें.
  • Animator क्लास और AndroidX Transition लाइब्रेरी का इस्तेमाल किया जा सकता है.
  • Animation क्लास और फ़्रेमवर्क Transition लाइब्रेरी का इस्तेमाल नहीं किया जा सकता.
  • अनुमानित ऐनिमेशन की सुविधा सिर्फ़ Android 14 या इसके बाद के वर्शन वाले डिवाइसों पर काम करती है.

अनुमानित बैक क्रॉस-फ़्रैगमेंट का इस्तेमाल इन स्थितियों में करें:

कुछ मैटीरियल मोशन, MaterialFadeThrough, MaterialSharedAxis, और MaterialFade के साथ, 1.12.02-alpha02 या इसके बाद के वर्शन में, अनुमानित बैक ट्रैक की सुविधा के साथ काम करते हैं. ध्यान दें कि MaterialContainerTransform में अनुमानित टाइपिंग की सुविधा काम नहीं करती.

कॉलबैक का इस्तेमाल करना

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

OnBackPressedCallback बनाएं. handleOnBackProgressed में, फ़्रैगमेंट को स्केल करें और उसका साइज़ बदलें. इसके बाद, बैक स्टैक से पॉप करें. इसके बाद, कॉलबैक के बाहर setSharedElementReturnTransition का इस्तेमाल करके, शेयर किए गए एलिमेंट का ट्रांज़िशन चलाएं.

ज़्यादा जानकारी के लिए, GitHub पर कोड का सैंपल देखें.

ज़रूरी शर्तें

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

कैटगरी ऐनिमेशन compileSdk targetSdk डिवाइस का वर्शन android:enableOnBackInvokedCallback डिपेंडेंसी
सिस्टम ऐनिमेशन बैक-टू-होम 33 कोई भी 35 सही कोई नहीं
अलग-अलग गतिविधियां 34 कोई भी 35 सही कोई नहीं
क्रॉस-टास्क 34 कोई भी 35 सही कोई नहीं
प्लैटफ़ॉर्म कस्टम क्रॉस-ऐक्टिविटी 34 कोई भी 35 सही कोई नहीं
Progress API Platform 34 कोई भी 34 सही कोई नहीं
मटीरियल कॉम्पोनेंट बॉटम शीट 34 कोई भी 34 सही Material Component 1.10.0
साइड शीट 34 कोई भी 34 सही Material Component 1.10.0
नेविगेशन पैनल 34 कोई भी 34 सही Material Component 1.10.0
खोजें 34 कोई भी 34 सही Material Component 1.10.0
Jetpack ऐनिमेशन कस्टम AndroidX क्रॉस-फ़्रैगमेंट 34 कोई भी 34 सही AndroidX Fragment 1.7
कस्टम AndroidX ट्रांज़िशन 34 कोई भी 34 सही AndroidX ट्रांज़िशन 1.5
Progress API Jetpack 34 कोई भी 34 सही AndroidX Activity 1.8

अतिरिक्त संसाधन