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.

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

81 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions