Image crop library android like whatsApp with example

In this tutorial, we are going to learn how we can add cropping functionality to our code. For adding cropping functionality, we are using the Image crop library. Thanks to ArthurHub for providing such a beautiful cropping library.

Image crop Library Android Tutorial

Image Crop library Android is used for cropping images in devices. It simplifies your code for cropping images. It provides an easily customizable and interactable UI.

For implementing this,

Step 1: Create an empty Activity Android Project.

File>> New>> New Project>> choose Empty Project>> Choose Project Name>> Now hit finish button.

Step 2: Add image crop library dependency into build.gradle(Module.app).

dependencies {
    implementation 'com.theartofdev.edmodo:android-image-cropper:2.5.1'
}

Step 3:  Add some permission into the AndroidManifest.xml file.

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

UI part for Cropping Library

Step 3: Open the layout file your activity_main.xml and add the below code.

In this file, we have done the UI part. You can build your custom UI too but for saving the time let copy this UI and paste into your project. We create a button and an ImageView. In ImageView we will show our cropped image. Button is used for calling the setOnClickListener method.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-----After Cropping Image will be settled here-----" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_launcher" />

    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="Crop" />

</LinearLayout>

After completing this part. Run your code and your output looked like this,

image cropping library android Layout

Before moving on MainActivity.java file. Add cropping Activity to your AndroidManifest.xml file.

<activity android:name="com.theartofdev.edmodo.cropper.CropImageActivity" />

Note: Copy and paste this code before ending the </application> tag.

Implementing Cropping Library Java code

Step 4: Now add this code into your MainActivity.java file.

package com.codingquery.democroppingimage;

import android.Manifest;
import android.app.Activity;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Build;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toolbar;

import com.theartofdev.edmodo.cropper.CropImage;
import com.theartofdev.edmodo.cropper.CropImageView;

import java.io.IOException;

public class MainActivity extends AppCompatActivity {
    private ImageView imageView;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                checkAndroidVersion();
            }
        });
    }


        public void checkAndroidVersion()
        {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                try {
                    requestPermissions(new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE, Manifest.permission.READ_EXTERNAL_STORAGE}, 555);
                } catch (Exception e) {

                }
            } else {
                pickImage();
            }
        }


        public void pickImage()
        {
            CropImage.startPickImageActivity(this);
        }

        private void cropRequest (Uri imageUri){
            CropImage.activity(imageUri)
                    .setGuidelines(CropImageView.Guidelines.ON_TOUCH)
                    .setAspectRatio(1,1)
                    .start(this);
        }


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

            //RESULT FROM SELECTED IMAGE
            if (requestCode == CropImage.PICK_IMAGE_CHOOSER_REQUEST_CODE && resultCode == Activity.RESULT_OK) {
                Uri imageUri = CropImage.getPickImageResultUri(this, data);
                cropRequest(imageUri);
            }

            //RESULT FROM CROPING ACTIVITY
            if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
                CropImage.ActivityResult result = CropImage.getActivityResult(data);
                if (resultCode == RESULT_OK) {
                    try {
                        Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), result.getUri());

                        ((ImageView) findViewById(R.id.imageView)).setImageBitmap(bitmap);

                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
        public void onRequestPermissionsResult ( int requestCode, String[] permissions, int[] grantResults){
            if (requestCode == 555 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                pickImage();
            } else {
                checkAndroidVersion();
            }
        }

}

Now, if you run this complete code. You will see the output that is presented given below.

Download Source code:

If this post helps you. Don’t forget to share with your friends and do like our Facebook Page.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *