CODEWITHSUNDEEP
androidpaddingandroid-recyclerviewandroid-cardview
Jude Fernandes
Jude Fernandes

Reputation: 7517

Whitespace between views in recycler view item

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.

Sample

Upvotes: 1

Views: 907

Answers (2)

Rock Lee
Rock Lee

Reputation: 9566

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.

Upvotes: 0

overflowingStack
overflowingStack

Reputation: 205

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!

Upvotes: 3

Related Questions