Whitespace between views in recycler view item

Question

I am using a card view for each item in a recycler view but i get white space below and above the picture and am not sure how,i need to get rid of it.This is the xml layout for each item.

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cv_custom"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginEnd="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginStart="10dp"
    android:clickable="true"
    android:elevation="2dp"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardCornerRadius="1dp"
    card_view:cardElevation="2dp"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image_path"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/event_image" />

        <TextView
            android:id="@+id/custom_event_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ellipsize="marquee"
            android:gravity="start|top"
            android:maxLines="1"
            android:padding="5dp"
            android:textColor="@color/parent"
            android:textSize="20sp"
            android:textStyle="bold" />

    </LinearLayout>
</android.support.v7.widget.CardView>

This i what it currently looks like with the xml provided.One item i with an image and one is without.Set the background of the recycler view to red so that the gaps are more visible.

score 3 · Accepted Answer · answered Oct 24 '15 at 16:59

3

Within the ImageView you need to provide a scale

android:scaleType="centerCrop"

The reason you are seeing the white space is because the aspect ration of the image and the container are different.

Imagine you are trying to fit a wide rectangle into a square. You can fit it in, but the top and bottom will be "empty" or in this case white.

If you do a center crop, then the image will be cropped. This will cut the rectangle into the square, so it fits perfectly!

answered Oct 24 '15 at 16:59

overflowingStack

205
1
5

that did not work,now i just have an elongated image with the same amount of space above and below it,i tried using -10dp as margin top for the image and then same for text view which perfectly solved the problem but this does not seem like a good idea,plus when no image is set the -10dp kicks in and the text view is half cut off. – Jude Fernandes Oct 24 '15 at 17:26
try different `scaleTypes` – overflowingStack Oct 24 '15 at 17:35
2

or try using `android:adjustViewBounds="true"` but I don't think that will fix this issue – overflowingStack Oct 24 '15 at 17:37
1

As it so happens that actually did fix the issue,i used adjust view bounds along with the scale type fit center and it worked perfectly,thank you. – Jude Fernandes Oct 24 '15 at 18:20

score 0 · Answer 2 · answered Dec 09 '15 at 00:25

I used to solve this problem by putting space under the view, but I didn't like all the extra space at the end of the list of views. But I realized, to just put half the space above, and half below (on the list item). Then when they are combined, it has twice as much space between items, and the normal space for padding the top and bottom of the list.

Whitespace between views in recycler view item

2 Answers2