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 version = "1.0" encoding = "utf-8" ?>
< RelativeLayout 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.
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()
}
}
}
} |
Output:
You can see that the rotated image is displayed.