Android Rotate animations in Kotlin - GeeksforGeeks

03 Mar, 2022
Rotate animation is a special kind of animation in Android which controls the Rotation of an object. These type of animations are usually used by developers to give a feel to the user about the changes happening in the application like loading content, processing data, etc. By using the rotate animation effect, an object can be rotated in the X-Y plane of activity and it allows the rotation in both Clockwise and Anticlockwise direction. 
This example demonstrates the steps involved in implementing the clockwise and anticlockwise rotation animation to an image file. An image file will be added in the activity using ImageView.
Note: The steps are performed on Android Studio version 4.0
Step 1: Create a New Project 
Click on File, then New => New Project.Select language as Kotlin.Select the minimum SDK as per your need.
Click on File, then New => New Project.
Select language as Kotlin.
Select the minimum SDK as per your need.
Step 2: Modify activity_main.xml file 
Below is the code for activity_main.xml file to add a TextView, ImageView, and 2 buttons in an activity.
Filename: activity_main.xml
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#168BC34A"    tools:context=".MainActivity" >     <TextView        android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:fontFamily="@font/roboto"        android:text="@string/heading"        android:textAlignment="center"        android:textColor="@android:color/holo_green_dark"        android:textSize="36sp"        android:textStyle="bold"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.050000012" />     <ImageView        android:id="@+id/imageView"        android:layout_width="243dp"        android:layout_height="241dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/textView"        app:layout_constraintVertical_bias="0.19999999"        app:srcCompat="@drawable/logo" />     <Button        android:id="@+id/clk_rotate_button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#AB4CAF50"        android:fontFamily="@font/roboto"        android:text="@string/clk_rotate_button_text"        android:textSize="14sp"        android:textStyle="bold"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.12"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/imageView"        app:layout_constraintVertical_bias="0.7" />     <Button        android:id="@+id/anticlk_rotate_button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#AB4CAF50"        android:fontFamily="@font/roboto"        android:text="@string/anticlk_rotate_button_text"        android:textStyle="bold"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.78"        app:layout_constraintStart_toEndOf="@+id/clk_rotate_button"        app:layout_constraintTop_toBottomOf="@+id/imageView"        app:layout_constraintVertical_bias="0.7" /></androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Define XML file for clockwise and anticlockwise rotation of the imageCreate a new directory in the res folder of the application and name it anim. In this directory create 2 Animation Resource File namely rotate_clockwise and rotate_anticlockwise. These 2 files are the XML file which holds the details of the animation. Below is the code for both the file. 
Filename: rotate_clockwise.xml
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">     <rotate        android:pivotX = "50%"        android:pivotY = "50%"        android:fromDegrees = "0"        android:toDegrees = "360"        android:duration = "2500"/> </set>
Filename: rotate_anticlockwise.xml
XML
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">     <rotate        android:pivotX = "50%"        android:pivotY = "50%"        android:fromDegrees = "360"        android:toDegrees = "0"        android:duration = "2500"/> </set>
Step 4: Modify MainActivity.kt File Below is the code for MainActivity.kt file to load and start the animation on the ImageView widget according to the button clicked by the user.
Filename: MainActivity.kt
Java
package com.example.androidrotateanimation import android.os.Bundleimport android.view.animation.AnimationUtilsimport android.widget.Buttonimport android.widget.ImageViewimport androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity() {     override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)         // assigning id of button which rotates        // the image in clockwise direction        val clk_button: Button = findViewById(R.id.clk_rotate_button)         // assigning id of button which rotates        // the image in anti-clockwise direction        val anticlk_button: Button = findViewById(R.id.anticlk_rotate_button)         // assigning id of imageview        // which is to be rotated        val image: ImageView = findViewById(R.id.imageView)         // actions to be performed when        // "rotate clockwise" button is clicked        clk_button.setOnClickListener()        {             // loading the animation of            // rotate_clockwise.xml file into a variable            val clk_rotate = AnimationUtils.loadAnimation(                this,                R.anim.rotate_clockwise            )             // assigning that animation to            // the image and start animation            image.startAnimation(clk_rotate)        }         // actions to be performed when        // "rotate anticlockwise" button is clicked        anticlk_button.setOnClickListener()        {             // loading the animation of            // rotate_anticlockwise.xml file into a variable            val anticlk_rotate = AnimationUtils.loadAnimation(                this,                R.anim.rotate_anticlockwise            )             // assigning that animation to            // the image and start animation            image.startAnimation(anticlk_rotate)        }    }}
simmytarika5
surindertarika1234
sweetyty
Android-Animation
Picked
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Android RecyclerView in Kotlin
CardView in Android With Example
Content Providers in Android with Example
Broadcast Receiver in Android With Example
Android UI Layouts
Android RecyclerView in Kotlin
Content Providers in Android with Example
Retrofit with Kotlin Coroutine in Android