Android Jetpack Compose - Rotation Animation

Last Updated : 23 Jul, 2025

Jetpack Compose is a new UI toolkit from Google used to create native Android UI. It speeds up and simplifies UI development using less code, Kotlin APIs, and powerful tools.

Prerequisites:

  1. Familiar with Kotlin and OOP Concepts as well
  2. Basic understanding of Jetpack Compose

Steps to Implement Rotation Animation

Step 1: Create a new android studio project

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Note: Select Kotlin as the programming language.

Step 2: Working with MainActivity.kt

  • Column: The column is composable and places its children in a vertical sequence. It is comparable to a LinearLayout in that it is vertically oriented. Additionally, we add a modifier to the column.
  • Modifier:  Modifiers serve as examples of the decorator pattern and are used to alter the composable to which they are applied. In this case, we use the Modifier to set the Column up to take up the whole available width and height using the Modifier.fillMaxSize() modifier.
  • Canvas: We use the Canvas composable that gives you access to a canvas that you can draw into.
    • drawRect() - Draw a rectangle
    • drawRoundRect() - Draw round rectangle
    • drawCircle() - Draw a circle
    • drawArc() - Draw an arc
    • drawImage() - Draw an Image or use an image as animation
    • drawLine() - Draw a line
    • drawOval() - Draw an oval
    • drawPoints() - Draw points
  • rotate: Adds a rotation (in degrees clockwise) to the current transform at the given pivot point.

MainActivity.kt:

Kotlin 
package com.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.*
import androidx.activity.compose.setContent
import androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.unit.dp
import com.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DemoTheme(dynamicColor = false, darkTheme = false) {
                Column(
                    Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    RotatingSquareComponent()
                }
            }
        }
    }
}

@Composable
fun RotatingSquareComponent() {
    // to create infinite transitions
    val infiniteTransition = rememberInfiniteTransition()

    // Create a value that is altered by the transition based on the
    // configuration. We use the animated float value the returns and
    // updates a float from the initial value to
    // target value and repeats it
    // (as its called on the infiniteTransition).
    val rotation by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            animation = tween<Float>(
                durationMillis = 3000,
                easing = FastOutLinearInEasing,
            ),
        )
    )

    Canvas(modifier = Modifier.size(250.dp)) {
        // As the Transition is changing the interpolating the value
        // of the animated float "rotation", you get access to all
        // the values including the intermediate values as
        // its  being updated. The value of "rotation" goes from
        // 0 to 360 and transitions infinitely due to the
        // infiniteRepeatable animationSpec used above.
        rotate(rotation) {
            drawRect(color = Color(50, 205, 50))
        }
    }
}

Output:

Comment

Explore