Appcompat CardView and Picasso no rounded Corners

Question

I do not know where Exactly i Should Adress this issue, if it is my fault, there is something in the Picasso Lib Wrong or in the Cardview Library.

Basicly i have a <

Answer 1

As @kcoppock mentioned, this is by design.

Here is what I would do in this situation.

1) You can use Picasso Transformation interface to specify custom transformation for your image (in our case - image with rounded corners)

2) Apply this transformation to the Picasso request on pre-L devices

3) Since CardView adds some margin for the image - get rid of it on pre-L devices by calling setPreventOverlap(false)

Back to the code:

Custom transformation:

public class RoundedTransformation implements com.squareup.picasso.Transformation {
    private final int radius;
    private final int margin;

    public RoundedTransformation(final int radius, final int margin) {
        this.radius = radius;
        this.margin = margin;
    }

    @Override
    public Bitmap transform(final Bitmap source) {
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

        Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);

        if (source != output) {
            source.recycle();
        }

        return output;
    }

    @Override
    public String key() {
        return "rounded(radius=" + radius + ", margin=" + margin + ")";
    }
}

Picasso:

//feel free to play with radius to match your CardView
Picasso.with(mContext).load(p.getUrl()).transform(new RoundedTransformation(12, 0)).fit().into(viewHolder.mImage);