Home

#SimpleCropView The SimpleCropView is an image cropping library for Android.
It simplify your code for cropping image and provides easily customizable UI.

Download

Include the following dependency in your build.gradle file.

repositories {
    jcenter()
}
dependencies {
    compile 'com.isseiaoki:simplecropview:1.0.6'
}

##Basic Usage

#####Add the com.isseiaoki.simplecropview.CropImageView to your layout XML file.

The image is scaled to fit the size of the view by maintaining the aspect ratio. WRAP_CONTENT will be ignored.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <com.isseiaoki.simplecropview.CropImageView
        android:id="@+id/cropImageView"
        xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:padding="16dp"
        custom:cropMode="ratio_1_1"
        />

    <Button
        android:id="@+id/crop_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="16dp"
        android:text="CROP"
        />

    <ImageView
        android:id="@+id/croppedImageView"
        android:layout_margin="16dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

#####Set image, and get cropped image.

public class MainActivity extends Activity {

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

        final CropImageView cropImageView = (CropImageView)findViewById(R.id.cropImageView);
        final ImageView croppedImageView = (ImageView)findViewById(R.id.croppedImageView);

        // Set image for cropping
        cropImageView.setImageResource(R.mipmap.sample5);
        
        Button cropButton = (Button)findViewById(R.id.crop_button);
        cropButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Get cropped image, and show result.
                croppedImageView.setImageBitmap(cropImageView.getCroppedBitmap());
            }
        });
    }

}

##Customization ###CropMode

The option to adjust aspect ratio for cropping image.

CropImageView cropImageView = (CropImageView)findViewById(R.id.cropImageView);
cropImageView.setCropMode(CropImageView.CropMode.RATIO_16_9);

Values:

RATIO_4_3, RATIO_3_4, RATIO_1_1, RATIO_16_9, RATIO_9_16, RATIO_FIT_IMAGE, RATIO_FREE

>`RATIO_FREE`: *This mode does not fix frame aspect ratio.*<br>
`RATIO_X_Y`: *Fixed aspect ratio mode. ratioX:ratioY = X:Y.*<br>
`RATIO_FIT_IMAGE`: *Fixed aspect ratio mode. ratioX:ratioY = (image width):(image height).*

>If you need other aspect ratio, use `setCustomRatio(int ratioX, int ratioY);`

###MinimumFrameSize
The SimpleCropView supports the minimum size of the image cropping frame in dp.<br>
It avoid that the image cropping frame size become smaller than the minimum size.

```java
CropImageView cropImageView = (CropImageView)findViewById(R.id.cropImageView);
cropImageView.setMinFrameSizeInDp(100);

###Color

CropImageView cropImageView = (CropImageView)findViewById(R.id.cropImageView);
cropImageView.setBackgroundColor(getResources().getColor(android.R.color.black));
cropImageView.setOverlayColor(0xBBFFFFFF);
cropImageView.setFrameColor(0xFFFFFFFF);
cropImageView.setHandleColor(getResources().getColor(R.color.handle));
cropImageView.setGuideColor(getResources().getColor(android.R.color.black));

###Stroke Weight & Handle Size

CropImageView cropImageView = (CropImageView)findViewById(R.id.cropImageView);
cropImageView.setFrameStrokeWeightInDp(3);
cropImageView.setGuideStrokeWeightInDp(1);
cropImageView.setHandleSizeInDp(getResources().getDimension(R.dimen.handle_size));

###Handle Touch Padding

If you want some additinal touch area for the image cropping frame handle,
setTouchPaddingInDp(int dp); may help you.

CropImageView cropImageView = (CropImageView)findViewById(R.id.cropImageView);
cropImageView.setTouchPadding(16);

###Handle & Guide ShowMode

CropImageView cropImageView = (CropImageView)findViewById(R.id.cropImageView);
cropImageView.setHandleShowMode(CropImageView.ShowMode.SHOW_ALWAYS);
cropImageView.setGuideShowMode(CropImageView.ShowMode.SHOW_ON_TOUCH);

Handle ShowMode	Guide ShowMode	Appearance
SHOW_ALWAYS	SHOW_ALWAYS
NOT_SHOW	NOT_SHOW
SHOW_ALWAYS	NOT_SHOW
SHOW_ALWAYS	SHOW_ON_TOUCH
SHOW_ON_TOUCH	NOT_SHOW

Values:

SHOW_ALWAYS, NOT_SHOW, SHOW_ON_TOUCH

##XML Attributes
XML code sample here.

```xml
    <com.isseiaoki.simplecropview.CropImageView
        android:id="@+id/cropImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="32dp"
        custom:imgSrc="@mipmap/ic_launcher"
        custom:cropMode="ratio_fit_image"
        custom:minFrameSize="50dp"
        custom:backgroundColor="@color/background_material_dark"
        custom:overlayColor="#66000000"
        custom:frameColor="@android:color/white"
        custom:handleColor="@android:color/white"
        custom:guideColor="#BBFFFFFF"
        custom:frameStrokeWeight="3dp"
        custom:guideStrokeWeight="1dp"
        custom:handleSize="32dp"
        custom:touchPadding="0dp"
        custom:guideShowMode="not_show"
        custom:handleShowMode="show_always"
        custom:cropEnabled="true"
        />

<tr>
	<td>custom:frameStrokeWeight</td>
	<td>setFrameStrokeWeightInDp(int weightDp)</td>
	<td>Set frame stroke weight in density-independent pixels.</td>
</tr>
<tr>
	<td>custom:guideStrokeWeight</td>
	<td>setGuideStrokeWeightInDp(int weightDp)</td>
	<td>Set guideline stroke weight in density-independent pixels.</td>
</tr>
	<tr>
	<td>custom:guideShowMode</td>
	<td>setGuideShowMode(CropImageView.ShowMode mode)</td>
	<td>Set guideline show mode.<br> <i>(show_always/not_show/show_on_touch)</i></td>
</tr>
<tr>
	<td>custom:handleShowMode</td>
	<td>setHandleShowMode(CropImageView.ShowMode mode)</td>
	<td>Set handle show mode.<br><i>(show_always/not_show/show_on_touch)</i></td>
</tr>
<tr>
	<td>custom:cropEnabled</td>
	<td>setCropEnabled(boolean enabled)</td>
	<td>Set whether to show the image cropping frame.</td>
</tr>

XML Attribute	Related Method	Description
custom:imgSrc	setImageResource(int resId) setImageBitmap(Bitmap bitmap)	Set source image.
custom:cropMode	setCropMode(CropImageView.CropMode mode)	Set crop mode. ・whether to fix the aspect ratio of the image cropping frame ・the aspect ratio of the image cropping frame for fixed-aspect-ratio
custom:minFrameSize	setMinFrameSizeInDp(int minDp)	Set the image cropping frame minimum size in density-independent pixels.
custom:backgroundColor	setBackgroundColor(int bgColor)	Set view background color.
custom:overlayColor	setOverlayColor(int overlayColor)	Set image overlay color.
custom:frameColor	setFrameColor(int frameColor)	Set the image cropping frame color.
custom:handleColor	setHandleColor(int frameColor)	Set the handle color.
custom:guideColor	setGuideColor(int frameColor)	Set the guide color.
custom:handleSize	setHandleSizeInDp(int handleDp)	Set handle radius in density-independent pixels.
custom:touchPadding	setTouchPaddingInDp(int paddingDp)	Set the image cropping frame handle touch padding(touch area) in density-independent pixels. handle touch area : a circle of radius R. (R = handle size + touch padding)

License

All source code is licensed under the MIT License.

Author

IsseiAoki

Contact

i.greenwood.dev@gmail.com