Android

How to Rotate Images Clockwise and Counterclockwise in Android using Kotlin

In this tutorial, you'll learn how to dynamically rotate images both clockwise and counterclockwise in an Android app using Kotlin. This involves programmatically manipulating the ImageView using the Matrix class to achieve smooth and responsive image rotation based on user interactions or other application logic.
Submitted on July 07, 2024

To create an Android app that allows users to rotate an image both clockwise and counterclockwise, we'll build a simple application using Kotlin. Here's a step-by-step guide:

Step 1: Set up a new Android project

  1. Create a new Android Studio project:
    • Open Android Studio.
    • Click on "Create New Project."
    • Choose "Empty Activity" and click "Next."
    • Enter your project details (e.g., name, package name, language).
    • Click "Finish" to create the project.

Step 2: Design the layout

  1. Modify the layout XML (activity_main.xml):

    • Open res/layout/activity_main.xml.
    • Replace the existing content with the following layout code. This includes an ImageView to display the image and two buttons for clockwise and counterclockwise rotation.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerInside"
        android:src="@drawable/your_image" />

    <Button
        android:id="@+id/btnRotateClockwise"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:text="Rotate Clockwise" />

    <Button
        android:id="@+id/btnRotateCounterclockwise"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        android:text="Rotate Counterclockwise" />

</RelativeLayout>
  • Replace @drawable/your_image with the image you want to initially display.

Step 3: Implement the rotation functionality

  1. Open MainActivity.kt:

    • Navigate to MainActivity.kt under java/<your_package_name>/.
    • Implement the rotation logic inside onCreate method.

  2. Rotate image clockwise and counterclockwise:

    • Use Matrix to apply rotations to the ImageView.

import android.graphics.Matrix
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var imageView: ImageView
    private lateinit var btnRotateClockwise: Button
    private lateinit var btnRotateCounterclockwise: Button

    private var currentRotation = 0f

    @Override
    fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        imageView = findViewById(R.id.imageView)
        btnRotateClockwise = findViewById(R.id.btnRotateClockwise)
        btnRotateCounterclockwise = findViewById(R.id.btnRotateCounterclockwise)

        // Set initial rotation
        imageView.rotation = currentRotation

        btnRotateClockwise.setOnClickListener {
            rotateImage(90f)
        }

        btnRotateCounterclockwise.setOnClickListener {
            rotateImage(-90f)
        }
    }

    private fun rotateImage(degrees: Float) {
        currentRotation += degrees
        val matrix = Matrix()
        matrix.postRotate(currentRotation)
        imageView.imageMatrix = matrix
        imageView.invalidate()
    }
}

Step 4: Run the application

  1. Connect your Android device or start an emulator:

    • Ensure your device is connected via USB and USB debugging is enabled, or start an emulator from Android Studio.

  2. Run the application:

    • Click on the "Run" button in Android Studio to build and deploy the app on your device/emulator.

  3. Test the rotation functionality:

    • Once the app is installed and running, press the "Rotate Clockwise" and "Rotate Counterclockwise" buttons to rotate the image accordingly.

Notes:

  • Permissions: Ensure your app has appropriate permissions if you are accessing images from external storage or the internet.
  • UI Design: You can further enhance the UI with additional features like zooming, panning, etc., based on your requirements.
  • Error Handling: Implement error handling and validation as needed, especially when dealing with user interactions and image loading.

This example provides a basic implementation of rotating an image in both clockwise and counterclockwise directions using matrix transformations.