Android Rotate animations in Kotlin

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.
rotate-animation

The class hierarchy of RotateAnimation class in Kotlin

AndroidRotate class heirarchy in kotlin

XML attributes which define the rotation of an object

XML Attributes Description
android:pivotX To define the X coordinate of the point about which the object is being rotated
android:pivotY To define the Y coordinate of the point about which the object is being rotated
android:fromDegrees Rotation of the object starts from this geomertical degree
android:toDegrees Rotation of the object ends at this geomertical degree
android:duration Used to define the duration of the animation in millisecond
android:startOffset Used to delay the animation time in millisecond

Approach

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



  1. Click on File, then New => New Project.
  2. Select language as Kotlin.
  3. 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 activty.

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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>

chevron_right


Step 3: Define XML file for clockwise and anticlockwise rotation of the image

Create 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.

rotate_clockwise.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
  
    <rotate
        android:pivotX = "50%"
        android:pivotY = "50%"
        android:fromDegrees = "0"
        android:toDegrees = "360"
        android:duration = "2500"/>
  
</set>

chevron_right


rotate_anticlockwise.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
  
    <rotate
        android:pivotX = "50%"
        android:pivotY = "50%"
        android:fromDegrees = "360"
        android:toDegrees = "0"
        android:duration = "2500"/>
  
</set>

chevron_right


Step 4: Modify MainActivity.kt File
Below is the code for MainActivity.kt file to load and start animation on the ImageView widget according to the button clicked by the user.

MainActivity.kt

filter_none

edit
close

play_arrow

link
brightness_4
code

package com.example.androidrotateanimation
  
import android.os.Bundle
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageView
import 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)
  
        // assiging 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)
        }
    }
}

chevron_right


Step 5: Modify strings.xml File
All the strings which are used in the activity are listed in this file.

strings.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<resources>
    <string name="app_name">Android Rotate Animation</string>
    <string name="heading">Rotate Animation in Android</string>
    <string name="clk_rotate_button_text">Rotate Clockwise</string>
    <string name="anticlk_rotate_button_text">Rotate Anticlokwise</string>
</resources>

chevron_right


Run as Emulator




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.