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 version = "1.0" encoding = "utf-8" ?>
< RelativeLayout 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.
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).