How to Animate Image Rotation in Android?

In Android, ImageView is used to display images. Images can be locally stored in the program or fetched from a network and can be displayed using the ImageView. Animations can be applied to ImageView via many techniques. We can create animations in XML files and apply them to the ImageView. Follow this article to create one: Android Rotate animations in Kotlin. However, animations can be created in runtime and invoked dynamically.

So in this article, we will show you how you could rotate an image using animation in real-time on Android. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Add an image in res > drawable folder

Download an image and copy it into the drawable folder in resources. It should look like shown below.

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. We added an ImageView to display the image and a button, which on click shall start the animation.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view_1"
        android:layout_width="300sp"
        android:layout_height="300sp"
        android:src="@drawable/img"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image_view_1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30sp"
        android:text="rotate"/>

</RelativeLayout>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package org.geeksforgeeks.imagerotationanimation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Declaring and Initializing the
        // ImageView and the Button from the layout file
        val mImageView = findViewById<ImageView>(R.id.image_view_1)
        val mButton = findViewById<Button>(R.id.button_1)

        // When button is clicked,
        // animation is created and started
        mButton.setOnClickListener {
            mImageView.animate().rotation(180f).setDuration(5000).start()
        }
    }
}

Output:

You can see that the image rotates by 180 degrees in 5 seconds (5000 milli-seconds).