ImageView don't match in cardView - Android

Question

I have bellow xml :

<RelativeLayout
    android:id="@+id/relative_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:id="@+id/relative_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image_product_imageview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitXY" />

        <TextView
            android:id="@+id/status_product_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_gravity="left"
            android:layout_marginTop="20dp"
            android:gravity="center_vertical"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:visibility="invisible" />
    </RelativeLayout>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/relative_three"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_below="@+id/relative_two">

        <Spinner
            android:id="@+id/select_spinner"
            android:layout_width="15dp"
            android:layout_height="0dp"
            android:layout_marginRight="5dp"
            android:dropDownVerticalOffset="40dp"
            android:gravity="center_vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHeight_default="wrap"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/name_product_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:ellipsize="marquee"
            android:gravity="right"
            android:maxLines="1"
            android:text="TEXT"
            app:layout_constraintRight_toLeftOf="@+id/select_spinner"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/count_products_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:gravity="right"
            android:text="TEXT"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/select_spinner"
            app:layout_constraintTop_toBottomOf="@+id/name_product_textview" />
    </android.support.constraint.ConstraintLayout>
</RelativeLayout>

In above xml I have bellow ImageView :

    <ImageView
        android:id="@+id/image_product_imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY" />

Problem: My ImageView don't match in cardView (left and right and top).It has 2 or 3 space around ImageView(left and right and top).

In my source code I am setting Image like bellow :

Picasso.with(context)
                    .load(productsModelList.getPictureUrl())
                    .placeholder(AppCompatDrawableManager.get().getDrawable(context, R.drawable.placeholder_pictures))
                    .fit()
                    .into(image_product_imageview);

Please check your layout file it has padding. Also the layout with id relative_one has width attribute as 'wrap_content" and it's inner child have width attribute as "match_parent".. Don't you think they are confusing each other..? — Ashish Pardhiye, Jan 15 '18 at 09:31
Possible duplicate of [CardView has extra margin in each edge on Pre-Lollipop](https://stackoverflow.com/questions/29068430/cardview-has-extra-margin-in-each-edge-on-pre-lollipop) — Pouya Heydari, Jan 15 '18 at 09:34

score 0 · Accepted Answer · answered Jan 15 '18 at 09:31

This space is the result of that CardView supports for system older than L (API 20). To make your layouts look the same either on the pre-Lollipop (and pre-CardView widget) or Lollipop and newer, Android introduced some additional attributes.

Because overlapping (rounding the corners) the content was difficult for older Android versions, the cardPreventCornerOverlap has been added and has been set by default as true. That is why there're white stripes around your ImageView - you can check by yourself that their width is closely related to the cardCornerRadius value.

To remove this padding turn off cardPreventCornerOverlap. You can do it:

via xml by card_view:cardPreventCornerOverlap="false"
or programatically by yourCardView.setPreventCornerOverlap(false).

Keep in mind that this gives you the effect you want only for API 20+. On devices with older versions of a system, your rounded corners will be invisible (hidden under not-rounded image).

To know more check the CardView doc. In the first paragraph you can find the official note about your issue.

ImageView don't match in cardView - Android

1 Answers1