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:
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.
