I created a list of Cards with the new CardView and RecyclerView that look this way:
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_radius
to 8dp
, with no result! Any ideas?
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"/>