Skip to content

Home

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

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

###Simple Implementation The SimpleCropView is made up of one Java file and tiny attribute XML file. Implementation is quite simple.

###Easy Customizable UI The SimpleCropView provides a simple way to customize the cropping view appearance.(both via XML and programmatically)

You can customize following attributes:

  • 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

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

Usage

Here is a simple example.

<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>
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());
            }
        });
    }

}

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

MIT

Author

IsseiAoki

Contact

i.greenwood.dev@gmail.com

Add a custom footer
Add a custom sidebar

Clone this wiki locally