Teo Mehrosh
Teo Mehrosh

Reputation: 71

Android - Shared Element Transition from listview to toolbar title

In my app m trying to implement shared element transition between listview name from one activity and Toolbar title in the next activity. The problem i am facing is that shared element is not animated as it should be instead its animated along with the entire layout enter and exit transitions.

gif animation

here the insurance text should animate separately from the entire animation.

Calling Activity animations are as follows:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setSharedElementReturnTransition(TransitionInflater.from(this)
                    .inflateTransition(R.transition.trans_move));
//            getWindow().setSharedElementExitTransition(new TransitionSet()
//                    .addTransition(new Fade()));
            Slide slideTransition = new Slide();
            slideTransition.setSlideEdge(Gravity.LEFT);
            slideTransition.setDuration(getResources().getInteger(R.integer.anim_duration_long));
            getWindow().setReenterTransition(slideTransition);
            getWindow().setExitTransition(slideTransition);
        }

setShareElementExitTransition has no effect on the transition so commented it out

Intent used for starting the second activity

ActivityOptionsCompat activityOptions
                = ActivityOptionsCompat.makeSceneTransitionAnimation(
                HomeActivity.this,
                new Pair<>(view.findViewById(R.id.nameTextView),
                        SharedCertificatesActivity.ab_title)
        );
        Intent _intent=new Intent(mContext, SharedCertificatesActivity.class);
        ActivityCompat.startActivity(HomeActivity.this,
                _intent, activityOptions.toBundle());

The Second activity has the following scenes transitions

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//             Re-enter transition is executed when returning to this activity
            Slide slideTransition = new Slide();
            slideTransition.setSlideEdge(Gravity.LEFT);
            slideTransition.setDuration(getResources().getInteger(R.integer.anim_duration_medium));
            Slide slideRightTransition = new Slide();
            slideRightTransition.setSlideEdge(Gravity.RIGHT);
            slideRightTransition.setDuration(getResources().getInteger(R.integer.anim_duration_medium));
//            getWindow().setAllowReturnTransitionOverlap(true);
            getWindow().setReenterTransition(slideRightTransition);
            getWindow().setExitTransition(slideTransition);
//            getWindow().setSharedElementEnterTransition(TransitionInflater.from(this)
//                    .inflateTransition(R.transition.trans_move));
            ViewCompat.setTransitionName(title, ab_title);

        }

i also found a similar problem here on SO but the solution mentioned there didn't work for me. if its above problem then the layout for the second activity is as below:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:background="@color/primary"
                app:popupTheme="@style/AppTheme.PopupOverlay">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical|start"
                    android:fontFamily="sans-serif-medium"
                    android:text="Binder Name"
                    android:textColor="@color/_kAppearanceUINavigationBarTextColor"
                    android:textSize="20sp" />

            </android.support.v7.widget.Toolbar>

            <include layout="@layout/binder" />
        </LinearLayout>
.
.
.
</android.support.design.widget.CoordinatorLayout>

Any help would be highly appreciated

Upvotes: 1

Views: 2089

Answers (1)

Teo Mehrosh
Teo Mehrosh

Reputation: 71

Resolved the issue The issue was mainly due the animation timings issue. Shared element was animating much faster (default value) as compared to the other window animations. Changed the setupWindowAnimations method in the second activity as follows

private void setupWindowAnimations() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Slide slideTransition = new Slide();
            slideTransition.setSlideEdge(Gravity.LEFT);
            slideTransition.setInterpolator(new DecelerateInterpolator());
            slideTransition.setDuration(460);
            Slide slideRightTransition = new Slide();
            slideRightTransition.setSlideEdge(Gravity.RIGHT);
            slideRightTransition.setDuration(getResources().getInteger(R.integer.anim_duration_long));
            getWindow().setReenterTransition(slideRightTransition);
            getWindow().setExitTransition(slideTransition);
            getWindow().setEnterTransition(slideTransition);
            getWindow().setSharedElementEnterTransition(new ChangeBounds().setDuration(450));
            getWindow().setSharedElementReturnTransition(null);
            ViewCompat.setTransitionName(title, ab_title);
            ViewCompat.setTransitionName(menu1, fab_anim);

        }
    }

Now is more smooth and the shared element transition as per the expected result. Credit goes to guides.codepath.com and George Mount blog for clearing out more about shared element transitions.

Note: There is google bug for returning back the shared element textview back to the calling activity which is till date not resolved. so had to disable the shared element return transition from the calling activity.

Upvotes: 0

Related Questions