Rotate Animation - How to rotate image using animation in Android Studio by using Kotlin.
Last updated Dec 15, 2021 In this android example tutorial, we will see how to set rotate animation a image in Android Studio using Kotlin Language.
Implementation:
Create a new Project in android studio.
|
Go to File > New > New Project > Empty Activity > Next > Enter Name > Select Language Kotlin > Finish
|
Go to activity_rotate_animation.xml file and add the following code
|
<LinearLayout 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:gravity="center"
android:background="#DDC9C8"
android:orientation="vertical"
tools:context=".RotateAnimation">
<ImageView
android:id="@+id/image1"
android:layout_width="200dp"
android:layout_height="150dp"
android:src="@drawable/android2"
android:scaleType="centerCrop"></ImageView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:weightSum="2"
android:orientation="horizontal"
>
<Button
android:id="@+id/left"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:text="Rotate Left"></Button>
<Button
android:id="@+id/right"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Rotate Right"></Button>
</LinearLayout>
</LinearLayout>
|
Open RotateAnimation.kt file and create instance of views by "id" which is available in activity_rotate_animation.xml file.
|
val left = findViewById(R.id.left)
val right = findViewById(R.id.right)
val image = findViewById(R.id.image1)
|
We will use animate() method on image for rotate the image.
|
image.animate().apply {
duration = 2000
rotationYBy(360f)
rotationY(360f)
}.start()
|
Add the following code to the RotateAnimation.kt file
|
right.setOnClickListener {
image.animate().apply {
duration = 2000
rotationYBy(360f)
rotationY(360f)
}.start()
}
left.setOnClickListener{
image.animate().apply {
duration = 2000
rotationYBy(-360f)
rotationY(-360f)
}.start()
}
|
Now run the code in your emulator or device, you will get the following output as in the video below.
Complete Source code of Rotate Animation Example:
activity_rotate_animation.xml file
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center"
android:background="#DDC9C8"
android:orientation="vertical"
tools:context=".RotateAnimation">
<ImageView
android:id="@+id/image1"
android:layout_width="200dp"
android:layout_height="150dp"
android:src="@drawable/android2"
android:scaleType="centerCrop"></ImageView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:weightSum="2"
android:orientation="horizontal"
>
<Button
android:id="@+id/left"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:text="Rotate Left"></Button>
<Button
android:id="@+id/right"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Rotate Right"></Button>
</LinearLayout>
</LinearLayout>
|
RotateAnimation.kt file
|
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import com.nishajain.kotinexamples.R
class RotateAnimation : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_rotate_animation)
val left = findViewById(R.id.left)
val right = findViewById(R.id.right)
val image = findViewById(R.id.image1)
right.setOnClickListener {
image.animate().apply {
duration = 2000
rotationYBy(360f)
rotationY(360f)
}.start()
}
left.setOnClickListener{
image.animate().apply {
duration = 2000
rotationYBy(-360f)
rotationY(-360f)
}.start()
}
}
}
|
Conclusion: We have covered how to rotate animation on image in Android using kotlin language.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center"
android:background="#DDC9C8"
android:orientation="vertical"
tools:context=".RotateAnimation">
<ImageView
android:id="@+id/image1"
android:layout_width="200dp"
android:layout_height="150dp"
android:src="@drawable/android2"
android:scaleType="centerCrop"></ImageView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:weightSum="2"
android:orientation="horizontal"
>
<Button
android:id="@+id/left"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:text="Rotate Left"></Button>
<Button
android:id="@+id/right"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Rotate Right"></Button>
</LinearLayout>
</LinearLayout>
RotateAnimation.kt file
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import com.nishajain.kotinexamples.R
class RotateAnimation : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_rotate_animation)
val left = findViewById(R.id.left)
val right = findViewById(R.id.right)
val image = findViewById(R.id.image1)
right.setOnClickListener {
image.animate().apply {
duration = 2000
rotationYBy(360f)
rotationY(360f)
}.start()
}
left.setOnClickListener{
image.animate().apply {
duration = 2000
rotationYBy(-360f)
rotationY(-360f)
}.start()
}
}
}
|
Conclusion: We have covered how to rotate animation on image in Android using kotlin language.
-->
