Home

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

###Simple Implementation Implementation is very simple, it ends in three steps.

Set the image (both via XML and programmatically).
Adjust image cropping frame.
Call getCroppedBitmap();

Note:
The image is scaled to fit the size of the view by maintaining the aspect ratio. Any remaining area of the view's bounds is transparent. It is not possible to match the size of the view on the size of the image.
WRAP_CONTENT parameter will be ignored.

###Easy Customizable UI Whether appearance of the View can fit your application, it is a very important issue.

The SimpleCropView provides some attributes for customization:

frame color
handle color
guide color
background color
frame overlay color
frame stroke weight(dp)
frame guideline stroke weight(dp)
frame handle size(dp)
frame handle touch padding(dp)
guidle line show mode ( show_always/not_show/show_on_touch )
handle show mode ( show_always/not_show/show_on_touch )

Download

build.gradle

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

How To Use

Demo

demo

Code

activity_main.xml

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_alignParentTop="true"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/textTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:text="SimpleCropView"
                android:textColor="@color/text"
                android:textSize="@dimen/text_size_m"
                />

            <Button
                android:id="@+id/crop_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_margin="8dp"
                android:text="CROP"
                android:background="@color/text"
                android:textSize="@dimen/text_size_s"
                android:textColor="@color/base"
                />

        </RelativeLayout>
    </android.support.v7.widget.Toolbar>

    <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:handleColor="@color/handle"
        custom:guideColor="@color/guide"
        custom:overlayColor="@color/overlay"
        custom:frameColor="@color/handle"
        custom:cropMode="ratio_16_9"
        custom:frameStrokeWeight="2dp"
        custom:guideStrokeWeight="1dp"
        custom:handleSize="16dp"
        custom:touchPadding="8dp"
        custom:imgSrc="@mipmap/sample5"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:gravity="left|center_vertical"
        android:text="Cropped Image"
        android:textColor="@color/text"
        android:textSize="@dimen/text_size_m"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        />

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

</LinearLayout>

MainActivity.java

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);
        final Button cropButton = (Button)findViewById(R.id.crop_button);
        cropButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                croppedImageView.setImageBitmap(cropImageView.getCroppedBitmap());
            }
        });
    }
}

Features

###CropMode The option to adjust aspect ratio for cropping image.

values (RATIO_1_1 is the default value.)

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. RATIO_X_Y: fixed aspect ratio mode. ratioX:ratioY = X:Y. 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);

setter

cropImageView.setCropMode(CropImageView.CropMode.RATIO_16_9);

###MinimumFrameSize Too small crop frame reduces the user experience. A simple solution is to set the minimum size of the frame.

setter

setMinFrameSizeInDp(int minDp);

###CustomFrame You can customize crop frame appearance easily. (color,stroke weight,handle size, and some attributes are supported.)

Customize Color

setBackgroundColor(int color);,setFrameColor(int color);,setOverlayColor(int color);

Customize Stroke Weight & Handle Size

setFrameStrokeWeightInDp(int dp);,setGuideStrokeWeightInDp(int dp);,setHandleSizeInDp(int dp);

Handle Touch Padding

If you want some additinal touch area for the crop frame handle, setTouchPaddingInDp(int dp); may help you. The crop frame handle's touch area is a circle radius R. (R = handle size + touch padding).

i.e.:

Handle Circle Radius	Touch Padding	Touch Area Radius
24dp	0dp	24dp (Handle Circle = Touch Area Circle)
16dp	8dp	24dp (Touch Area Circle > Handle Circle)

Guideline and Handle Visiblity

setHandleShowMode(CropImageView.ShowMode mode), setGuideShowMode(CropImageView.ShowMode mode)

##XML Attributes XML code sample here.

    <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: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 crop frame.</td>
</tr>

XML Attribute	Related Method	Description
custom:imgSrc	setImageResource(int resId) void setImageBitmap(Bitmap bitmap)	Set source image.
custom:cropMode	setCropMode(CropImageView.CropMode mode)	Set crop mode. ・whether to fix the aspect ratio of the crop frame ・the aspect ratio of the crop frame for fixed-aspect-ratio
custom:minFrameSize	setMinFrameSizeInDp(int minDp)	Set crop 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 crop frame color.
custom:handleSize	setHandleSizeInDp(int handleDp)	Set handle radius in density-independent pixels.
custom:touchPadding	setTouchPaddingInDp(int paddingDp)	Set crop 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly