How do I decrease the space between cards in a CardView within a RecyclerView?
16,399
Solution 1
Edit these attributes
card_view:cardMaxElevation="1dp"
card_view:cardElevation="1dp"
so full code will be
<?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/card_view"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardCornerRadius="5dp"
card_view:cardMaxElevation="1dp"
card_view:cardElevation="1dp"
card_view:cardBackgroundColor="@color/colorPrimary"
card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/card_list">
<ImageView
android:id="@+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:src="@drawable/bag"
android:contentDescription="string/video_thumbnail_description"
android:layout_weight="1"
/>
<TextView
android:id="@+id/video_title_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="lovelksdjslkdjlsdj"
android:layout_weight="3"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
Solution 2
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android:id="@+id/card_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="4dp"
app:cardElevation="1dp"
app:cardMaxElevation="1dp"
app:cardUseCompatPadding="true" > //this line is game changer
Author by
intA
Updated on June 14, 2022Comments
-
intA almost 2 years
I'm working on a layout for the main screen of my app. I'm using a RecyclerView with a grid layout and a CardView within that. I'm trying to decrease the space between each card. A screenshot is below (with layout outlines turned on) as well as my layout files. How can I get each card to be a bit closer to each other vertically as well as horizontally? I've been playing around with margins a lot and I just can't seem to find the right margin or padding value to do this.
thumbnail_view.xml:
<?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/card_view" android:layout_width="match_parent" android:layout_height="200dp" card_view:cardCornerRadius="5dp" card_view:cardMaxElevation="15dp" card_view:cardElevation="10dp" card_view:contentPadding="5dp" android:padding="1dp" card_view:cardBackgroundColor="@color/colorPrimary" card_view:cardUseCompatPadding="true" card_view:cardPreventCornerOverlap="false" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:id="@+id/card_list"> <ImageView android:id="@+id/thumbnail" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:contentDescription="@string/video_thumbnail_description" android:layout_weight="1" /> <TextView android:id="@+id/video_title_view" android:layout_height="match_parent" android:layout_width="wrap_content" android:layout_gravity="center" android:gravity="center" android:layout_weight="2" /> </LinearLayout> </android.support.v7.widget.CardView>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.app.int_a.giantbombforandroid.main.mainscreen.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_list" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>
-
intA about 7 yearsThanks! That worked. Kinda weird that elevation controls the spacing between the cards though. I thought this had to do with the perceived elevation off the page to affect things like shadow and offset.
-
Eugen Pechanec about 7 years@intA Elevation is not supported below Lollipop. Extra space is added for compat shadow. Bigger potential shadow (maxCardElevation) means more space allocated. It's
1*maxCardElevation
horizontally and1.5*maxCardElevation
vertically on each side. Default card elevation is 2dp. -
Eugen Pechanec about 7 years@intA
app:cardUseCompatPadding="true"
makes sure the same arithmetics and allocated space is used on Lollipop. -
tronman over 6 yearsI was missing
card_view:cardUseCompatPadding="true"
and the padding wouldn't work until I added it. Adding this comment in case someone overlooks this attribute. -
ZarNi Myo Sett Win about 6 yearsI had same problem as @tronman. It is now fine after adding card_view:cardUseCompatPadding="true" .