Transition Manager - Sliding a view out is not working as wanted

Question

I'm trying to slide this view in and out using Transition + Transition manager, however when hitting the hide button to make the view GONE it doesn't have the sliding animation. However, the show button does have the sliding in animation to make the view VISIBLE again.

    @OnClick(R.id.testBtn)
        public void onTestBtnClick(){
            //hide
            Transition transition = new Slide(Gravity.START);
            transition.setDuration(600);

            TransitionManager.beginDelayedTransition(mParentLayout, transition);
            mLayout.setVisibility(View.GONE);
        }

        @OnClick(R.id.testBtn2)
        public void onTestBtn2Click(){
            //show
            Transition transition = new Slide(Gravity.START);
            transition.setDuration(600);

            TransitionManager.beginDelayedTransition(mParentLayout, transition);
            mLayout.setVisibility(View.VISIBLE);
        }

I've tried changing the gravity of testBtn2 to Gravity.END, but that causes it to slide all the way starting from the right side of the screen.

Here's the layout:

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/main_activity_root_view"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/testBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Hide"
        app:layout_constraintStart_toStartOf="parent"/>

    <Button
        android:id="@+id/testBtn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/testBtn"
        android:text="show"
        />

    <LinearLayout
        android:id="@+id/layout"
        android:orientation="vertical"
        android:layout_width="100dp"
        android:layout_height="250dp"
        android:background="@drawable/background_side_bar_corners"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Kotlin solution

1. Call the method wherever you want. Use FALSE to Slide out and TRUE to Slide in.

2. targetView = View you want to slide in / out

3. rootLayout = Main layout where the targetView is located

4. In this example, it will slide from RIGHT to LEFT. If you want LEFT to RIGHT, change Gravity.END to Gravity.START

    private fun shareSlideInOut(show: Boolean) {
        val slide = Slide(Gravity.END)
        slide.duration = 450
        slide.addTarget(targetView)
        slide.interpolator = AccelerateDecelerateInterpolator()
        TransitionManager.beginDelayedTransition(rootLayout, slide)
        shareCodeLayout.visibility = if (show) View.VISIBLE else View.GONE
    }
   

Answer 2

The excellent answer here is very similar to this question.

I have noticed the constraint layout needs to be set up very specifically - if the view you are setting to GONE is constrained to it's sibling, those constraints seem to take precedence over any transition manager animation, i.e. setting a view to GONE just instantly kills it instead of smoothly animating, because the other view's constraints kick in immediately.

My solution was to use a guideline and have two views constrained to it, and set the GuidelineBegin for the transition manager. Just another option that may help:

        val rootView = binding.constraintLayout
        val constraintSet = ConstraintSet()
        constraintSet.clone(rootView)
        val transition = AutoTransition()
        transition.duration = 150L
        transition.excludeTarget(R.id.orders_recycler_view, true)

        constraintSet.setGuidelineBegin(binding.guideline.id, if (showingDetailView) 0.px else 64.px)
        TransitionManager.beginDelayedTransition(rootView as ViewGroup, transition)
        constraintSet.applyTo(rootView)

Answer 3

Create these animations

slide up

<translate
    android:duration="400"
    android:fromYDelta="100%"
    android:toYDelta="0" />

slide down

<translate
    android:duration="400"
    android:fromYDelta="0"
    android:toYDelta="100%" />

When you want to set the layout visible

binding.musicOptionsLayout.setVisibility(View.GONE); binding.musicOptionsLayout.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down));

When you want to set the layout Gone

binding.musicOptionsLayout.setVisibility(View.GONE); binding.musicOptionsLayout.startAnimation(AnimationUtils.loadAnimation(v.getContext(), R.anim.slide_down));

set android:visibility="gone" on XML..

Hope this will fix your issues...

Answer 4

Not sure whats wrong with your code. i have created a sample, just try the code below it working fine. make sure to add android:visibility="gone" for panel view in layout so that its hidden at first launch.

public class MainActivity extends AppCompatActivity {
boolean isShowing = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_damm_activty);
    findViewById(R.id.testBtn).setOnClickListener(v -> {
        showSlidingPanel(!isShowing);
    });
}

private void showSlidingPanel(boolean show) {
    ViewGroup parent = findViewById(R.id.main_activity_root_view);
    View layout = findViewById(R.id.layout);
    Transition transition = new Slide(Gravity.START);
    transition.setDuration(450);
    transition.addTarget(R.id.layout);
    transition.setInterpolator(new AccelerateDecelerateInterpolator());
    TransitionManager.beginDelayedTransition(parent, transition);
    layout.setVisibility(show ? View.VISIBLE : View.GONE);
    isShowing = show;
}
}