I want to display an Image in a CardView
using an ImageView
as its child.
I created a layout like this:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:parentTag="androidx.cardview.widget.CardView"
app:cardCornerRadius="40dp">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/some_image" />
</merge>
I expected it to show my image but its corners to be removed respectively. I didn't set any border, so the sides of the CardView
/merge
don't show any. However, the rounded corners of the CardView
do show some sort of border or maybe remnants of it's background color or something:
As you can see, the corner shows some grey pixels and then the straight parts of the card view don't (there might be some color difference between the black of the background and the black of the inside image but you can ignore that, it really just happens at the corners).
I played with a few things like app:cardElevation
, suggested in this answer or card_view:cardPreventCornerOverlap
in this one under the same question and it didn't change.
Most of the questions and posts I've found regarding the CardView
's corners have more to do with the actual border of the CardView
, which is not the case for me. The Image gets cropped respective to the rounded corners, but those gray lines appear.
This happens with ImageView
or if I just put a View
in its stead and color its background to a similar color. If I use a bright color, this doesn't seem to happen. And I don't mean it's less noticeable, but it actually doesn't happen:
I suspected that the original background of the CardView
might somehow be responsible for this, so I set setCardBackgroundColor
to the same value as the background and it actually removed the ugly gray corners. So it looks to me, even though my ImageView
fills the parent CardView
completely, the corners somehow shine through.
So I have my answer as to how to avoid those ugly gray lines, but I don't understand how this happens and whether this is the right way
to go about this or whether it's just a bug I found a workaround for. Have I done something wrong?
I'm using a Pixel 4a.