ConstraintLayout Guideline Percent Animation

Question

I'm fairly new on using ConstraintLayout (java).

What I want to achieve is something like when the numpad is being shown/hidden as a slide animation, I've tried something like this:

Animation a = new Animation() {
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        ConstraintLayout.LayoutParams lparams = (ConstraintLayout.LayoutParams) guideline.getLayoutParams();
        lparams.guidePercent = 0.5f;
        guideline.setLayoutParams(lparams);
    }
};
a.setDuration(3000);
a.setFillAfter(true);
guideline.startAnimation(a);

Yes, the guideline (and corresponding views that is attached to it) is being moved to the center of the screen but it is not as smooth as it is supposed to be. Is there a way to achieve the smoothness of the animation?

Any suggestion would be much appreciated!

Answer 1

You can use a ValueAnimator

Sample in Kotlin.

    val guideline = findViewById<View>(R.id.guideline2) as Guideline
    val end = (guideline.layoutParams as ConstraintLayout.LayoutParams).guidePercent
    // get end percent. start at 0
    val valueAnimator = ValueAnimator.ofFloat(0f, end)
    valueAnimator.duration = 3000
    // set duration 
    valueAnimator.interpolator = AccelerateDecelerateInterpolator()
    // set interpolator and  updateListener to get the animated value
    valueAnimator.addUpdateListener { valueAnimator ->
        val lp = guideline.layoutParams as ConstraintLayout.LayoutParams
        // get the float value
        lp.guidePercent = valueAnimator.animatedValue as Float
        // update layout params
        guideline.layoutParams = lp
    }
    valueAnimator.start()

Java Version

 final Guideline guideline = findViewById(R.id.guideline2) ;
 ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams)guideline.getLayoutParams();
 float end =lp.guidePercent;
 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, end);
 valueAnimator.setDuration(3000);
 valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams)guideline.getLayoutParams();
                lp.guidePercent = valueAnimator.getAnimatedFraction();
                guideline.setLayoutParams(lp);

            }
 });

Answer 2

Try animating your layout with ConstraintSet. See Beautiful animations using Android ConstraintLayout.

[T]here is one other benefit of ConstraintLayout that most people are unaware of and the official documentation curiously doesn’t mention anything about: performing cool animations on your ConstraintLayout views with very little code.

There are other sources and some videos on this technique. I think that you will find it a smoother way to do what you are trying to do.