I have a CardView
with rounded corners, I want to have an ImageView
at the top like shown in the example taken from the material design guidelines below.
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view" android:layout_width="wrap_content" android:layout_height="wrap_content" card_view:cardCornerRadius="4dp"> <!-- ... --> </android.support.v7.widget.CardView>
Then inside the CardView
I have this ImageView
<ImageView android:id="@+id/imageView" android:layout_width="fill_parent" android:layout_height="150dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:scaleType="centerCrop" android:src="@drawable/default_cover" />
If I have the card_view:cardCornerRadius
set to 0dp
then the ImageView
fits the card like how I want it to.
However, the material design guidelines state that cards should have rounded corners, and not square corners.
The problem I have is when I set the card_view:cardCornerRadius
to something other than 0dp
, e.g. 4dp
, then the following happens:
As can be seen, the ImageView
does not fit into the CardView
.
My question is, how can I make this ImageView
fit to the layout of the CardView
when it has rounded corners.
To achieve a circular shape using Card view you can set the shape property, android:shape="ring". You don't need to add the shape attribute as the cardCornerRadius is enough.
You can add ImageView and VideoView in RelativeLayout and set ImageView to invisible and VideoView to visible and vice-versa and you can play video on onClick.
You need to do 2 things :
1) Call setPreventCornerOverlap(false)
on your CardView.
2) Put rounded Imageview inside CardView
About rounding your imageview, I had the same problem so I made a library that you can set different radii on each corners. There is one good library(vinc3m1’s RoundedImageView) that supports rounded corners on ImageView, but it only supports the same radii on every corners. But I wanted it to be rounded only top left and top right corners.
Finally I got the result what I wanted like below.
https://github.com/pungrue26/SelectableRoundedImageView
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With