How to implement shared element transition with focal element












0















I want to implement shared element transition in my app, when one activity's recycler view item transforms into another activity like here: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15N3n1xwTt0briEbfIvFUG01pMv2d_xaT%2F02-focus-focalelement-do.mp4. (source: https://material.io/design/motion/choreography.html#using-a-focal-element)



Namely, the item is fading out and changes bounds then the new activity fade in. As far as I understand it is simple AutoTransition, but it doesn't work. Simple fading doesn't work as well.



Thus, for now I achieve only that the item gets background of new activity an then changes its bounds.










share|improve this question





























    0















    I want to implement shared element transition in my app, when one activity's recycler view item transforms into another activity like here: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15N3n1xwTt0briEbfIvFUG01pMv2d_xaT%2F02-focus-focalelement-do.mp4. (source: https://material.io/design/motion/choreography.html#using-a-focal-element)



    Namely, the item is fading out and changes bounds then the new activity fade in. As far as I understand it is simple AutoTransition, but it doesn't work. Simple fading doesn't work as well.



    Thus, for now I achieve only that the item gets background of new activity an then changes its bounds.










    share|improve this question



























      0












      0








      0


      0






      I want to implement shared element transition in my app, when one activity's recycler view item transforms into another activity like here: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15N3n1xwTt0briEbfIvFUG01pMv2d_xaT%2F02-focus-focalelement-do.mp4. (source: https://material.io/design/motion/choreography.html#using-a-focal-element)



      Namely, the item is fading out and changes bounds then the new activity fade in. As far as I understand it is simple AutoTransition, but it doesn't work. Simple fading doesn't work as well.



      Thus, for now I achieve only that the item gets background of new activity an then changes its bounds.










      share|improve this question
















      I want to implement shared element transition in my app, when one activity's recycler view item transforms into another activity like here: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15N3n1xwTt0briEbfIvFUG01pMv2d_xaT%2F02-focus-focalelement-do.mp4. (source: https://material.io/design/motion/choreography.html#using-a-focal-element)



      Namely, the item is fading out and changes bounds then the new activity fade in. As far as I understand it is simple AutoTransition, but it doesn't work. Simple fading doesn't work as well.



      Thus, for now I achieve only that the item gets background of new activity an then changes its bounds.







      android shared-element-transition






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 4 '18 at 14:23







      userVadim

















      asked Nov 20 '18 at 14:17









      userVadimuserVadim

      205




      205
























          1 Answer
          1






          active

          oldest

          votes


















          0














          So, I ended up by adding recycler view item's layout in the resulting activity layout. The data (e.g. the title, etc.) of the clicked item is transferred to the next activity with intent.putExtra(). Shared elements in such case will be of course the item's root view and resulting activity's root view. When activity starts I set the data of the item to matching views in activity via SharedElementCallback, e.g.:



          setEnterSharedElementCallback(
          object : SharedElementCallback() {
          override fun onSharedElementStart(...) {
          val title = intent.getStringExtra(TITLE)
          activity_item_title.text = title
          ........
          }

          override fun onSharedElementEnd(...) {
          }
          })


          This allows to show exactly the same item view at the beginning of the transition. Then it should start change its bounds, fading out this item's view at the same time. And at some moment (e.g. in the middle of the transition) when the initial view completely fades out, the laouyt of the activity shows up, fading in gradually. To do this we need to hide item's view in the middle of the transition (View.visibility = View.GONE) and make activity views visible. Probably this is not the best way, but I solve this by adding a listener to shared element enter transition and used Handler().postDelayed:



          window.sharedElementEnterTransition.addListener(
          object : android.transition.Transition.TransitionListener {
          override fun onTransitionEnd(transition: Transition) {}

          override fun onTransitionResume(transition: Transition) {}

          override fun onTransitionPause(transition: Transition) {}

          override fun onTransitionCancel(transition: Transition) {}

          override fun onTransitionStart(transition: Transition) {
          Handler().postDelayed({
          activity_item.visibility = View.GONE

          activity_view_1.visibility = View.VISIBLE
          activity_view_2.visibility = View.VISIBLE
          .............
          .............
          // Also you could e.g. set the background to your activity here, ets.
          activity_view_root.background = backgroundDrawable

          }, 150) //suppuse that the whole transition length is 300ms
          }
          }
          })


          The transition animations themselves could look as follows:



          <transitionSet>
          <targets>
          <target android:targetId="@id/activity_root_view"/>
          </targets>
          <transition
          class="com.organization.app.utils.FadeOutTransition"
          android:duration="150"/>
          <transition
          class="com.organization.app.utils.FadeInTransition"
          android:startDelay="150"/>
          <changeBounds android:duration="300"/>
          </transitionSet>


          Here, custom FadeOutTransition and FadeInTransition were used since simple android <fade/> animation doesn't work with shared elements. These classes are similar to that given in the answer here: Why Fade transition doesn't work on Shared Element.



          The steps for creating return transition are similar.






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53394989%2fhow-to-implement-shared-element-transition-with-focal-element%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            So, I ended up by adding recycler view item's layout in the resulting activity layout. The data (e.g. the title, etc.) of the clicked item is transferred to the next activity with intent.putExtra(). Shared elements in such case will be of course the item's root view and resulting activity's root view. When activity starts I set the data of the item to matching views in activity via SharedElementCallback, e.g.:



            setEnterSharedElementCallback(
            object : SharedElementCallback() {
            override fun onSharedElementStart(...) {
            val title = intent.getStringExtra(TITLE)
            activity_item_title.text = title
            ........
            }

            override fun onSharedElementEnd(...) {
            }
            })


            This allows to show exactly the same item view at the beginning of the transition. Then it should start change its bounds, fading out this item's view at the same time. And at some moment (e.g. in the middle of the transition) when the initial view completely fades out, the laouyt of the activity shows up, fading in gradually. To do this we need to hide item's view in the middle of the transition (View.visibility = View.GONE) and make activity views visible. Probably this is not the best way, but I solve this by adding a listener to shared element enter transition and used Handler().postDelayed:



            window.sharedElementEnterTransition.addListener(
            object : android.transition.Transition.TransitionListener {
            override fun onTransitionEnd(transition: Transition) {}

            override fun onTransitionResume(transition: Transition) {}

            override fun onTransitionPause(transition: Transition) {}

            override fun onTransitionCancel(transition: Transition) {}

            override fun onTransitionStart(transition: Transition) {
            Handler().postDelayed({
            activity_item.visibility = View.GONE

            activity_view_1.visibility = View.VISIBLE
            activity_view_2.visibility = View.VISIBLE
            .............
            .............
            // Also you could e.g. set the background to your activity here, ets.
            activity_view_root.background = backgroundDrawable

            }, 150) //suppuse that the whole transition length is 300ms
            }
            }
            })


            The transition animations themselves could look as follows:



            <transitionSet>
            <targets>
            <target android:targetId="@id/activity_root_view"/>
            </targets>
            <transition
            class="com.organization.app.utils.FadeOutTransition"
            android:duration="150"/>
            <transition
            class="com.organization.app.utils.FadeInTransition"
            android:startDelay="150"/>
            <changeBounds android:duration="300"/>
            </transitionSet>


            Here, custom FadeOutTransition and FadeInTransition were used since simple android <fade/> animation doesn't work with shared elements. These classes are similar to that given in the answer here: Why Fade transition doesn't work on Shared Element.



            The steps for creating return transition are similar.






            share|improve this answer




























              0














              So, I ended up by adding recycler view item's layout in the resulting activity layout. The data (e.g. the title, etc.) of the clicked item is transferred to the next activity with intent.putExtra(). Shared elements in such case will be of course the item's root view and resulting activity's root view. When activity starts I set the data of the item to matching views in activity via SharedElementCallback, e.g.:



              setEnterSharedElementCallback(
              object : SharedElementCallback() {
              override fun onSharedElementStart(...) {
              val title = intent.getStringExtra(TITLE)
              activity_item_title.text = title
              ........
              }

              override fun onSharedElementEnd(...) {
              }
              })


              This allows to show exactly the same item view at the beginning of the transition. Then it should start change its bounds, fading out this item's view at the same time. And at some moment (e.g. in the middle of the transition) when the initial view completely fades out, the laouyt of the activity shows up, fading in gradually. To do this we need to hide item's view in the middle of the transition (View.visibility = View.GONE) and make activity views visible. Probably this is not the best way, but I solve this by adding a listener to shared element enter transition and used Handler().postDelayed:



              window.sharedElementEnterTransition.addListener(
              object : android.transition.Transition.TransitionListener {
              override fun onTransitionEnd(transition: Transition) {}

              override fun onTransitionResume(transition: Transition) {}

              override fun onTransitionPause(transition: Transition) {}

              override fun onTransitionCancel(transition: Transition) {}

              override fun onTransitionStart(transition: Transition) {
              Handler().postDelayed({
              activity_item.visibility = View.GONE

              activity_view_1.visibility = View.VISIBLE
              activity_view_2.visibility = View.VISIBLE
              .............
              .............
              // Also you could e.g. set the background to your activity here, ets.
              activity_view_root.background = backgroundDrawable

              }, 150) //suppuse that the whole transition length is 300ms
              }
              }
              })


              The transition animations themselves could look as follows:



              <transitionSet>
              <targets>
              <target android:targetId="@id/activity_root_view"/>
              </targets>
              <transition
              class="com.organization.app.utils.FadeOutTransition"
              android:duration="150"/>
              <transition
              class="com.organization.app.utils.FadeInTransition"
              android:startDelay="150"/>
              <changeBounds android:duration="300"/>
              </transitionSet>


              Here, custom FadeOutTransition and FadeInTransition were used since simple android <fade/> animation doesn't work with shared elements. These classes are similar to that given in the answer here: Why Fade transition doesn't work on Shared Element.



              The steps for creating return transition are similar.






              share|improve this answer


























                0












                0








                0







                So, I ended up by adding recycler view item's layout in the resulting activity layout. The data (e.g. the title, etc.) of the clicked item is transferred to the next activity with intent.putExtra(). Shared elements in such case will be of course the item's root view and resulting activity's root view. When activity starts I set the data of the item to matching views in activity via SharedElementCallback, e.g.:



                setEnterSharedElementCallback(
                object : SharedElementCallback() {
                override fun onSharedElementStart(...) {
                val title = intent.getStringExtra(TITLE)
                activity_item_title.text = title
                ........
                }

                override fun onSharedElementEnd(...) {
                }
                })


                This allows to show exactly the same item view at the beginning of the transition. Then it should start change its bounds, fading out this item's view at the same time. And at some moment (e.g. in the middle of the transition) when the initial view completely fades out, the laouyt of the activity shows up, fading in gradually. To do this we need to hide item's view in the middle of the transition (View.visibility = View.GONE) and make activity views visible. Probably this is not the best way, but I solve this by adding a listener to shared element enter transition and used Handler().postDelayed:



                window.sharedElementEnterTransition.addListener(
                object : android.transition.Transition.TransitionListener {
                override fun onTransitionEnd(transition: Transition) {}

                override fun onTransitionResume(transition: Transition) {}

                override fun onTransitionPause(transition: Transition) {}

                override fun onTransitionCancel(transition: Transition) {}

                override fun onTransitionStart(transition: Transition) {
                Handler().postDelayed({
                activity_item.visibility = View.GONE

                activity_view_1.visibility = View.VISIBLE
                activity_view_2.visibility = View.VISIBLE
                .............
                .............
                // Also you could e.g. set the background to your activity here, ets.
                activity_view_root.background = backgroundDrawable

                }, 150) //suppuse that the whole transition length is 300ms
                }
                }
                })


                The transition animations themselves could look as follows:



                <transitionSet>
                <targets>
                <target android:targetId="@id/activity_root_view"/>
                </targets>
                <transition
                class="com.organization.app.utils.FadeOutTransition"
                android:duration="150"/>
                <transition
                class="com.organization.app.utils.FadeInTransition"
                android:startDelay="150"/>
                <changeBounds android:duration="300"/>
                </transitionSet>


                Here, custom FadeOutTransition and FadeInTransition were used since simple android <fade/> animation doesn't work with shared elements. These classes are similar to that given in the answer here: Why Fade transition doesn't work on Shared Element.



                The steps for creating return transition are similar.






                share|improve this answer













                So, I ended up by adding recycler view item's layout in the resulting activity layout. The data (e.g. the title, etc.) of the clicked item is transferred to the next activity with intent.putExtra(). Shared elements in such case will be of course the item's root view and resulting activity's root view. When activity starts I set the data of the item to matching views in activity via SharedElementCallback, e.g.:



                setEnterSharedElementCallback(
                object : SharedElementCallback() {
                override fun onSharedElementStart(...) {
                val title = intent.getStringExtra(TITLE)
                activity_item_title.text = title
                ........
                }

                override fun onSharedElementEnd(...) {
                }
                })


                This allows to show exactly the same item view at the beginning of the transition. Then it should start change its bounds, fading out this item's view at the same time. And at some moment (e.g. in the middle of the transition) when the initial view completely fades out, the laouyt of the activity shows up, fading in gradually. To do this we need to hide item's view in the middle of the transition (View.visibility = View.GONE) and make activity views visible. Probably this is not the best way, but I solve this by adding a listener to shared element enter transition and used Handler().postDelayed:



                window.sharedElementEnterTransition.addListener(
                object : android.transition.Transition.TransitionListener {
                override fun onTransitionEnd(transition: Transition) {}

                override fun onTransitionResume(transition: Transition) {}

                override fun onTransitionPause(transition: Transition) {}

                override fun onTransitionCancel(transition: Transition) {}

                override fun onTransitionStart(transition: Transition) {
                Handler().postDelayed({
                activity_item.visibility = View.GONE

                activity_view_1.visibility = View.VISIBLE
                activity_view_2.visibility = View.VISIBLE
                .............
                .............
                // Also you could e.g. set the background to your activity here, ets.
                activity_view_root.background = backgroundDrawable

                }, 150) //suppuse that the whole transition length is 300ms
                }
                }
                })


                The transition animations themselves could look as follows:



                <transitionSet>
                <targets>
                <target android:targetId="@id/activity_root_view"/>
                </targets>
                <transition
                class="com.organization.app.utils.FadeOutTransition"
                android:duration="150"/>
                <transition
                class="com.organization.app.utils.FadeInTransition"
                android:startDelay="150"/>
                <changeBounds android:duration="300"/>
                </transitionSet>


                Here, custom FadeOutTransition and FadeInTransition were used since simple android <fade/> animation doesn't work with shared elements. These classes are similar to that given in the answer here: Why Fade transition doesn't work on Shared Element.



                The steps for creating return transition are similar.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Dec 4 '18 at 14:17









                userVadimuserVadim

                205




                205
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53394989%2fhow-to-implement-shared-element-transition-with-focal-element%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Guess what letter conforming each word

                    Port of Spain

                    Run scheduled task as local user group (not BUILTIN)