Skip to main content

How to crop an image in ImageView in Kotlin Android

How to crop an image in ImageView in Kotlin Android.

Here's a step-by-step tutorial on how to crop an image in ImageView in Kotlin Android.

Step 1: Add the necessary dependencies​

First, you need to add the necessary dependencies to your project's build.gradle file.

implementation 'com.theartofdev.edmodo:android-image-cropper:2.8.0'

Step 2: Add ImageView and Button to your layout file​

Next, open your layout file and add an ImageView and a Button to it. The ImageView will display the image, and the Button will trigger the cropping functionality.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:src="@drawable/your_image" />

<Button
    android:id="@+id/cropButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Crop Image" />

Step 3: Initialize the ImageView and Button in your Activity​

In your Kotlin Activity file, initialize the ImageView and Button using findViewById.

val imageView: ImageView = findViewById(R.id.imageView)
val cropButton: Button = findViewById(R.id.cropButton)

Step 4: Set up the cropping functionality​

Now, set up the cropping functionality when the Button is clicked. This can be done by adding an OnClickListener to the Button.

cropButton.setOnClickListener {
    // Start crop activity
    startCropActivity()
}

Step 5: Implement the startCropActivity() function​

In the same Kotlin Activity file, implement the startCropActivity() function. This function will start the crop activity using the Android-Image-Cropper library.

private fun startCropActivity() {
    // Get the image URI from the ImageView
    val imageUri = getImageUri(imageView)

    // Create a new instance of the crop intent
    val cropIntent = CropImage.activity(imageUri)
        .setGuidelines(CropImageView.Guidelines.ON)
        .setAspectRatio(1, 1)
        .getIntent(this)

    // Start the crop activity
    startActivityForResult(cropIntent, CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE)
}

Step 6: Handle the crop result​

Finally, handle the crop result in the onActivityResult() function. This function will be called when the crop activity finishes.

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)

    if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
        val result = CropImage.getActivityResult(data)
        if (resultCode == RESULT_OK) {
            // Get the cropped image URI
            val croppedImageUri = result.uri

            // Display the cropped image in the ImageView
            imageView.setImageURI(croppedImageUri)
        } else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
            // Handle crop error
            val error = result.error
            Toast.makeText(this, "Crop error: $error", Toast.LENGTH_SHORT).show()
        }
    }
}

That's it! You have successfully implemented image cropping functionality in your ImageView using Kotlin in Android. When the user clicks the "Crop Image" button, it will open the crop activity, and upon completion, the cropped image will be displayed in the ImageView.