Slidedown and slideup layout with animation

Question

how can I display a layout in the center with slideUp when I press the button, and press again to hide ... slideDown in ANDROID

help me with that, thnkss

http://stackoverflow.com/questions/19765938/show-and-hide-a-view-with-a-slide-up-down-animation see this — Nikita Shah, Dec 23 '15 at 09:23
Best way to perform this nowadays is: https://developer.android.com/training/animation/reposition-view — Harpreet, May 16 '19 at 12:23

score 161 · Accepted Answer · edited Nov 19 '15 at 12:59

161

Create two animation xml under res/anim folder

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

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

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

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

Load animation Like bellow Code and start animation when you want According to your Requirement

//Load animation 
Animation slide_down = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.slide_down);

Animation slide_up = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.slide_up);

// Start animation
linear_layout.startAnimation(slide_down);

edited Nov 19 '15 at 12:59

Leonardo Cardoso

1,164
2
12
22

answered May 29 '14 at 05:21

Ando Masahashi

3,112
2
24
41

What height and/or visibility should linar_layout have? I have tried 'GONE' but view never shows. I have set height to 0dp and it never slides down. You missed an entire section on how to 'hide' the view initially. – lostintranslation May 20 '15 at 19:50
@lostintranslation you can add an animationlistener before calling start animation then you can make visible at onAnimationStart when displaying and make invisible at onAnimationEnd when hiding – Jorge Garcia Oct 09 '15 at 22:26
can u explain how we can use interpolator with this to accelerate/decelrate get a bounce at the end or something? – Bhargav Jan 28 '16 at 06:41
initially slide up doesn't work. Once slide_down only slide up works. Don't know why? – Gunaseelan Jun 02 '16 at 06:28
not working in andorid 4.4.2. But working on other devices – W00di Aug 31 '16 at 09:04

score 31 · Answer 2 · answered Apr 20 '16 at 12:19

I use these easy functions, it work like jquery slideUp slideDown, use it in an helper class, just pass your view :

public static void expand(final View v) {
    v.measure(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT);
    final int targetHeight = v.getMeasuredHeight();

    // Older versions of android (pre API 21) cancel animations for views with a height of 0.
    v.getLayoutParams().height = 1;
    v.setVisibility(View.VISIBLE);
    Animation a = new Animation()
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            v.getLayoutParams().height = interpolatedTime == 1
                    ? WindowManager.LayoutParams.WRAP_CONTENT
                    : (int)(targetHeight * interpolatedTime);
            v.requestLayout();
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    // 1dp/ms
    a.setDuration((int) (targetHeight / v.getContext().getResources().getDisplayMetrics().density));
    v.startAnimation(a);
}

public static void collapse(final View v) {
    final int initialHeight = v.getMeasuredHeight();

    Animation a = new Animation()
    {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if(interpolatedTime == 1){
                v.setVisibility(View.GONE);
            }else{
                v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
                v.requestLayout();
            }
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    // 1dp/ms
    a.setDuration((int)(initialHeight / v.getContext().getResources().getDisplayMetrics().density));
    v.startAnimation(a);
}

Great solution for library code (not app with resources xml files) — Tapa Save, Nov 22 '19 at 06:49

score 19 · Answer 3 · edited May 31 '20 at 18:41

Above method is working, but here are more realistic slide up and slide down animations from the top of the screen.

Just create these two animations under the anim folder

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="200"
        android:fromYDelta="-100%"
        android:toYDelta="0" />
</set>

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="200"
        android:fromYDelta="0"
        android:toYDelta="-100%" />
</set>

Load animation in java class like this

imageView.startAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.slide_up));
imageView.startAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.slide_down));

score 3 · Answer 4 · answered Oct 06 '15 at 07:41

3

This doesn't work for me, I want to to like jquery slideUp / slideDown function, I tried this code, but it only move the content wich stay at the same place after animation end, the view should have a 0dp height at start of slideDown and the view height (with wrap_content) after the end of the animation.

answered Oct 06 '15 at 07:41

neoteknic

1,930
16
32

this is just a layout animation. It doesn't actually move the item to a different place in the layout. You want Object Animators for that. If you want the view to be gone or visible after the animation just set the visibility on the view before or after the animation. – Marty Miller Sep 12 '16 at 21:43

score 0 · Answer 5 · answered Sep 07 '21 at 06:55

From JAVA file: Use this is the method.

    public class ViewAnimatorSlideUpDown {

    public static void slideDown(final View view) {
        if (view != null) {
            view.setVisibility(View.VISIBLE);
            ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
            layoutParams.height = 1;
            view.setLayoutParams(layoutParams);

            view.measure(View.MeasureSpec.makeMeasureSpec(Resources.getSystem().getDisplayMetrics().widthPixels,
                    View.MeasureSpec.EXACTLY),
                    View.MeasureSpec.makeMeasureSpec(0,
                            View.MeasureSpec.UNSPECIFIED));

            final int height = view.getMeasuredHeight();
            ValueAnimator valueAnimator = ObjectAnimator.ofInt(1, height);
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int value = (int) animation.getAnimatedValue();
                    if (height > value) {
                        ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
                        layoutParams.height = value;
                        view.setLayoutParams(layoutParams);
                    } else {
                        ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
                        layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
                        view.setLayoutParams(layoutParams);
                    }
                }
            });
            valueAnimator.start();
        }
    }


    public static void slideUp(final View view) {
        if (view != null) {
            view.post(new Runnable() {
                @Override
                public void run() {
                    final int height = view.getHeight();
                    ValueAnimator valueAnimator = ObjectAnimator.ofInt(height, 1);
                    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                        @Override
                        public void onAnimationUpdate(ValueAnimator animation) {
                            int value = (int) animation.getAnimatedValue();
                            if (value > 0) {
                                ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
                                layoutParams.height = value;
                                view.setLayoutParams(layoutParams);
                            } else {
                                view.setVisibility(View.GONE);
                            }
                        }
                    });
                    valueAnimator.start();
                }
            });
        }
    }
}

======================================================================

And Use it into Java file ex.

      if (binding.llTheme.getVisibility() == View.GONE) {
            ViewAnimatorSlideUpDown.slideDown(binding.llTheme);
            binding.llTheme.setVisibility(View.VISIBLE);

        } else {
            binding.llTheme.setVisibility(View.GONE);
            ViewAnimatorSlideUpDown.slideUp(binding.llTheme);
        }

Done. ☻♥ keep it up.

sayleep · Answer 6 · 2017-12-14T18:19:47.203

I had a similar requirement in the app I am working on. And, I found a third-party library which does a slide-up, slide-down and slide-right in Android.

Refer to the link for more details: https://github.com/mancj/SlideUp-Android

To set up the library(copied from the ReadMe portion of its Github page on request):

Get SlideUp library

Add the JitPack repository to your build file. Add it in your root build.gradle at the end of repositories:

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
    maven { url "https://maven.google.com" } // or google() in AS 3.0
  }
}

Add the dependency (in the Module gradle)

dependencies {
    compile 'com.github.mancj:SlideUp-Android:2.2.1'
    compile 'ru.ztrap:RxSlideUp2:2.x.x' //optional, for reactive listeners based on RxJava-2
    compile 'ru.ztrap:RxSlideUp:1.x.x' //optional, for reactive listeners based on RxJava
}

To add the SlideUp into your project, follow these three simple steps:

Step 1:

create any type of layout

<LinearLayout
  android:id="@+id/slideView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

Step 2:

Find that view in your activity/fragment

View slideView = findViewById(R.id.slideView);

Step 3:

Create a SlideUp object and pass in your view

slideUp = new SlideUpBuilder(slideView)
                .withStartState(SlideUp.State.HIDDEN)
                .withStartGravity(Gravity.BOTTOM)

                //.withSlideFromOtherView(anotherView)
                //.withGesturesEnabled()
                //.withHideSoftInputWhenDisplayed()
                //.withInterpolator()
                //.withAutoSlideDuration()
                //.withLoggingEnabled()
                //.withTouchableAreaPx()
                //.withTouchableAreaDp()
                //.withListeners()
                //.withSavedState()
                .build();

You may also refer to the sample project on the link. I found it quite useful.

You should also put in the code that the OP should use instead of just referencing a link... — Kyle Krzeski, Dec 14 '17 at 18:06

Slidedown and slideup layout with animation

6 Answers6

Linked

Related