Scene. Slide transition under views

Viewed 792

Look at the sample. I have two scenes, which are start & end scenes. Layout of start scene:

<?xml version="1.0" encoding="utf-8"?>
<merge
    android:id="@+id/vgRoot"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:parentTag="RelativeLayout"
    tools:ignore="HardcodedText"
    >

    <Button
        android:id="@+id/btn1"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/cardView"
        android:text="Button"
        android:layout_centerHorizontal="true"
        />

    <Button
        android:id="@+id/btnGo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn1"
        android:text="@string/go"
        android:layout_centerHorizontal="true"
        />

    <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_margin="16dp"
        android:translationZ="3dp"
        >

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="#3829AB"
            android:padding="32dp"
            >

            <TextView
                android:id="@+id/tvText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Title"
                android:textAppearance="?android:textAppearanceMedium"
                android:textColor="@android:color/white"
                />

        </FrameLayout>

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

</merge>

There i have btn1 for which sliding transition is applied, cardView and container, which change its bounds and tvText as a body of CardView.

And the ending scene:

<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:ignore="HardcodedText"
    tools:parentTag="RelativeLayout"
    >

    <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        app:cardCornerRadius="0dp"
        >

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:background="#3829AB"
            android:orientation="vertical"
            >

            <TextView
                android:id="@+id/tvText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Title"
                android:textAppearance="?android:textAppearanceMedium"
                android:textColor="@android:color/white"
                />

        </FrameLayout>

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

</merge>

Fragment code with transition:

public class FragmentStartTransition extends Fragment {
    @BindView(R.id.btnGo) View btnGo;
    @BindView(R.id.vgRoot) ViewGroup vgRoot;

    private Unbinder unbinder;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup view = (ViewGroup) inflater.inflate(R.layout.fragment_start_transition, container, false);
        unbinder = bind(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        btnGo.setOnClickListener(btnGo.setOnClickListener(v -> moveNext());
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }

    private void moveNext() {
        Scene scene = Scene.getSceneForLayout(vgRoot, R.layout.scene_end, getContext());
        TransitionManager.go(scene, getTransition());
    }

    private Transition getTransition() {
        Slide slide = new Slide(Gravity.TOP);
        slide.addTarget(R.id.btn1);

        ChangeBounds changeBounds = new ChangeBounds();
        changeBounds.addTarget(R.id.cardView);
        changeBounds.addTarget(R.id.container);
        changeBounds.addTarget(R.id.tvText);

        return new TransitionSet()
                .setOrdering(TransitionSet.ORDERING_TOGETHER)
                .addTransition(slide)
                .addTransition(changeBounds)
                .setDuration(1500);
    }
}

fragment_start_transition:

<RelativeLayout
    android:id="@+id/vgRoot"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="HardcodedText"
    >

    <include layout="@layout/scene_start"/>

</RelativeLayout>

Result animation:

enter image description here

I want to slide btn1 under the cardView and container. As you can see cardView is placed at the end of root layout to be over button. But in result animation it is slided over the cardView. Can i somehow control such z-axis relations between animated views?

tried cardView.bringToFront() - it doesn't help

there definetely should be simple solution, but i can't find it.
I need your help, guys.

Update: This is because framework draws slide transition on the scene container view overlay, look at android.transition.Visibility class:

 sceneRoot.getOverlay().add(overlayView);

But the question is still opened.

1 Answers
Related