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

If you wish to have a global solution for that issue, you can use Carbon's CardView. It correctly clips its content to rounded corners on all devices back to Froyo. See the image:

Answer 2

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

Answer 3

According to the docs, this as designed:

Due to expensive nature of rounded corner clipping, on platforms before L, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection (See setPreventCornerOverlap(boolean) to change this behavior).

See the CardView docs for more info.

Answer 4

It works for me like this:

1. Replace the ImageView with RoundedImageView (https://github.com/vinc3m1/RoundedImageView).
2. Set the riv_corner_radius attribute on the RoundedImageView to be the same as CardView's corner.
3. Set cardPreventCornerOverlap to false on the CardView (app:cardPreventCornerOverlap="false").
4. It looks the same on L and pre-L now.

Answer 5

Use the code below.

Important: don't set background for ImageView in XML.

<android.support.v7.widget.CardView 
                                    android:layout_width="match_parent"
                                    android:layout_height="130dp"
                                    app:cardCornerRadius="5dp"
                                    app:cardElevation="0dp"
                                    app:cardUseCompatPadding="true">

    <RelativeLayout
        android:id="@+id/rl_target_marry"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/textView2"
        >

        <ImageView
            android:id="@+id/img_target_marry"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            />
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:foreground="?attr/selectableItemBackground">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_gravity="right|center_vertical"
                android:layout_marginRight="16dp"
                android:text="Marry"
                android:textColor="@color/colorWhite"
                android:textSize="28sp"/>

        </FrameLayout>

    </RelativeLayout>
</android.support.v7.widget.CardView>