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>

score 2 · Accepted Answer · answered Jan 03 '21 at 07:06

2

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;
}
}

answered Jan 03 '21 at 07:06

ADM

20,406
11
52
83

1

The slide in animation works, but how can I get it to slide out? – DIRTY DAVE Jan 03 '21 at 07:15
It is Sliding out also . i have added both cases in above method . Its working fine for Slide In and Slide out both . – ADM Jan 03 '21 at 07:17
Is this what you were expecting? https://streamable.com/0j3wvj this is what im getting – DIRTY DAVE Jan 03 '21 at 07:24
Nope . It's sliding out at my end . How come it's not working on your device . – ADM Jan 03 '21 at 07:29
Just to make things clear I am using Android x version of TransitionManager and other classes. – ADM Jan 03 '21 at 07:30
Very weird issue. The one in the video above is a emulator Pixel 2 API 29. I just tried it on my Nexus 5X API 27 and the slide out animation works. Im also using the AndroidX one. – DIRTY DAVE Jan 03 '21 at 07:31
2

Tested on my real device Pixel 4a API 30, doesn't work on it either. Also...I just tested my code above and it works on the Nexus 5X... – DIRTY DAVE Jan 03 '21 at 07:35
Did you ever solve this? It looks like setting a view to GONE just immediately takes effect and kills transition manager animations now, and it didn't used to? – Daniel Wilson Mar 18 '22 at 00:04

score 1 · Answer 2 · answered Mar 18 '22 at 11:40

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)

score 0 · Answer 3 · answered Mar 30 '21 at 10:38

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

score 0 · Answer 4 · answered Jan 11 '23 at 21:34

Kotlin solution

Call the method wherever you want. Use FALSE to Slide out and TRUE to Slide in.
targetView = View you want to slide in / out
rootLayout = Main layout where the targetView is located

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
 }

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

4 Answers4

Linked