Animation when modifying Linearlayout height

Asked

Viewed 121 times

0

I’m changing the height of a LinearLayout of WRAP_CONTENT for 0 (zero) and vice versa listening to the event onClick of a Button.

I would like this change to occur gradually over a few milliseconds, like 700ms, for example. How do I do this using as little code as possible?

Excerpt from the code:

    LinearLayout ll = (LinearLayout) findViewById(R.id.teste);
ll.setOnClickListener(new View.onClickListener() {
    @Override
    public void onClick (View v){
        ViewGroup.LayoutParams params = v.getLayoutParams();
        params.height = 0;
        v.setLayoutParams(params);
    }
});

This changes the height to zero, but no transition.

EDITED: The effect is similar to that link but vertically

android android-layout

  • I would recommend using ObjectAnimator or ViewPropertyAnimator, or even the attribute animateLayoutChanges, nothing Threads :P But really, if the relevant code where you are making this modification gets complicated help.

  • It’s because I’m only changing the height of Linearlayout, so I didn’t add code... I’ll add

  • Blz, I’ll give you a hint as soon as I put in the code.

  • In the code I am testing with Click on the element itself, then I will only change this Click to a button, but with the effect in Linearlayout.

2 answers

4


The answer has four stages:

  1. Get the final size of your container;
  2. Get the initial size;
  3. Create a ValueAnimator to vary from initial size to final size in 700ms;
  4. Set the height value and resize the container with each iteration of the ValueAnimator.
Button button = ...; //Seu button
LinearLayout ll = (LinearLayout) findViewById(R.id.teste);

button.setOnClickListener(new View.onClickListener() {
    @Override
    public void onClick (View v){
        final ViewGroup.LayoutParams params = ll.getLayoutParams();

        int finalHeight = 0;
        int initialHeight = ll.getHeight();

        ValueAnimator va = ValueAnimator.ofInt(initialHeight, finalHeight);

        va.setDuration(700);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                params.height = (Integer) animation.getAnimatedValue();
                ll.requestLayout();
            }
        });

        va.start();
    }
});

  • Unnecessary Unboxing "value.intValue()". Also not changing the height of the element.

  • In fact, I’ve noticed the problem of your code, I’ll adjust it. You were setting the clickListener in Linearlayout, not the button.

  • Legal the Wakim approach. + 1

  • I added 2 Logs, one for Clicklistener and one for Updatelistener. Only the click is detected. How to trigger Updatelistener?

  • Well remembered, missed start the animation, my mistake.

  • I changed the duration to 2000, after pressing the button it is taking 2000ms to reduce the size of Linearlayout, and when it decreases it is at once without transition effect. Updatelistener Log is appearing several times, I believe it is the element reduction progress, but in UI is not working

  • I’ll edit the question because it’s ambiguous.

  • @Jhonatanpereira, as I understand it, is working by increasing the height but does not work by decreasing? Or not at all? I was left with this doubt.

  • @Wakim’s it decreases the height, but not by stages. That is, it goes from X pixels to direct zero, no effect. I left an example in the question, made with HTML and CSS.

  • These milliseconds are only delaying (delay) the change in height

  • Ah blz, I’m going to do a test here on a device. I believe that if the variation is 0 until the desired value it works, otherwise the desired value until 0 is strange (in this case just do the opposite).

  • @Jhonatanpereira, set the point where you regain height. If you use wrap_content, the LayoutParams.height will return -2. In case you need to use the View.getHeight.

  • It worked! Thanks, man :D

Show 8 more comments

1

Well, since you were specific in the amount of code, the best outcome would be this:

LinearLayout ll = (LinearLayout) findViewById(R.id.teste);
ll.setOnClickListener(new View.onClickListener() {
    @Override
    public void onClick (View v){
        ViewGroup.LayoutParams params = v.getLayoutParams();
        params.height = 0;
        ll.postDelayed(new Runnable() {
                public void run() {
                    v.setLayoutParams(params);
                }, 700);
        ll.getLayoutParams().height = originaltamanhodoseulayout
    }
});

Voce needs to know the original height of its "ll" to return it to the original alttura later.
Explaining:
it runs in the background for 700ms leaving the "ll" with height = 0 and when finished reverts it to the original height.

I believe that with smaller lines of code would be this, I already use it here with positive result, although for other purposes.

of a conferred

  • I will test in a little while. I will edit the question, because it is ambiguous, take a look to see if it is compatible with your answer.

Browser other questions tagged android android-layout

You are not signed in. Login or sign up in order to post.