How to Rotate an Image to a Certain Angle in Android?

Last Updated : 02 Feb, 2022

In Android, ImageView is used to display images. Images can be of any type and can be fetched locally or from a network. Images are displayed without any operations in the ImageView. However, images can be rotated to a certain angle and displayed in ImageView. So in this article, we will show you how you could rotate an image programmatically to an angle and display it in the ImageView in Android. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Adding an image in res > drawable folder

Copy the image to the drawable folder in the resources folder as shown below.

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add an ImageView to display the image, an EditText to input degrees (integer) to rotate and a Button to execute the rotation.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view_1"
        android:layout_width="300sp"
        android:layout_height="300sp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50sp"
        android:src="@drawable/img"/>

    <EditText
        android:id="@+id/edit_text_1"
        android:layout_width="50sp"
        android:layout_height="60sp"
        android:inputType="number"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/image_view_1"
        android:layout_marginTop="100sp"/>

    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/edit_text_1"
        android:layout_marginTop="20sp"
        android:text="rotate"/>

</RelativeLayout>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package org.geeksforgeeks.programmaticallyrotateiv

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.ImageView
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Declaring and Initializing the ImageView, 
        // EditText and Button from the layout file
        val mImageView = findViewById<ImageView>(R.id.image_view_1)
        val mEditText = findViewById<EditText>(R.id.edit_text_1)
        val mButton = findViewById<Button>(R.id.button_1)

        // When button is clicked
        mButton.setOnClickListener {
            // EditText value is converted to 
            // float and rotation is applied
            if(mEditText.text.isNotEmpty()){
                val mAngleRotate = (mEditText.text.toString() + "f").toFloat()
                mImageView.rotation = mAngleRotate
            } else {
                Toast.makeText(applicationContext, "Field cannot be empty", Toast.LENGTH_SHORT).show()
            }
        }
    }
}