Home

Table of Contents Home Class Overview Usage Download XML Attributes License

Home

public class CropImageView extends FrameLayout

Class Overview

The Cropper is an image cropping tool. It provides a way to set an image in XML and programmatically, and displays a resizable crop window on top of the image. Calling the method getCroppedImage() will then return the Bitmap marked by the crop window.

In the Edmodo app, the Cropper widget will be used when uploading a new profile picture. The user will be allowed to crop their image after taking a picture with the camera or selecting an image from the gallery.

Furthermore, developers are able to customize the following attributes (both via XML and programmatically):

• appearance of guidelines in the crop window
• whether the aspect ratio is fixed
• aspect ratio - X value (if the aspect ratio is fixed)
• aspect ratio - Y value (if the aspect ratio is fixed)
• image resource

In the Edmodo app, the Cropper widget will be used when uploading a new profile picture. The user will be allowed to crop their image after taking a picture with the camera or selecting an image from the gallery.

Usage

Add the library Cropper to your project by selecting Project->Preferences->Android->Libraries, clicking on "Add...", and selecting the RangeBar library.

Include Cropper in your layout XML. Be sure to include xmlns:custom="http://schemas.android.com/apk/res-auto" in your Cropper so that your customized attributes will be recognized by the application.

<com.edmodo.cropper.CropImageView 
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:id="@+id/CropImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Add customizable attributes with the alias custom: followed by the attribute name and value.

<com.edmodo.cropper.CropImageView 
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:id="@+id/CropImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    custom:aspectRatioX="5"
    custom:showGuidelines="onTouch" />

Note: android:layout_width and android:layout_height will set the FrameLayout of the Cropper, but not the image itself. However, the Cropper is built to automatically resize the given image to fill the FrameLayout either horizontally or vertically. If the given image is smaller than the FrameLayout both in width and height, it will center itself in the frame.

Alternatively, if you've created the Cropper in XML, you can add attributes using the related methods programmatically by using the android ID in the onCreate() method:

protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
		
	CropImageView cropImageView = (CropImageView) findViewById(R.id.CropImageView);
	cropImageView.setAspectRatioX(5);
        cropImageView.setAspectRatio(5, 10);
        cropImageView.setFixedAspectRatio(true);
        cropImageView.setGuidelines(1);
}

The crop window will reach a minimum size of 40px tall and 40px wide irrelevant of the initial aspect ratio; that is, setting the the aspect ratio to a very high number (e.g. 100,000) will still create a crop window only as wide as the image and 40px tall.

Download

The latest version can be downloaded as a zip and referenced by your application as a library project.

XML Attributes

Attribute Name	Related Method	Default Value	Description
custom:imageResource	setImageResource(int resId)	0	Sets the bitmap of the imageView by taking in an image ID or reference. If no ID is entered, Cropper will simply display nothing.
custom:guidelines	setGuidelines(integer)	1	Sets whether the guidelines within the crop window will be displayed. Setting the XML value "off" corresponds to an integer value of 0, indicating no guidelines will be displayed. Setting the XML value "onTouch" corresponds to an integer value of 1, indicating guidelines will be displayed when the cropWindow is touched. Setting the XML value "on" corresponds to an integer value of 2, indicating guidelines will always be displayed. Setting an integer value outside of 0-2 will cause a NullPointerException.
custom:fixAspectRatio	setFixedAspectRatio(boolean)	true	Fixes the aspect ratio. If this is turned off, the crop window will reset and default to the size of the image, but with 10% padding on each side. If this is turned on, the crop window will reset and expand as much as possible given the aspect ratio.
custom:aspectRatioX	setAspectRatioX(int)	1	Sets the X value of the aspect ratio, where the aspect ratio is equivalent to X / Y. Defaults to 1 / 1.
custom:aspectRatioY	setAspectRatioY(int)	1	Sets the Y value of the aspect ratio, where the aspect ratio is equivalent to X / Y. Defaults to 1 / 1.
	setAspectRatio(int X, int Y)	1, 1	Programmatically sets the X and Y values of the aspect ratio, where the aspect ratio is equivalent to X / Y. Defaults to 1 / 1.

License