0

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:

CardView Corner

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:

enter image description here

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Benjamin Basmaci
  • 2,247
  • 2
  • 25
  • 46

0 Answers0