How to edit Image in Android Crop Image Rotate Image Flip Image

How to edit Image in Android Crop Image Rotate Image Flip Image

In our previous article, we learn about How to capture an image using Android Camera. Now in this article, we are going to learn about how to edit our captured Camera image. Before moving ahead we are going to first download the source code for the previous article. 
 
Source Code for Capture Image From Camera and Get Image Save Path

FileDownload
CaptureImage.zipLogin to Download

Download the above source code and open it in Android Studio.
Before moving ahead we are assuming you learned about the source code available in the previous article.

For the image editing, we are going to use ArthurHub's Android-Image-Cropper. ArthurHub's Android-Image-Cropper supports following image edit operations.
1. Crop Image
2. Rotate Image
3. Flip Image Horizontally and Vertically.

Let's first add it to app.gradle file. Add following line and then sync it.

Code

compile 'com.theartofdev.edmodo:android-image-cropper:2.6.+'

Now we need External storage read and write permission. Add following lines in the manifest file.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

We already added WRITE_EXTERNAL_STORAGE in our previous article. But if it is not available in existing code then add it.
For editing the image we are going to use Android-Image-Cropper activity. So let's add it also in AndroidManifest.xml file

<activity android:name="com.theartofdev.edmodo.cropper.CropImageActivity"
  android:theme="@style/Base.Theme.AppCompat"/> 

Now all the configuration related tasks are done to use Android-Image-Cropper. Now it's time to modify the existing code. In our activity_main.xml file we have an ImageView and a button to capture image from the camera. Let's add another button named Edit. It is going to open Image Cropper activity.Following is the final version of the activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.vlemonn.vlog.captureimage.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:scaleType="centerInside"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </ImageView>

    <Button
        android:id="@+id/btnCaptureImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Capture Image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <Button
        android:id="@+id/btnEditImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Edit Image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnCaptureImage" />

</android.support.constraint.ConstraintLayout>

Now initialize our new edit button and add an on click listener function with openImageEditor() function in it. openImageEditor() function is going to open Image Cropper activity.

We can call Image Cropper activity following ways.
1. When we have an image path and we need to edit it.

CropImage.activity(photoURI)
                .setGuidelines(CropImageView.Guidelines.ON)
                .start(this); 

2. When we don't have an image then we can open Image Cropper activity using the following line.

CropImage.activity()
  .setGuidelines(CropImageView.Guidelines.ON)
  .start(this)

In this scenario, CropImage activity is either going to open Image from gallery or we can use a camera to capture a new image.

Now our Image Cropper activity is launched. Next, we need to handle its result. Add following if block in our public void onActivityResult function.

if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
            CropImage.ActivityResult result = CropImage.getActivityResult(data);
            if (resultCode == RESULT_OK) {
                Uri resultUri = result.getUri();

                imageView.setImageURI(null);
                imageView.setImageURI(resultUri);

            } else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
                Exception error = result.getError();
            }


Finally, our code is ready. Let's test it. Following are the different app screens.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share