Android

Learn to Rotate Images with Left and Right Buttons in Android

In this tutorial, you will learn how to develop an Android application using Kotlin that enables users to rotate an image using left and right buttons. The tutorial will guide you through implementing logic to adjust the rotation angle of an ImageView each time a button is clicked. You'll explore how to handle user interactions with buttons to increment or decrement the rotation angle, update the ImageView dynamically, and ensure smooth visual feedback as the image rotates. By following this step-by-step guide, you'll gain practical experience in managing image transformations, handling button clicks, and enhancing user interaction through rotational functionality in your Kotlin-based Android applications.
Submitted on July 07, 2024

To create an Android app that allows rotating an image using left and right buttons, you'll need to implement logic to rotate the image by a certain degree each time a button is clicked. Here's a step-by-step guide to achieve this using Kotlin:

Step-by-Step Implementation

1. Add an ImageView and Buttons to activity_main.xml:

  • Open ‘res/layout/activity_main.xml’ and add an ImageView for displaying the image, and two Button widgets for rotating the image left and right.

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/sample_image"
        android:scaleType="center"
        android:adjustViewBounds="true"
        android:layout_above="@id/buttons_layout"/>

    <LinearLayout
        android:id="@+id/buttons_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:padding="16dp">

        <Button
            android:id="@+id/btnRotateLeft"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rotate Left"
            android:onClick="rotateLeft"/>

        <Button
            android:id="@+id/btnRotateRight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rotate Right"
            android:onClick="rotateRight"/>
    </LinearLayout>

</RelativeLayout>
  • Replace ‘@drawable/sample_image’ with an actual image resource you want to use.

2. Implement MainActivity.kt

  • Open ‘MainActivity.kt’ and implement the logic to rotate the image left and right.

package com.example.rotateimage

import android.graphics.Bitmap
import android.graphics.Matrix
import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var imageView: ImageView
    private lateinit var bitmap: Bitmap
    private var degree = 0

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

        imageView = findViewById(R.id.imageView)
        bitmap = (imageView.drawable).toBitmap() // Convert ImageView drawable to Bitmap
    }

    fun rotateLeft(view: android.view.View) {
        degree -= 90
        rotateImage(degree)
    }

    fun rotateRight(view: android.view.View) {
        degree += 90
        rotateImage(degree)
    }

    private fun rotateImage(degrees: Int) {
        val matrix = Matrix()
        matrix.postRotate(degrees.toFloat())

        val rotatedBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.width, bitmap.height, matrix, true)
        imageView.setImageBitmap(rotatedBitmap)
    }
}

Explanation:

  • ‘activity_main.xml’:
    • Contains an ImageView (‘imageView’) for displaying the image.
    • Contains two Button widgets (‘btnRotateLeft’ and ‘btnRotateRight’) for rotating the image left and right respectively.
  • ‘MainActivity.kt’:
    • ‘onCreate()’: Initializes the ‘imageView’ and ‘bitmap’. The bitmap is obtained from the ‘imageView.drawable’ and converted to a Bitmap.
    • ‘rotateLeft()’: Decreases the degree by 90 and calls ‘rotateImage()’ to rotate the image left.
    • ‘rotateRight()’: Increases the degree by 90 and calls ‘rotateImage()’ to rotate the image right.
    • ‘rotateImage()’: Creates a new rotated bitmap (‘rotatedBitmap’) using ‘Bitmap.createBitmap()’ and sets it to the ImageView using imageView.setImageBitmap()’.

Testing:

  • Run the app on an emulator or a physical device.
  • Click the "Rotate Left" and "Rotate Right" buttons (‘btnRotateLeft’ and ‘btnRotateRight’) to rotate the image displayed in the ‘ImageView’.
  • Observe the image rotating left and right by 90 degrees each time you click the respective button.

This implementation allows users to interactively rotate an image left and right using buttons in an Android app using Kotlin.