Android Jetpack Compose - Rotation Animation

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:

Output: