Bug: cannot avoid center-crop

[AndroidDeveloperLB]

suppose I have a small image to show inside the circularImageView, how do I avoid it being center-cropped?
I've set this:

            <com.mikhaellopez.circularimageview.CircularImageView
                android:id="@+id/movingIconImageView"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/test"
                app:border="true" 
                app:border_color="#fff"
                app:border_width="0px"
                app:shadow="true"
                app:shadow_color="#000"
                app:shadow_radius="8"/>

and the image is of size 58x60 dp (it's in the mdpi folder and has the same pixels size as the dp).

Yet this is what I see (ignore what's behind ) :

Same thing occurs when I have a 100x100 dp of the view. It always does center-crop...

I've tried changing the scaleType, but it doesn't do anything.
I've even tried forcing padding, but it didn't help.

[AndroidDeveloperLB]

As a workaround I use this drawable xml file :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <solid android:color="#fff"/>
        </shape>
    </item>

    <item
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp">

        <bitmap
            android:gravity="center"
            android:src="@drawable/original_image"/>
    </item>

</layer-list>

[lopspower]

You can add a viewParent with margin to replace padding this way :

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimenyour_margin"
        android:gravity="center">

        <com.mikhaellopez.circularimageview.CircularImageView
                android:id="@+id/movingIconImageView"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/test"
                app:border="true" 
                app:border_color="#fff"
                app:border_width="0px"
                app:shadow="true"
                app:shadow_color="#000"
                app:shadow_radius="8"/>

    </LinearLayout>

[AndroidDeveloperLB]

@lopspower This won't work. I'm talking about the content within the CircularImageView. The image itself. I don't want it to get cropped. I want it to be centered inside. That's also why I wrote to ignore what's around the CircularImageView in the screenshot.

[sbaar]

Here's a pretty elegant way

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <inset android:inset="8dp" android:drawable="@drawable/ic_check_white"/>
    </item>
    <item>
        <inset android:inset="8dp" android:drawable="@drawable/lock_v2"/>
    </item>
</selector>

where 8dp is the padding

[AndroidDeveloperLB]

@sbaar This is the same workaround as I've found, no? Just adding some padding...

@lopspower Why close this issue? Is it fixed now ? Or there is some better solution?

[lopspower]

Hello @AndroidDeveloperLB, did you try it in the last version of the library ?

implementation 'com.mikhaellopez:circularimageview:3.1.0'

[AndroidDeveloperLB]

I can still see it center-cropped. Took my avatar image, changed it to 60x60 px and put into res/drawable folder, and used the same code I've written on the first post (well almost, seems you've added a prefix for each attribute) :

<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

  <com.mikhaellopez.circularimageview.CircularImageView
    android:id="@+id/movingIconImageView" android:layout_width="80dp" android:layout_height="80dp" android:layout_gravity="center" android:src="@drawable/test"
    app:civ_border="true" app:civ_border_color="#fff" app:civ_border_width="0px" app:civ_shadow="true" app:civ_shadow_color="#000" app:civ_shadow_radius="8"/>
</FrameLayout>

Attached sample project.
MyApplication4.zip

If I change the scale type to anything (example: center-inside), in the preview it doesn't show as circular anymore, and in runtime it just crashes.

[lopspower]

Yes just see limitation section in the readme:
https://github.com/lopspower/CircularImageView#limitations

• The ScaleType is always CENTER_CROP and you'll get an exception if you try to change it.
• Enabling adjustViewBounds is not supported as this requires an unsupported ScaleType.

[AndroidDeveloperLB]

So you see, it's not a nice thing...
Can you please support other types?
The FAB of Google's support library actually allows having the icon within, but not the opposite, as on your case.
Could be nice to have both functionalities on one class...

[lopspower]

I'll take a look at that. I didn't see the problem that way. I didn't really see the point of using another SacleType for my example but indeed the centerInside can be interesting. I can try to add CenterInside compatibility in a future version.

[AndroidDeveloperLB]

Thank you!

[lopspower]

ScaleType.CENTER_INSIDE is now available in the last version 👍 :

implementation 'com.mikhaellopez:circularimageview:3.2.0'

[AndroidDeveloperLB]

How did you do it so fast?

[AndroidDeveloperLB]

I think it's still just center-crop . See attached project, which compared the 2 options:

<androidx.core.widget.NestedScrollView
  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
  android:layout_height="match_parent" android:fillViewport="true" tools:context=".MainActivity">

  <LinearLayout
    android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical">

    <TextView
      android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="no scaling set"/>

    <com.mikhaellopez.circularimageview.CircularImageView
      android:layout_width="200dp" android:layout_height="200dp" android:src="@drawable/test" app:civ_border="true" app:civ_border_color="#fff" app:civ_border_width="0px"
      app:civ_shadow="true" app:civ_shadow_color="#000" app:civ_shadow_radius="8"/>

    <TextView
      android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="scaling set to center-inside"/>

    <com.mikhaellopez.circularimageview.CircularImageView
      android:layout_width="200dp" android:layout_height="200dp" android:scaleType="centerInside" android:src="@drawable/test" app:civ_border="true" app:civ_border_color="#fff"
      app:civ_border_width="0px" app:civ_shadow="true" app:civ_shadow_color="#000" app:civ_shadow_radius="8"/>
  </LinearLayout>
</androidx.core.widget.NestedScrollView>

MyApplication4.zip

[lopspower]

I apply the centerInside taking into account the larger side (unlike the centerCrop) to crop the image as little as possible. In your example, your image is square, which is why nothing happens. Also, I don't want to display a second circular image in the middle of the circle. The image displayed in the circularImageView will always be directly related to the size of the view.

For me it works well, it's the expected behavior:

[AndroidDeveloperLB]

"I apply the centerInside taking into account the larger side (unlike the centerCrop) to crop the image as little as possible."
As you can see in my case, "centerInside " didn't crop as minimal as possible. It cropped exactly like center-crop.

" In your example, your image is square, which is why nothing happens."
Why the shape of the image matters? It's actually the best to have a square one. Matches the square size of the button. On all FABs you usually give them a square image. Doesn't make sense to handle square images in bad way.

"Also, I don't want to display a second circular image in the middle of the circle. The image displayed in the circularImageView will always be directly related to the size of the view."
Why would it display a second circular image? The image isn't supposed to be cropped if you choose center-inside. It's supposed to be 100% shown inside. See here:
https://robots.thoughtbot.com/android-imageview-scaletype-a-visual-guide

Look at the support library FAB. When you give it an image (especially a square one) , it just puts it in the center, without cropping of any kind..

[chrismabotuwana]

Is this issue fixed? I noticed CenterInside still works as same as CenterCrop

[AndroidDeveloperLB]

@chrismabotuwana As I wrote, it's not fixed.
If you wish to report about it, you should create a new bug report, explaining it yourself why it's still a bug.
Even in the image he has shown, you can clearly see that it's cropped (the ears are cropped), while "centerInside" is supposed to show the entire content.