View blinks after animation

Question

I have problem with any type of animations. I want to make material banner behavior, but with other animations. Actually I got the result, but the problem is that view is blinking after the animation. My code:

First example:

val anim = TranslateAnimation(1f, 1f, 1f, 0f)
anim.duration = 300
banner.startAnimation(anim)
banner.visibility = View.INVISIBLE

Second example

val mTransition = Slide(Gravity.END)
mTransition.setDuration(300)
mTransition.addTarget(banner)

TransitionManager.beginDelayedTransition(banner, mTransition)
banner.setVisibility(View.GONE)

Can someone explain how to avoid blinking of the view and why it is happening.

Answer 1

The problem is on the code banner.visibility = View.INVISIBLE and banner.setVisibility(View.GONE) . Try to remove it.

If you want to the banner is gone after the animation ended. Try to add a listener on the animation and hide the banner after the animation ended:

        val anim = TranslateAnimation(1f, 1f, 1f, 0f)
        anim.duration = 300
        anim.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationRepeat(animation: Animation?) {

            }

            override fun onAnimationEnd(animation: Animation?) {
                // banner.visibility = View.INVISIBLE
                // or
                // banner.setVisibility(View.GONE)
            }

            override fun onAnimationStart(animation: Animation?) {
            }

        })

Answer 2

I solved problem of blinking of the view by animating it on other way. I used following strategy. First of all I used Guideline component of the ConstraintLayout . I constraint my banner to the top of it and place parameter layout_constraintGuide_begin = "0dp" . After that I used ValueAnimator in order to get animated value for my Guideline and changed the guidebegin params of it(see the code).

        val params: ConstraintLayout.LayoutParams = guideline2.layoutParams as ConstraintLayout.LayoutParams

        animBanner = ValueAnimator.ofInt(0, banner.height + toolbar.height)

        animBanner!!.addUpdateListener {
            params.guideBegin = it.getAnimatedValue() as Int
            guideline2.layoutParams = params
        } 

This is the declaration of animation. At the end it is enough to use animBanner.start() for starting the animation and animBanner.reverse() for reverse animation (hiding banner).

Answer 3

I understand what was my problem with the help of @John Lee, but it solution does not was suitable for me, so I used Guideline component with AnimatedValue . My solution:

params = view.layoutParams as ConstraintLayout.LayoutParams
    anim = ValueAnimator.ofInt(fromY, toY)
    anim.addUpdateListener {
        params.guideBegin = it.animatedValue as Int
        view.layoutParams = params
    }

So, here fromY value is 0, toY value is height of banner and view is Guideline , which could received by view.height . I should mention that first my banner is constrained to top of Guideline , which is placed at constraintGuide_begin=0 . Then I animated this guideline with help of code above and using anim.start() , anim.reverse() methods.