TT1943 edited this page Jun 13, 2014 · 25 revisions

Cropper

public class CropImageView extends FrameLayout

Table of Contents

Installation

Edit build.gradle

repositories {
	mavenCentral()
}

dependencies {
  compile 'com.edmodo:cropper:1.0.1'
}

Class Overview

The Cropper is an image cropping tool. It provides a way to set an image in XML or 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.

Developers can customize the following attributes (both via XML and programmatically):

  • appearance of guidelines in the crop window
  • whether the aspect ratio is fixed or not
  • aspect ratio (if the aspect ratio is fixed)
  • image resource
A public method to rotate the image by a specified number of degrees is also included. This can be used to provide the user with an option to fix the image orientation should Android miscalculate the intended orientation.

A CropperSample app is included in this repository to demonstrate the customizable attributes of the cropper and its functionality.

Usage

To add the Cropper to your application, specify com.edmodo.cropper.CropImageView in your layout XML. Be sure to include xmlns:custom="http://schemas.android.com/apk/res-auto" in your Cropper if you are setting any of the custom Cropper attributes.

<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 within the FrameLayout according to ImageView.ScaleType.CENTER_INSIDE. If the original image dimensions are smaller than the FrameLayout both in width and height, it will center itself in the frame without any re-sizing.

Alternatively, you can modify attributes programmatically by using provided CropImageView methods:

CropImageView cropImageView = (CropImageView) findViewById(R.id.CropImageView);
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.

To rotate the image clockwise, call rotateImage(int degrees), where degrees is a value between 0 and 360. The Cropper will automatically scale the image to fit current boundaries and save the rotation state upon reloading the activity.

cropImageView.rotateImage(90);

To retrieve the image contained within the Cropper window, use the provided method getCroppedImage() to retrieve a Bitmap of the cropped image.

croppedImage = cropImageView.getCroppedImage();
ImageView croppedImageView = (ImageView) findViewById(R.id.croppedImageView);
croppedImageView.setImageBitmap(croppedImage);

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) false 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 See setAspectRatio() 1 Sets the X value of the aspect ratio, where the aspect ratio is equivalent to X / Y. Defaults to 1 / 1.
custom:aspectRatioY See setAspectRatio() 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.
rotateImage(int degrees) 0 Programmatically rotates the image by X number of degrees clockwise. Handles multiple rotations and rotations greater than 360 degrees.

Download

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

License

Copyright 2013, Edmodo, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Contributions

We'd love for you to participate in the development of our project. Before we can accept your pull request, please sign our Individual Contributor License Agreement. It's a short form that covers our bases and makes sure you're eligible to contribute. Thank you!

http://goo.gl/gfj6Mb

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.