Simplified Coding

  • About
  • Contact Us
  • Advertise
  • Privacy Policy
You are here: Home / Android Application Development / Crop Image Android Tutorial – Pick and Crop Image in Android

Crop Image Android Tutorial – Pick and Crop Image in Android

November 28, 2016 by Manish Kumar 27 Comments

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.

crop image android tutorial

Crop Image Android Tutorial

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

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

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

1
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.

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<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: [email protected]"
            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:-

MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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).

profile

 

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

AndroidManifest.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
 
        <activity android:name="com.theartofdev.edmodo.cropper.CropImageActivity"/>
    </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 🙂

Sharing is Caring:

  • Tweet
  • Share on Tumblr
  • More
  • Pocket
  • Print
  • Email

Related

Filed Under: Android Application Development, Android Intermediate Tagged With: android image cropping sample, crop image android tutorial

About Manish Kumar

Hello, I am Manish Kumar. I am a B.Tech Student at NIT Jamshedpur. Fortunately, I find myself quite passionate about Computers and Technology. Android is my most recent Crush.

Comments

  1. Narendra says

    November 29, 2016 at 1:08 pm

    hi manish if i am uploding the file it showing error and it is possible we cant show only file explorer
    if ok plz explain passible send code to mail or url

    Reply
  2. MVF says

    December 1, 2016 at 10:35 am

    Thanks Manish .. you guys are doing a wonderful job here!!!

    I wanted to upload the cropped image to the server as described in your tutorial below
    https://www.simplifiedcoding.net/android-upload-image-to-server/

    Files that are on the mobile work flawlessly however, the app crashes when I try to upload the camera image.
    Seem the problem is that the camera returns a File URI and “content” which is being expected by the getPath method.

    There seem to be some solutions below.
    http://stackoverflow.com/questions/37624833/android-android-database-cursor-movetofirst-on-a-null-object-reference
    http://stackoverflow.com/questions/6301215/converting-file-scheme-to-content-scheme/16916266#16916266

    but my bad, am unable to make much sense of them.
    Request your help, thanks in advance.

    Reply
    • Manish Kumar says

      December 1, 2016 at 1:20 pm

      What is your exact exception that you are facing?

      Reply
      • MVF says

        December 1, 2016 at 2:17 pm

        Manish .. am getting the following error
        java.lang.NullPointerException: Attempt to invoke interface method ‘boolean android.database.Cursor.moveToFirst()’ on a null object reference

        it is pointing to the “cursor.moveToFirst();” line in the getPath method ..

        Reply
        • MVF says

          December 3, 2016 at 4:06 am

          Hi Manish .. any solution?

          Reply
          • Manish Kumar says

            December 3, 2016 at 8:11 am

            It seems like the method used to get the path of the image in upload image post is not working in case of camera.
            So,in the post on this link-https://www.simplifiedcoding.net/upload-pdf-file-server-android/ ,there’s a class called FilePath.java use that class to fetch the path of the image as you upload the image. Hope this will do.

  3. Dpotato says

    December 1, 2016 at 5:23 pm

    Could you make a tutorial about upload image with mashmallow runtime permission?

    Reply
  4. MVF says

    December 2, 2016 at 5:05 am

    @Dpotato

    Add the following two methods to your activity and call requestStoragePermission() in OnCreate.

    //Requesting permission
    private void requestStoragePermission() {
    if (ContextCompat.checkSelfPermission(this, android.Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED)
    return;

    if (ActivityCompat.shouldShowRequestPermissionRationale(this, android.Manifest.permission.READ_EXTERNAL_STORAGE)) {
    //If the user has denied the permission previously your code will come to this block
    //Here you can explain why you need this permission
    //Explain here why you need this permission
    }
    //And finally ask for the permission
    ActivityCompat.requestPermissions(this, new String[]{android.Manifest.permission.READ_EXTERNAL_STORAGE}, STORAGE_PERMISSION_CODE);
    }

    //This method will be called when the user will tap on allow or deny
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {

    //Checking the request code of our request
    if (requestCode == STORAGE_PERMISSION_CODE) {

    //If permission is granted
    if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
    //Displaying a toast
    Toast.makeText(this, “Permission granted now you can read the storage”, Toast.LENGTH_LONG).show();
    } else {
    //Displaying another toast if permission is not granted
    Toast.makeText(this, “Oops you just denied the permission”, Toast.LENGTH_LONG).show();
    }
    }
    }

    Reply
  5. MVF says

    December 5, 2016 at 1:33 pm

    Thanks Manish, that worked

    Reply
  6. Michael says

    December 12, 2016 at 7:38 am

    Thanks, Manish, for a wonderful tutorial but my problem here is I want the image to fit into a circle shape like a WhatsApp user profile. Secondly, it’s so small on my device after cropping and I’m trying to Crop the image and set it to the desired size but is not really working.

    Reply
  7. Arunkumar says

    February 23, 2017 at 6:19 am

    Hello pick from gallery is going out of my app please help me

    Reply
  8. Dexter Fury says

    March 18, 2017 at 12:18 am

    everything worked fine at first but for some reason after some weeks when i try to pick from camera it just return, camera doesn’t open the piker just closes. picking from galary works just fine.

    Reply
  9. Dexter Fury says

    March 23, 2017 at 11:53 pm

    Camera is not opening on android marshMallow 6 and nouhgut 7, please help?

    Reply
  10. shilmy says

    March 25, 2017 at 6:41 am

    Nice tutorial

    Reply
  11. abdolati ali says

    March 25, 2017 at 12:21 pm

    How to add an image field in my sql + php database and display it in Android Studio?

    Reply
  12. vivek says

    March 30, 2017 at 7:17 am

    camera cropping is not working for galaxy s6 phone…but working in moto G4..
    any solution for that?

    Reply
  13. Siddu Patil says

    May 2, 2017 at 1:39 pm

    CropImage.activity(imageUri)
    .setGuidelines(CropImageView.Guidelines.ON)
    .setMultiTouchEnabled(true)
    .start(this);

    here i have issues as my app crashes. i have added all the dependencies and maven libraries too. it just doesnt right the logs. Plus it never asks for the permissions too. how does it run anyway?

    Reply
  14. Abdul Ali says

    May 13, 2017 at 7:48 pm

    Hello everybody,
    To those whoa re facing camera problems in marshmallow devices. The above code doesn’t check for camera runtime permissions. Here is the code

    public void onSelectImageClick(View view) {
    if (CropImage.isExplicitCameraPermissionRequired(this)) {
    requestPermissions(new String[]{Manifest.permission.CAMERA}, CropImage.CAMERA_CAPTURE_PERMISSIONS_REQUEST_CODE);
    } else {
    CropImage.startPickImageActivity(this);
    }
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) {
    if (requestCode == CropImage.CAMERA_CAPTURE_PERMISSIONS_REQUEST_CODE) {
    if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
    CropImage.startPickImageActivity(this);
    } else {
    Toast.makeText(this, “Cancelling, required permissions are not granted”, Toast.LENGTH_LONG).show();
    }
    }
    if (requestCode == CropImage.PICK_IMAGE_PERMISSIONS_REQUEST_CODE) {

    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();
    }
    }
    }

    You can refer the sample code here
    https://github.com/ArthurHub/Android-Image-Cropper

    Reply
  15. Abdul Ali says

    May 13, 2017 at 8:04 pm

    One more thing that needs to be changed is the following code required for requesting storage permissions

    In OnActivityResult code

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

    Reply
  16. Yaqub Patel says

    May 17, 2017 at 6:29 am

    thank you soo very much for valueable code..
    i m a big fan of this site…
    great job sir..
    keep helping Android freshers like me with your simple and greate codes…
    thank you soo much..

    Reply
  17. ketan satani says

    August 22, 2017 at 6:59 am

    for marshmallow 6 and nougat 7, Use RunTime Permission for that it will work,

    Reply
  18. Biplov kumar says

    February 6, 2018 at 12:29 pm

    hi manish.
    your code is working fine thank u so much.
    can i fetch cropped image coordinates not image button coordinates.
    when i do then only i fetch image button coordinate which is always same not result image coordinates.
    plzz suggest me .thank u so much

    Reply
  19. Jay Sharma says

    March 5, 2018 at 6:48 pm

    Hi Manish,

    Nice tutorial. By the way i would like to store the image in sharedpreferences so as when the application is closed,
    the image again loads with the last set image.

    Kindly help me with this.

    Reply
  20. Ashish says

    March 30, 2018 at 10:48 am

    I can not save multiple image in cache , By default this library save the cropped image in cache , but i can not save more than one.

    Reply
  21. Test says

    June 22, 2018 at 11:59 am

    How can we get the path of this cropped image? its urgent

    Reply
  22. moxmed says

    June 27, 2018 at 2:13 pm

    Hi! i am new to android ,i have excuted the above code but when i reache the croping area i don’t see the crop button to enable croping so as to return to the main activity.plz help

    Reply
  23. Maulik Patel says

    September 11, 2018 at 12:59 pm

    hi

    your code is working up to select an image and but status bar not showing and I don’t see any crop button.
    what is the issue? do you know? do you want to check my code? please help me.

    Reply

Leave a Reply to Narendra Cancel reply

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

Search




Download our Android App

Simplified Coding in Google Play

About Me

Belal Khan

Hello I am Belal Khan, founder and owner of Simplified Coding. I am currently pursuing MCA from St. Xavier's College, Ranchi. I love to share my knowledge over Internet.

Connect With Me

Follow @codesimplified
Simplified Coding

Popular Tutorials

  • Android JSON Parsing – Retrieve From MySQL Database
  • Android Login and Registration Tutorial with PHP MySQL
  • Android Volley Tutorial – Fetching JSON Data from URL
  • Android Upload Image to Server using Volley Tutorial
  • Android TabLayout Example using ViewPager and Fragments
  • Retrieve Data From MySQL Database in Android using Volley
  • Firebase Cloud Messaging Tutorial for Android
  • Android Volley Tutorial – User Registration and Login
  • Android Upload Image to Server Using PHP MySQL
  • Android Navigation Drawer Example using Fragments




About Simplified Coding

Simplified Coding is a blog for all the students learning programming. We are providing various tutorials related to programming and application development. You can get various nice and simplified tutorials related to programming, app development, graphics designing and animation. We are trying to make these things simplified and entertaining. We are writing text tutorial and creating video and visual tutorials as well. You can check about the admin of the blog here and check out our sitemap

Quick Links

  • Advertise Here
  • Privacy Policy
  • Disclaimer
  • About
  • Contact Us
  • Write for Us

Categories

Android Advance Android Application Development Android Beginners Android Intermediate Ionic Framework Tutorial JavaScript Kotlin Android Others PHP Advance PHP Tutorial React Native

Copyright © 2017 · Simplified Coding· All rights Reserved. And Our Sitemap.All Logos & Trademark Belongs To Their Respective Owners·

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.