Skip to content

Home

Jump to bottom Edit New page
Issei Aoki edited this page Aug 4, 2015 · 86 revisions

#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.

  1. Set the image.(via XML or programatically)
  2. Adjust image cropping frame.
  3. Get cropped image.

###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
  • 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.3'
}

How To Use

Here is a simple example.

activity_main.xml

<RelativeLayout 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"
                tools:context=".MainActivity">

    <com.isseiaoki.simplecropview.CropImageView
        xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cropImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="32dp"
        custom:cropMode="ratio_1_1"
        custom:frameColor="@android:color/white"
        custom:backgroundColor="@color/background_material_dark"
        custom:overlayColor="#66000000"
        custom:imgSrc="@mipmap/ic_launcher"
        />
        
    <Button
        android:id="@+id/crop_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CROP"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="32dp"
        />

</RelativeLayout>

NOTE:
The image will be maximized while maintaining the aspect ratio in the view area. The image size is calculated based on the size of the view. It is not possible to match the size of the view on the size of the image.
WRAP_CONTENT parameter will be ignored.

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

}

result

result

Features

###AspectRatioSupport The SimpleCropView supports fixed-aspect-ratio for cropping frame. Preset Ratio(FIT_IMAGE, 1_1, 4_3, 16_9...) and CustomRatio are available.

cropImageView.setCropMode(CropImageView.CropMode.RATIO_16_9);

RATIO_1_1 is default value. If you need other aspect ratio, use setCustomRatio(int ratioX, int ratioY);

What is CropMode? Crop frame aspect ratio mode.

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).*

>---


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


```Java
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)

###Auto Save/Restore View State The SimpleCropView save/restore its own view state by itself. So you have to do nothing about saving the view state.

###Auto-Fit-ImageView The SimpleCropView can be used as Auto-Fit-ImageView by using setCropEnabled(false);.

##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)

Licence

All source code is licensed under the MIT License.

Author

IsseiAoki

Contact

i.greenwood.dev@gmail.com

Add a custom footer
Add a custom sidebar

Clone this wiki locally