How to animate the edge of a view in Android?

Question

I have an ImageView on my UI, I want to animate its left edge moving right: the image itself stay unmoved, but its left part becomes invisible, showing the view underneath. (Think negative margin in CSS).

How can I achieve this?

What I want actually is the Before-After effect like this: https://zurb.com/playground/twentytwenty

My plan is to stack 2 imageViews, when I animate the edge of imageView on the top, the imageView below is partially revealed.

Ideas other than animating the edge is also fine, as long as I can get the effect.

Answer 1

first, you need to create resize animation which makes the view size change like this

note this is a Kotlin code and it is hight change if you need width you need to replace the view

 class ResizeAnimation(var view: View, val targetHight: Int) : Animation() {
    val startWidth: Int = view.height

     override fun applyTransformation(interpolatedTime: Float, t: Transformation) {
        val newHight = (startWidth + (targetHight - startWidth) * interpolatedTime).toInt()
        view.layoutParams.height = newHight
        view.requestLayout()
    }


    override fun willChangeBounds(): Boolean {
        return true
    }
}

next in your activity call it like any another animation example

val anime = ResizeAnimation(view, commentViewHight)
            anime.duration = 250
            anime.fillAfter =true
            view.startAnimation(anime)

since you deal with image view Like the example above change the scale type in your image to "fit end"

note you cannot use this code in oncreate() you need to make sure that the view is visible first to calculate your height/width