Custom Drawable not generating round corners for CardView's image

Question

I created a list of Cards with the new CardView and RecyclerView that look this way:

My card

I've tried to modify the card with round corners as explained by Mariotti in this post.

PROBLEM: The problem is that, as you can see from the screenshot I am only able to set the card's corner while the image remains squared.

In the example a custom Drawable class extending Drawable draws a rounded rectangle using Canvas.drawRoundRect(), and use a Paint with a BitmapShader to fill the rounded rectangle with a texture instead of a simple color, as also explained here.

In my Adapter I have:

@Override
public ContactViewHolder onCreateViewHolder(final ViewGroup viewGroup, int i) {
    final View itemView = LayoutInflater
                    .from(viewGroup.getContext())
                    .inflate(R.layout.item_card_view, viewGroup, false);
    CardView cardView = (CardView) itemView.findViewById(R.id.card_view);

    ImageView imageView = (ImageView) itemView.findViewById(R.id.hImage);

    Bitmap mBitmap = BitmapFactory.decodeResource(itemView.getResources(), R.drawable.background);
    //Default
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
        //Default
        imageView.setBackgroundResource(R.drawable.background);
    } else {
        //RoundCorners
        madapps.hellogridview.RoundCornersDrawable round = new madapps.hellogridview.RoundCornersDrawable(
                mBitmap,            
             itemView.getResources().getDimension(R.dimen.cardview_default_radius)
                , 5); //or your custom radius

        cardView.setPreventCornerOverlap(false); //it is very important

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
            imageView.setBackground(round);
        else
            imageView.setBackgroundDrawable(round);
    }

    //Set onClick listener
    cardView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int tag = (Integer) v.findViewById(R.id.hTitle).getTag();
            Toast.makeText(viewGroup.getContext(), "Clickable card no: "+tag, Toast.LENGTH_LONG).show();
        }
    });
    return new ContactViewHolder(itemView);
}

and I've overridden the value of R.dimen.cardview_default_radiusto 8dp, with no result! Any ideas?

I have tried doing the same, it does not help. If you remove image or move it down you will notice that the card has got round edges. So problem is of the ImageView that is being used. It is difficult to understand that the Image corners leave it's parent!. I have not personally tried this out but perhaps if the top corners of the image were made rounded, it might help. — Msk, May 03 '15 at 16:43
I understand your point. Rounding the image itself it is also another way to go. However, the custom `Drawable` class (here: https://gist.github.com/gabrielemariotti/f5a176f1b941200fac68#file-roundcornersdrawable-java) was created to programmatically make the images' corners rounded, as also explained here: http://www.curious-creature.com/2012/12/11/android-recipe-1-image-with-rounded-corners/ — Cris, May 03 '15 at 17:10
I have exactly the same problem. How you solve this problem? — Nurzhan Nogerbek, May 19 '15 at 18:33

score 2 · Accepted Answer · answered May 19 '15 at 18:37

I've solved it using this:

https://github.com/pungrue26/SelectableRoundedImageView

and applying a radius of 10dp (same as the card) to the top corners of the image:

<com.joooonho.SelectableRoundedImageView  android:id="@+id/headerImage"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"     
    android:layout_width="wrap_content"
    android:src="@drawable/cardbackground3"
    android:scaleType="centerCrop"
    android:adjustViewBounds="true"
    app:sriv_left_top_corner_radius="10dip"
    app:sriv_right_top_corner_radius="10dip"
    app:sriv_left_bottom_corner_radius="0dip"
    app:sriv_right_bottom_corner_radius="0dip"
    app:sriv_border_color="#333333"/>

score 2 · Answer 2 · answered May 19 '15 at 20:39

2

Thanks thats exatly what I need. But you know there is one problem know. There is little space like padding between borders of CardView and Image. But there was no paddings in my case. It seems to mе that this library rounded corners but dont change position of image. Do you have the same think? By the way my layout the same as yours. Do you have any ideas about that?

enter image description here

answered May 19 '15 at 20:39

Nurzhan Nogerbek

4,806
16
87
193

1

Thats my bad. I forgot about setPreventCornerOverlap(false) Now its normal. – Nurzhan Nogerbek May 19 '15 at 20:48

Custom Drawable not generating round corners for CardView's image

2 Answers2