Crop and Rounded Corners added to an ImageView.

César Díez Sánchez

Last update: Jan 5, 2023

Related tags

ImageView SuperImageView

Overview

SuperImageView

Extra features for your ImageView provided in a modularized way

Documentation for v2 coming this week.

CropImageView

An ImageView that supports different kind of cropping rather than the only Android is currently supporting: centerCrop

Using this library, you can crop your desired image by sides described below:

Development idea borns at the point in [Kerad Games] we needed images cropped by somewhere no matter the image size.

The original images we had to deal with (we wanted the half size of the ball shown whatever screen size), below

Here are some screenshots what we got thanks to this widget :-)

Usage

Step 1

Gradle

dependencies {
   compile 'com.cesards.android:cropimageview:1.0.2.1'
}

Maven

<dependency>
   <groupId>com.cesards.android</groupId>
   <artifactId>CropImageView</artifactId>
   <version>1.0.2</version>
   <type>aar</type>
</dependency>

Step 2

Define in xml:

<com.codeforvictory.android.superimageview.SuperImageView
   xmlns:custom="http://schemas.android.com/apk/res-auto"
   android:id="@+id/imageView1"
   android:src="@drawable/photo1"
   custom:crop="value" />

where value can take values

topLeft|centerLeft|bottomLeft|topRight|centerRight|bottomRight|centerTop|centerBottom

Or in code:

final CropImageView cropImageView = new CropImageView(CropActivity.this);
final Resources res = getResources();
cropImageView.setImageDrawable(res.getDrawable(images[position]));
final CropImageView.CropType cropType = imageCrops[position];
cropImageView.setCropType(cropType);

Performance tests (using Hugo)

Center Crop Sample (ImageView)

V/TestForegroundImageView﹕ ⇢ setFrame(l=0, t=0, r=1080, b=1557)
V/TestForegroundImageView﹕ ⇠ setFrame [0ms] = true
V/TestForegroundImageView﹕ ⇢ setFrame(l=1080, t=0, r=2160, b=1557)
V/TestForegroundImageView﹕ ⇠ setFrame [0ms] = true
V/TestForegroundImageView﹕ ⇢ setFrame(l=0, t=0, r=1080, b=1557)
V/TestForegroundImageView﹕ ⇠ setFrame [0ms] = false
V/TestForegroundImageView﹕ ⇢ setFrame(l=1080, t=0, r=2160, b=1557)
V/TestForegroundImageView﹕ ⇠ setFrame [0ms] = false
V/TestForegroundImageView﹕ ⇢ setFrame(l=0, t=0, r=1080, b=1701)
V/TestForegroundImageView﹕ ⇠ setFrame [0ms] = true
V/TestForegroundImageView﹕ ⇢ setFrame(l=1080, t=0, r=2160, b=1701)
V/TestForegroundImageView﹕ ⇠ setFrame [0ms] = true`

Custom Crop Sample (CropImageView)

V/TestForegroundCropImageView﹕ ⇢ setFrame(l=0, t=0, r=1080, b=1557)
V/TestForegroundCropImageView﹕ ⇠ setFrame [0ms] = true
V/TestForegroundCropImageView﹕ ⇢ setFrame(l=1080, t=0, r=2160, b=1557)
V/TestForegroundCropImageView﹕ ⇠ setFrame [0ms] = true
V/TestForegroundCropImageView﹕ ⇢ setFrame(l=0, t=0, r=1080, b=1557)
V/TestForegroundCropImageView﹕ ⇠ setFrame [0ms] = false
V/TestForegroundCropImageView﹕ ⇢ setFrame(l=1080, t=0, r=2160, b=1557)
V/TestForegroundCropImageView﹕ ⇠ setFrame [0ms] = false
V/TestForegroundCropImageView﹕ ⇢ setFrame(l=0, t=0, r=1080, b=1701)
V/TestForegroundCropImageView﹕ ⇠ setFrame [0ms] = true
V/TestForegroundCropImageView﹕ ⇢ setFrame(l=1080, t=0, r=2160, b=1701)
V/TestForegroundCropImageView﹕ ⇠ setFrame [0ms] = true

Results: code used does not cause overhead in the UI thread.

ChangeLog

1.0.2.1 (2015-10-22)
- ImageView crashes in devices with API < 18 due to a @TargetApi annotation
1.0.2 (2015-10-22)
- Changed minSdkVersion to 7
- Solved a bug related with ImageView and API < 18.
1.0.1 (2015-02-17)
- Changed Samples UI and removed unused resources.
- Added performance tests to Samples.
- Added code styles for contributions.
- Improved CropImageView widget. Removed onLayout() overhead. ImageView onLayout() is empty, so we only need logic in setFrame() method.
1.0.0 (2015-02-15)
- Initial release. (minSdkVersion="14").

Developed By

César Díez Sánchez - [email protected]

Who's using it

Golden Manager
Slipstream Music
Vueling
Does your app use CropImageView? Let me know if you want to be featured in this list :-)

Do you want to contribute?

I'm pretty sure you there are some awesome hidden features you need in your daily dev life. Just let me know or collaborate to improve this librar

I'd like to improve this library with your help, there are some new features to implement waiting for you ;)

If you want to contribute, you should use my code styles available in the root of the project!

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments

doesn't crop in xml

I tried using the library in xml according to the example and the image does not get cropped, it just shows the full image. I want the image to be cropped at the bottom. I tried any of the options, without any affect. How do I make it work in xml?

opened by stavkidron 8

Null drawable

add a condition in order to avoid null pointers whenever we don't have an image set.

final Drawable image = getDrawable();
if (cropType != CropType.NONE && viewHeight > 0 && viewWidth > 0 && image != null) {
      final Matrix matrix = imageMaths.getMatrix();

      final int drawableWidth = image.getIntrinsicWidth();
      final int drawableHeight = image.getIntrinsicHeight();

opened by cesards 8

Null Pointer exception
<com.cesards.cropimageview.CropImageView android:id="@+id/iv_profile_pic" android:layout_width="match_parent" android:layout_height="match_parent" android:foreground="@drawable/gradient_bottom_top" android:src="@drawable/add_profile_picbkg" app:crop="centerTop" />

This is what I get when I start activity: java.lang.NullPointerException: Attempt to invoke virtual method 'int android.graphics.drawable.Drawable.getIntrinsicWidth()' on a null object reference at com.cesards.cropimageview.CropImageView.computeImageMatrix(CropImageView.java:119) at com.cesards.cropimageview.CropImageView.setFrame(CropImageView.java:107) at android.view.View.layout(View.java:16648) at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1079) at android.view.View.layout(View.java:16651) at android.view.ViewGroup.layout(ViewGroup.java:5440) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336) at android.widget.FrameLayout.onLayout(FrameLayout.java:273) at android.view.View.layout(View.java:16651) at android.view.ViewGroup.layout(ViewGroup.java:5440) at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1079) at android.view.View.layout(View.java:16651) at android.view.ViewGroup.layout(ViewGroup.java:5440) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336) at android.widget.FrameLayout.onLayout(FrameLayout.java:273) at android.view.View.layout(View.java:16651) at android.view.ViewGroup.layout(ViewGroup.java:5440) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1743) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1586) at android.widget.LinearLayout.onLayout(LinearLayout.java:1495) at android.view.View.layout(View.java:16651) at android.view.ViewGroup.layout(ViewGroup.java:5440) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336) at android.widget.FrameLayout.onLayout(FrameLayout.java:273) at android.view.View.layout(View.java:16651) at android.view.ViewGroup.layout(ViewGroup.java:5440) at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1743) at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1586) at android.widget.LinearLayout.onLayout(LinearLayout.java:1495) at android.view.View.layout(View.java:16651) at android.view.ViewGroup.layout(ViewGroup.java:5440) at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336) at android.widget.FrameLayout.onLayout(FrameLayout.java:273) at com.android.internal.policy.PhoneWindow$DecorView.onLayout(PhoneWindow.java:2678) at android.view.View.layout(View.java:16651) at android.view.ViewGroup.layout(ViewGroup.java:5440) at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2183) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1943) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1119) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6060) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:858) at android.view.Choreographer.doCallbacks(Choreographer.java:670) at android.view.Choreographer.doFrame(Choreographer.java:606) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844) at android.os.Handler.handleCallback(Handler.java:746) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:148) at android.app.ActivityThread.main(ActivityThread.java:5443) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:728) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)
opened by ritesh94 7
Crash if no drawable specified

at com.cesards.cropimageview.CropImageView.computeImageMatrix(CropImageView.java:119)

causes crash if src is not specified in xml. So using an Image loading library does not work. would suggest to add a null-check for the drawable

opened by chriswiesner 7
correct README.md

update the document. Although I have tried to declare 'civ_crop' according to the document, however got complaining from the compiler. probably, the document is out of date.

opened by katsumeshi 4
Can't use with Picasso

I use Picasso to load my images but I need to use this library to correctly center my images but because this library extends FrameLayout and its imageView is private, I'm not able to use it. Any ways around this?
enhancement

opened by manenga 2
added API 7 CropImageView compatibility

It closes #2

Added API 7 support to CropImageView. It doesn't make sense to add API 1 version even if ImageView API hasn't changed at all.

Sorry about styles boilerplate. I was unconscious and young.

2 :+1: needed

opened by cesards 2
App crashes upon adding CropImageView dependency in build.gradle

Adding the dependency compile 'com.cesards.android:cropimageview:1.0.2.1' to build.gradle(Module: app) causes RuntimeException. The App works fine on removing the dependency. Adding it again causes the app to crash as soon as it launches. I tried reproducing it three times and it occurred all the three times.

opened by gamebusterz 1

Bugfix/pre api 18 crop fix

This closes #12

I found a very good answer to the problem here Before API 18, the setImageMatrix(Matrix matrix) is saving the matrix in a different field than getImageMatrix() is returning...

Android 4.4 ImageView

public void setImageMatrix(Matrix matrix) {
    // collaps null and identity to just null
    if (matrix != null && matrix.isIdentity()) {
        matrix = null;
    }

    // don't invalidate unless we're actually changing our matrix
    if (matrix == null && !mMatrix.isIdentity() ||
            matrix != null && !mMatrix.equals(matrix)) {
        mMatrix.set(matrix);
        configureBounds();
        invalidate();
    }
}

Here the matrix is being stored in the field mMatrix

public Matrix getImageMatrix() {
    if (mDrawMatrix == null) { //<-- should be mMatrix == null
        return new Matrix(Matrix.IDENTITY_MATRIX);
    }
    return mDrawMatrix; //<-- NOT THE RIGHT FIELD TO RETURN
}

While getImageMatrix() returns mDrawMatrix...

Android 4.1.2 ImageView

public Matrix getImageMatrix() {
    return mMatrix;
}

public void setImageMatrix(Matrix matrix) {
    // collaps null and identity to just null
    if (matrix != null && matrix.isIdentity()) {
        matrix = null;
    }

    // don't invalidate unless we're actually changing our matrix
    if (matrix == null && !mMatrix.isIdentity() ||
            matrix != null && !mMatrix.equals(matrix)) {
        mMatrix.set(matrix);
        configureBounds();
        invalidate();
    }
}

both methods use the same field - mMatrix

SOLUTION: preserve Matrix as field instead of retrieving it from ImageView in API < 18

opened by cesards 1

CropImageView.rotateImage don't rescale image to respect ScaleType

It seems to me that the cropImageView don't rescale the image to respect the ScaleType. For example i'm using the CropImageView with a CENTER_CROP ScaleType. It works when opening the image but when a rotation (here I only tested with +-90°) is applied using CropImageView.rotateImage the image keep its size which is correct according to the initialization but not correct with respect to the rotation.

opened by Merichbier 0
Feature/api 7 support

It closes #2

Added API 7 support to CropImageView. It doesn't make sense to add API 1 version even if ImageView API hasn't changed at all.

Sorry about styles boilerplate. I was unconscious and young.

2 :+1: needed

opened by cesards 0

Bug-

[BUG] 尊敬的开发者你好：

Bug 1、 ImageCroppingActivity中Left Top crop of the horizontal image、Left Center crop of the horizontal image、Left Top crop of the horizontal image，发现三种裁剪和显示方式都是一样的。没有任何区别。 2、Right Top crop of the horizontal image、Right Center crop of the horizontal image、Right Top crop of the horizontal image三种裁剪和显示方式都是一样的，没有任何区别。 3、请检查是否裁剪算法错误。未实现标注的裁剪和显示方式 com.codeforvictory.android.superimageview.crop.ImageTransformation void compute(@CropType int cropType) { int viewWidth = view.getWidth() - view.getPaddingLeft() - view.getPaddingRight(); int viewHeight = view.getHeight() - view.getPaddingTop() - view.getPaddingBottom();

if (cropType != CropType.NONE && viewHeight > 0 && viewWidth > 0) {
    Matrix matrix = compatMatrix.matrix(cropType);

    Drawable drawable = view.getDrawable();
    int drawableWidth = drawable.getIntrinsicWidth();
    int drawableHeight = drawable.getIntrinsicHeight();

    float scaleY = (float) viewHeight / (float) drawableHeight;
    float scaleX = (float) viewWidth / (float) drawableWidth;
    float scale = scaleX > scaleY ? scaleX : scaleY;
    matrix.setScale(scale, scale); // Same as doing matrix.reset() and matrix.preScale(...)

    boolean verticalImageMode = scaleX > scaleY;

    float xTranslation = getXTranslation(
        cropType,
        viewWidth,
        drawableWidth * scale,
        verticalImageMode
    );
    float yTranslation = getYTranslation(
        cropType,
        viewHeight,
        drawableHeight * scale,
        verticalImageMode
    );

    matrix.postTranslate(xTranslation, yTranslation);
    view.setImageMatrix(matrix);
}

}

opened by AnBetter2021 0

jcenter is shutting down on May 1

jcenter is shutting down on May 1 https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/

Any chance this artifact can be uploaded to Maven Central before then?

This should supersede #28 due to the shutdown.

opened by jameswald 1
Lack of Documentation makes basic use case Unusable
I came here because of

https://gist.github.com/arriolac/3843346#gistcomment-1395269

I just want a TopCropImageView.

The documentation suggests a "custom" namespace in xml such as

custom:crop="centerTop"

but the samples use really ugly app namespace with class references such as

app:siv_cropImplementation="com.codeforvictory.android.superimageview.crop.CroppedImage"

Anyway, none of it is working out of the box. I think you need to clean up this library and documentation for it to be useful.
opened by jlmalone 0
Fix view path in the xml docu

The documentation states that you should use com.codeforvictory.android.superimageview.SuperImageView for your view in xml. This didn't work for me and had to adjust it to com.cesards.cropimageview.CropImageView. I thought the docu should represent this correctly.

opened by henningBunk 0
Question: How to scale-crop from 20% at the top, and how to do it for videos too?

Currently we can choose to scale-crop from center (center crop) , from top, and other sides...

But what should I do to make it work for 20% from the top?

And what should be done to make it work for videos too?

I've asked about this here: https://stackoverflow.com/questions/54216273/how-to-have-similar-mechanism-of-center-crop-on-exoplayers-playerview-but-not/

Please, if you know how to do it, publish an answer. I will gladly grant the bounty if it works.

opened by AndroidDeveloperLB 0

Owner

César Díez Sánchez

Android @Tinder 🇪🇸 🇺🇸

GitHub

Replacement for deprecated official Android crop image function

561 Nov 25, 2022

Rounded and Squared Avatar for Android Applications

Avatars for Android This project provides a easy way to build avatar compositions for Android applications, as you can see in the screenshot. Usage De

194 Nov 28, 2022

ImageView and FrameLayout with gestures control and position animation

GestureViews ImageView and FrameLayout with gestures control and position animation. Main goal of this library is to make images viewing process as sm

2.3k Dec 30, 2022

This light-weight library provides images with letter/text like the Gmail app. It extends the Drawable class thus can be used with existing/custom/network ImageView classes. Also included is a fluent interface for creating drawables and a customizable ColorGenerator.

###TextDrawable This light-weight library provides images with letter/text like the Gmail app. It extends the Drawable class thus can be used with exi

3.2k Dec 15, 2022

Android ImageView widget with zoom and pan capabilities

ImageViewTouch for Android ImageViewTouch is an android ImageView widget with zoom and pan capabilities. This is an implementation of the ImageView wi