Android Animations - Rotate,Scale,Translate,Zoom animations in Android

Published January 31, 2020


Android Animations - Rotate,Scale,Translate,Zoom animations  in Android
Lets' Start

Step 1:  Create Android Application

Step 2:  Update xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="https://schemas.android.com/apk/res/android"
        xmlns:tools="https://schemas.android.com/tools"
        xmlns:app="https://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        tools:context=".MainActivity">

    <ImageView
            android:layout_width="wrap_content"
            android:id="@+id/image"
            android:layout_centerInParent="true"
            android:src="@drawable/beem"

            android:layout_height="200dp"/>
    <LinearLayout android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:id="@+id/lnr_one"

    >
        <Button android:layout_margin="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Rotate"
                android:background="@color/colorPrimary"
                android:textColor="#FFF"
                android:id="@+id/btn_rotate"/>
        <Button android:layout_margin="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Zoom"
                android:background="@color/colorPrimary"
                android:textColor="#FFF"
                android:id="@+id/btn_zoom"/>
    </LinearLayout>

    <LinearLayout android:layout_width="wrap_content"
                  android:layout_height="wrap_content"

    >
        <Button android:layout_margin="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="scale"
                android:background="@color/colorPrimary"
                android:textColor="#FFF"
                android:id="@+id/btn_scale"/>
        <Button android:layout_margin="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Translate"
                android:background="@color/colorPrimary"
                android:textColor="#FFF"
                android:id="@+id/btn_translate"/>
    </LinearLayout>

</LinearLayout>

 

Step 3:  Add Animations

create anim folder inside res folder and add below animation files

zoom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <scale android:fromXScale ="1"
           android:fromYScale ="1"
           android:toXScale ="2"
           android:toYScale ="2"
           android:pivotY ="50%"
           android:pivotX ="50%"
           android:duration ="2000" />
</set>

 

transperency.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha = "0"
           android:toAlpha = "1"
           android:duration = "2000" />
</set>

 

rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <rotate android:fromDegrees = "0"
            android:toDegrees = "360"
            android:pivotX = "50%"
            android:pivotY = "50%"
            android:duration = "2000" />
</set>

 

translate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <translate android:fromXDelta ="0"
               android:fromYDelta ="0"
               android:toXDelta ="300"
               android:toYDelta ="300"
               android:duration ="2000" />
</set>

 

Step 4: Update MainActivity
package com.rrtutors.tweenanimation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*
import android.view.animation.AnimationUtils
import android.icu.lang.UCharacter.GraphemeClusterBreak.T



class MainActivity : AppCompatActivity(),View.OnClickListener {
    override fun onClick(v: View?) {
        when(v?.id)
        {
            R.id.btn_rotate->{
                val anim = AnimationUtils.loadAnimation(this@MainActivity, R.anim.rotate)
                // Start animation
                image.startAnimation(anim)
            }
            R.id.btn_zoom->{
                val anim = AnimationUtils.loadAnimation(this@MainActivity, R.anim.zoom)
                // Start animation
                image.startAnimation(anim)
            }
            R.id.btn_scale->{
                val anim = AnimationUtils.loadAnimation(this@MainActivity, R.anim.transprency)
                // Start animation
                image.startAnimation(anim)
            }
            R.id.btn_translate->{
                val anim = AnimationUtils.loadAnimation(this@MainActivity, R.anim.translate)
                // Start animation
                image.startAnimation(anim)
            }
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btn_rotate.setOnClickListener(this)
        btn_zoom.setOnClickListener(this)
        btn_scale.setOnClickListener(this)
        btn_translate.setOnClickListener(this)
    }
}

 

Step 5: Run Application and check the effect


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

659 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions