Animating Android views

Himanshu Tiwari — Sun, 27 Mar 2022 07:35:54 +0000

Hello World!,
Android app without animation looks incomplete, and with rapid growth in architecture android we are missing out animations but lets remember some core roots

This consist of 4 major categories of animation -

Scale Animation - change size of view
Rotate Animation - rotate the view in clockwise and anticlockwise
Translate Animation - change in x & y position in layout
Alpha Animation - change in transparency

I would like to cover the Translate animation and moving any views in directions for this blog taking imageViews moving up.
Animation Layer: It is a simple frame layout lying on top of any of the fragment where our views will be created and animated.

<FrameLayout
        android:id="@+id/animation_holder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

This layout class contains basic 3 functions
create: Here we create a imageView and attach to the animation_holder

fun create(): FrameLayout? {

        val imageView = ImageView(activity)
        imageView.setImageBitmap(mBitmap)
        val minWidth = mBitmap!!.width
        val minHeight = mBitmap!!.height
        imageView.measure(
            View.MeasureSpec.makeMeasureSpec(minWidth, View.MeasureSpec.AT_MOST),
            View.MeasureSpec.makeMeasureSpec(minHeight, View.MeasureSpec.AT_MOST)
        )
        var params = imageView.layoutParams
        if (params == null) {
            params = FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.WRAP_CONTENT,
                FrameLayout.LayoutParams.WRAP_CONTENT,
                Gravity.TOP
            )
            imageView.layoutParams = params
        }
        val xPosition = mDrawLocation[0]
        val yPosition = mDrawLocation[1]
        params.width = minWidth
        params.height = minHeight
        params = params as FrameLayout.LayoutParams
        params.leftMargin = xPosition
        params.topMargin = yPosition
        imageView.layoutParams = params
        val animationLayer = FrameLayout(activity)
        val topLayerParam = FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.MATCH_PARENT,
            FrameLayout.LayoutParams.MATCH_PARENT,
            Gravity.TOP
        )
        animationLayer.layoutParams = topLayerParam
        animationLayer.addView(imageView)
        attachingView!!.addView(animationLayer)
        mCreatedAnimationLayer = animationLayer

        return mCreatedAnimationLayer
    }

applyAnimation: here we start the animation on the imageView Added

fun applyAnimation(animation: Animation?) {
        if (mCreatedAnimationLayer != null) {
            val drawnImageView = mCreatedAnimationLayer!!.getChildAt(0) as ImageView
            drawnImageView.startAnimation(animation)
        }
    }

setBitmap: here will set the bitmap to global variable which is referenced above

fun setBitmap(bitmap: Bitmap?, location: IntArray?): AnimationLayer {
        var location = location
        if (location == null) {
            location = intArrayOf(0, 0)
        } else if (location.size != 2) {
            throw AnimationLayerException("Requires location as an array of length 2 - [x,y]")
        }
        mBitmap = bitmap
        mDrawLocation = location
        return this
    }

Now, we can create a animation with properties needed

// here destination is part where we want to fly the view //upto in x & y for us it is height of the layout  
val animation = TranslateAnimation(
                    0F,
                    destinationX, 0f, DestinationY
                )
//amount of time to travel the distance
animation.duration = duration.toLong()
//animation will start after this much time
animation.startOffset = 0L
// create instance of above layer and apply animation
val layer = AnimationLayer()
 val animationLayer = layer.with(activity)
                    .attachTo(parentView)
                    .setBitmap(scaledBitmap, startingPoints)
                    .create()
// after all the part is ready we can call applyanimation
layer.applyAnimation(animation)

Process is completed you can get the animation like

Forem: Himanshu Tiwari

Animating Android views