Crop Image Android Tutorial

Hello everyone, here I bring you this Crop Image Android Tutorial in which you will learn how to implement image picker and cropper. This utillity can be used for configuring Profile Images or some image related tasks where you need to pick any image from gallery or camera and then get a cropped image out of it. So, without wasting any time, let’s get started.

The output of this Crop Image Android Tutorial may be seen in the below images.

Creating new Project

Begin with creating a new Android Studio Project. As the gradle is built and the files get loaded, we are good to import the library required to achieve the utility. To do so,

Adding Library

Add the line below to your Project level gradle

maven { url "https://jitpack.io" }

and add the line below to your app level gradle and sync it:-

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

Now that the library has been imported.

Creating Interface

Its time to configure the activity_main.xml and MainActivity.java.
Here’s the activity_main.xml. It consists of an imageButton where you can tap on to load your profile picture and some textViews to display some profile information.
So, go ahead and add the following code to your activity_main.xml.

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="@android:color/black">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tap on the image below to change your profile picture"

android:textColor="@android:color/white"

android:textSize="20dp"

android:id="@+id/textView" />

<FrameLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/quick_start_cropped_image"

android:background="@android:color/white"

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:textColor="@android:color/black"

android:layout_height="wrap_content"

android:text="Name: Manish Kumar"

android:textSize="30dp"

android:layout_gravity="center"

<TextView

android:textColor="@android:color/black"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Email: manishh776@gmail.com"

android:textSize="25dp"

android:layout_gravity="center"

<TextView

android:textColor="@android:color/black"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="MobileNo:1234567890"

android:textSize="25dp"

android:layout_gravity="center"

</LinearLayout>

</FrameLayout>

<ImageButton

android:id="@+id/quick_start_cropped_image"

android:layout_width="200dp"

android:layout_height="200dp"

android:src="@drawable/profile"

android:layout_marginTop="39dp"

android:layout_below="@+id/textView"

android:layout_centerHorizontal="true" />

</RelativeLayout>

Coding the Activity

Now that the layout is configured, we shall configure the MainActivity.java.
Here’s the MainActivity.java. It consists of methods to initiate the image selection, request permissions, handling the cropping activity and all. So, go ahead and add the following code to your MainActivity.java:-

100

101

102

103

104

package chutka.bitman.com.bestimagecropperever;

import android.Manifest;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.Intent;

import android.content.pm.PackageManager;

import android.net.Uri;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.ImageButton;

import android.widget.ImageView;

import android.widget.Toast;

import com.theartofdev.edmodo.cropper.CropImage;

import com.theartofdev.edmodo.cropper.CropImageView;

public class MainActivity extends AppCompatActivity {

ImageButton imageButton;

/**

* Persist URI image to crop URI if specific permissions are required

private Uri mCropImageUri;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageButton = (ImageButton) findViewById(R.id.quick_start_cropped_image);

imageButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

onSelectImageClick(v);

}

});

}

/**

* Start pick image activity with chooser.

public void onSelectImageClick(View view) {

CropImage.startPickImageActivity(this);

}

@Override

@SuppressLint("NewApi")

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

// handle result of pick image chooser

if (requestCode == CropImage.PICK_IMAGE_CHOOSER_REQUEST_CODE && resultCode == Activity.RESULT_OK) {

Uri imageUri = CropImage.getPickImageResultUri(this, data);

// For API >= 23 we need to check specifically that we have permissions to read external storage.

if (CropImage.isReadExternalStoragePermissionsRequired(this, imageUri)) {

// request permissions and handle the result in onRequestPermissionsResult()

mCropImageUri = imageUri;

requestPermissions(new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, 0);

} else {

// no permissions required or already grunted, can start crop image activity

startCropImageActivity(imageUri);

}

// handle result of CropImageActivity

if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {

CropImage.ActivityResult result = CropImage.getActivityResult(data);

if (resultCode == RESULT_OK) {

((ImageButton) findViewById(R.id.quick_start_cropped_image)).setImageURI(result.getUri());

Toast.makeText(this, "Cropping successful, Sample: " + result.getSampleSize(), Toast.LENGTH_LONG).show();

} else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {

Toast.makeText(this, "Cropping failed: " + result.getError(), Toast.LENGTH_LONG).show();

}

@Override

public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) {

if (mCropImageUri != null && grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {

// required permissions granted, start crop image activity

startCropImageActivity(mCropImageUri);

} else {

Toast.makeText(this, "Cancelling, required permissions are not granted", Toast.LENGTH_LONG).show();

}

/**

* Start crop image activity for the given image.

private void startCropImageActivity(Uri imageUri) {

CropImage.activity(imageUri)

.setGuidelines(CropImageView.Guidelines.ON)

.setMultiTouchEnabled(true)

.start(this);

}

Next, we need an image to be displayed in the imageButton by default. To do so, save the image below and add it to the drawable folder of your project(filename must remain same).

Great. We are almost done. Just update your AndroidManifest.xml with the one shown below:-

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="chutka.bitman.com.bestimagecropperever">

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:supportsRtl="true"

android:theme="@style/Base.Theme.AppCompat">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

And you did it. Now run the project and tap on the profile image button. A pop up shall come up asking your to choose between Camera and Gallery. As you do and select the image, it shall take you to the CropImagActivity. Once cropped, it will return to the MainActivity with the cropped image set to the imageButton.

So thats all for this crop image android tutorial. If you are having any troubles regarding this crop image android tutorial the lets meet in the comment section to sort out the problems. Thank You 🙂