Smooth animateLayoutChanges animation

Question

I am trying to slid a view from the bottom of the screen and collapse another view a little everything will fit correctly.

I have managed to do that with the attribute animateLayoutChanges and 2 simple xml animations slid_up.xml and slid_down.xml.

My problem is that the animation that happens to ViewPager from the attribute animateLayoutChanges isn't smooth.

Is there a way to fix that?

slid_up.xml

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

slid_down.xml

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

P.S. I have tried to create custom animators as Height animators but it messes with the original height of the view.

HeightResizeAnimation

public class HeightResizeAnimation extends Animation {
    private View mView;
    private float mToHeight;
    private float mFromHeight;
    private int duration = 300;

    public HeightResizeAnimation(View v, float offset) {
        mView = v;
        mToHeight = v.getHeight() + offset;
        mFromHeight = v.getHeight();
        setDuration(duration);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        float newHeight = (mToHeight - mFromHeight) * interpolatedTime + mFromHeight;
        mView.getLayoutParams().height = (int) newHeight;
        mView.requestLayout();
    }
}

after the animation the height will no longer be as match_parent that was before the animation.

Update Here is the animation that happens now

You can see that the fab animation to bottom isn't smooth also for the viewpager that the fab is child

Can you post the video of what you want to animate and we will update accordingly. No need for requestLayout() if using animation attributes. — Anurag Singh, Feb 20 '17 at 14:52
the requestLayout isn't exactly a problem, the problem with the HeightResizeAnimation was if I change the view from portrait to landscape the height will no longer be match_parent that was before the Animation — gmetax, Feb 20 '17 at 14:57
@AnuragSingh I have added and a video and a gif that is showing the animation that I like — gmetax, Feb 20 '17 at 16:21

score 1 · Answer 1 · answered Feb 20 '17 at 17:52

1

It seems like you just want to show a snackbar + move the FAB along with it as it shows? To do so you could use a combination of Snackbar and CoordinatorLayout from the Android Support Library: http://www.androidhive.info/2015/09/android-material-design-snackbar-example/

answered Feb 20 '17 at 17:52

Piotr Zawadzki

1,678
1
18
24

so the `Liked!` is a snackbar, so it is something like toast. Thanks a lot for your answer but it isn't what I want. – gmetax Feb 21 '17 at 09:26
Hi @gmetax, looking at the updated animation I'd still say it should be a snackbar but with a custom view inside (https://material.io/guidelines/components/snackbars-toasts.html#) You can check this out: http://stackoverflow.com/questions/32453946/how-to-customize-snackbars-layout Using a snackbar would probably help you with the smoothness of your animation as it is shown on top of the other views and it does not change the height of the views below. – Piotr Zawadzki Feb 21 '17 at 12:53
but the snackbar is time limited. :/ – gmetax Feb 21 '17 at 13:19
after all the solution was to use the `android:clipChildren="false"` – gmetax Feb 21 '17 at 14:57
@gmetax glad you found your solution :) FYI Snackbar does not have to be time limited - see https://developer.android.com/reference/android/support/design/widget/Snackbar.html#LENGTH_INDEFINITE – Piotr Zawadzki Feb 21 '17 at 17:22
1

you are right, thanks for your help I have upvoted your answer. – gmetax Feb 22 '17 at 10:48

Anurag Singh · Answer 2 · 2017-02-21T11:57:51.730

In your xml layout add the following in the View:

android:visibility="gone"
android:alpha="0"
android:id="@+id/text_view_liked"

I am asumming the view to be TextView. On the click of ImageView liked animate the text_view_liked with the following:

    final TextView textViewLiked = (TextView) findViewById(R.id.text_view_get_liked);
    final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

    PropertyValuesHolder pvhYTextViewLiked = PropertyValuesHolder
        .ofFloat(View.Y,
            textViewLiked.getBottom(),
            (textViewLiked.getBottom() - textViewLiked.getHeight()));

    PropertyValuesHolder pvhAlphaTextViewLiked = PropertyValuesHolder
        .ofFloat(View.ALPHA, 0f, 1f);

    ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(textViewLiked,
        pvhYTextViewLiked,
        pvhAlphaTextViewLiked);

    ObjectAnimator objectAnimatorFab = ObjectAnimator.ofFloat(fab, View.Y, fab.getY(),
        fab.getY() - textViewLiked.getHeight());

    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.play(objectAnimator).with(objectAnimatorFab);
    animatorSet.addListener(new AnimatorListenerAdapter() {

      @Override
      public void onAnimationStart(Animator animation) {
        super.onAnimationStart(animation);
        textViewLiked.setVisibility(View.VISIBLE);
      }

      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);

        new Handler().postDelayed(new Runnable() {
          @Override
          public void run() {

            PropertyValuesHolder pvhYTextViewLiked = PropertyValuesHolder
                .ofFloat(View.Y,
                    textViewLiked.getTop(),
                    (textViewLiked.getTop() + textViewLiked.getHeight()));

            PropertyValuesHolder pvhAlphaTextViewLiked = PropertyValuesHolder
                .ofFloat(View.ALPHA, 1f, 0f);

            ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(textViewLiked,
                pvhYTextViewLiked,
                pvhAlphaTextViewLiked);

            ObjectAnimator objectAnimatorFab = ObjectAnimator.ofFloat(fab, View.Y, fab.getY(),
                fab.getY() + textViewLiked.getHeight());

            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.play(objectAnimator).with(objectAnimatorFab);
            animatorSet.addListener(new AnimatorListenerAdapter() {
              @Override
              public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                textViewLiked.setVisibility(View.GONE);
              }
            });
            animatorSet.start();
          }
        }, 1000);

      }
    });

You can adjust the duration accordingly

new Handler is created just to automate the process of progress indicator is finished. You can just call on the finish of progress indicator.

You haven't understand the question. I don't want to create exactly like the `Liked!` but that is showing in the video. If I wanted to create the `Liked!` I would go with @Piotr Zawadzki answer. But tried your answer to check if the fab will have a smoother animation but it didn't had. — gmetax, Feb 21 '17 at 09:57
Snackbar has a limited time duration. You want to show progress indicator, inside that. My View can be view group. But Snackbar cann't. Also Snacbar width dosen't covers the whole screen width in tablet. Also, do let me know what I am missing. Do you want to move fab up and down as the view slides up and down with smooth transition? — Anurag Singh, Feb 21 '17 at 11:08
your example was based on the `Liked!` view. I know the limitations of snackbar and I know I cannot use it as I want. If you see the gif on my question you will see that the fab isn't moving down smoothly and the viewpager(white background) also isn't moving smoothly — gmetax, Feb 21 '17 at 11:17
Updated the answer with fab. Adjust accordingly and do let me know — Anurag Singh, Feb 21 '17 at 11:58
after all the solution was to use the `android:clipChildren="false"` — gmetax, Feb 21 '17 at 14:57
Glad to know. I have used in my XML. But it is for scaling beyond bounds. Thank-you — Anurag Singh, Feb 21 '17 at 15:41

gmetax · Accepted Answer · 2017-02-22T10:47:09.870

0

After all the solution was to use the android:clipChildren="false"

As can be seen on the gif, the FAB is getting cropped while it is going down to the original position. So after I have used the android:clipChildren="false" on the parent of the FAB viewPager then the FAB isn't getting cropped anymore.

edited Feb 22 '17 at 10:47

answered Feb 21 '17 at 14:57

gmetax

3,853
2
31
45

1

Please post the whole code, showing where you have used android:clipChildren="false" – Rosário Pereira Fernandes Feb 21 '17 at 15:38
it will not be easy to read if I put all the xml's of the layout. – gmetax Feb 22 '17 at 10:47

Smooth animateLayoutChanges animation

3 Answers3