Animating Android views
Tags: android
Published: 2022-03-27 07:35:54

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 - 

1. Scale Animation - change size of view
2. Rotate Animation - rotate the view in clockwise and anticlockwise
3. Translate Animation - change in x & y position in layout
4. 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wau5hwr7v7hhr0mbtwc.gif)