Different results when using RoundedDrawable/Transformation and RoundedImageView

[marwinxxii]

I'm trying to draw people photos in circle (like in G+)

If I define RoundedImageView in xml:

<com.makeramen.RoundedImageView
        android:id="@+id/image3"
        android:layout_width="@dimen/size"
        android:layout_height="@dimen/size"
        android:src="@drawable/marcus"
        ci:border_color="@color/ring"
        ci:border_width="@dimen/width"
        ci:corner_radius="@dimen/radius"/>

With next parameters:

<color name="ring">#ff0000</color>
<dimen name="size">65dp</dimen>
<dimen name="radius">32.5dp</dimen><!-- size /2 -->
<dimen name="width">4dp</dimen>

Photo is drawn as expected (photo 3).

But if I'm trying to load image using Ion+Transformation or from RoundedDrawable

RoundedDrawable.fromDrawable(dr))
                .setBorderWidth(res.getDimensionPixelSize(R.dimen.width))
                .setCornerRadius(res.getDimensionPixelSize(R.dimen.radius))
                .setBorderColor(res.getColor(R.color.ring))
                .setOval(false)

Photo is drawn not in circle, but as rectangle with rounded corners. Also, you may notice, that width of border is also different for circle and rectangle.

Example:
First is using RoundedDrawable, second is using Ion transformation and third is RoundedImageView

I tried setting bounds for drawables but that didn't help me.

I can provide whole test project.

I can solve this issue by defining bigger radius when using transformation, but it seems weird for me.

[vinc3m1]

Huh. I'm not sure what the issue is but you should be using oval=true for that effect, then you don't even need to use corner_radius

[marwinxxii]

Thanks! Setting oval=true helped.

But the problem with border width using transformation remains.

Example:
I've used following settings for my ImageView layout_margin=8dp and border_width=16dp for RoundedDrawable.

Enable 'Show layout bounds' in dev options, and run Grid Wichterle app with size of cell 8dp.
Border should be as wide as two cells of grid or twice size of margin, but it's not.

[vinc3m1]

Ah, I think I know what's up. When you do fromDrawable there's no way for the function to know what the final imageview size should be, so we add the specified border and width to the original before it resizes, which explains the smaller border sizing.

I don't use Ion personally but from what I remember it's similar to Picasso, so you should try copying some of the code from the Picasso fragment in the example. I think Ion had a similar Transform/Transformation class. Make sure you use the .fit() or equivalent so the bitmap is resized before adding a border. I'm on my phone so can't be more thorough atm. Let me know if that helps.

[marwinxxii]

I tried setting drawable bounds both for original and for Rounded, but border stays the same.
Is there any other way how can I do it?

Yes, my Ion transformation builder is nearly the same as for Picasso. I thought there was a problem with it, but unfortunately not.

[vinc3m1]

Hm, I'm not sure in what order Ion applies its transformations, but basically it needs to apply the border after the resize, otherwise the border size will be wrong. I just tested on the Picasso example and things seem correct, so might be an issue with Ion.

[marwinxxii]

Yeah, but as I wrote problem appears without Ion too:

public RoundedDrawable getRoundedDrawable(Resources res, int colorRes, int widthRes, int drawableRes) {
        Drawable original = res.getDrawable(drawableRes);
        //setDrawableDesiredBounds(original);
        RoundedDrawable rounded = (RoundedDrawable) RoundedDrawable.fromDrawable(original);
        //setDrawableDesiredBounds(rounded);
        return rounded
                .setBorderColor(res.getColor(colorRes))
                .setBorderWidth(res.getDimensionPixelSize(widthRes))
                .setOval(true);
    }

Same result when setting and not setting bounds.

[vinc3m1]

Why are you setting drawable bounds twice? Are they different both times? And what are you doing when you "set desired bounds"? You have to actually resize the bitmap of a BitmapDrawable into a new bitmap, otherwise RoundedDrawable just calls getBitmap and applies border to that...

I guess we could try to use drawable bounds instead of bitmap bounds... But we might not be able to do that efficiently.

[vinc3m1]

I think there's a misunderstanding of drawable vs bitmap here. RoundedDrawable operates on the source bitmap, not the drawable. So drawable bounds don't matter, and when you set a Drawable into an ImageView, the bounds are set for you anyway. What you want to do is to resize the bitmap. Picasso's .fit() is similar to Ion's resize(w, h) except it automatically resizes to the target view's size.

[sushantpaygude]

I am not able to fit the entire image inside the imageview. Only a portion of the image is displayed inside the imageview. What should be done to fit the entire image inside?