Unnecessary padding in CardView?
Solution 1
I went through the developer docs again and found that:
On API 20 and before, CardView does not clip the bounds of the Card for the rounded corners. Instead, it adds padding to content so that it won't overlap with the rounded corners.
So for pre-lollipop devices I have to call setPreventCornerOverlap (false);
on the cardview.
Update: The same can be done through xml code by adding app:cardPreventCornerOverlap="false"
in card view.
Solution 2
Setting app:cardPreventCornerOverlap="false"
will resolve the problem but also remove corner all pre-lollipop devices. If you want round corner on all devices, add it manually:
card_view_round_corner_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/transparent"/>
<stroke android:width="2dp" android:color="@color/Black"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="@color/transparent"/>
<corners android:radius="6dp"/>
<stroke android:width="2dp" android:color="@color/Black"/>
</shape>
</item>
</layer-list>
In cardview
<android.support.v7.widget.CardView android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"card_view:cardCornerRadius="@dimen/conner_radius"
card_view:cardBackgroundColor="@color/Black"
card_view:cardElevation="@dimen/z_card">
<!-- Put your card contain here -->
<View
android:background="@drawable/card_view_round_corner_border"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
But this solution only works on solid background such as black or white.
Ram Patra
Built Presentify. Author of JBot, Animatescroll, and various others. Connect with me at rampatra.com #java #spring #swift #reactive #javascript #android #SOreadytohelp
Updated on June 02, 2022Comments
-
Ram Patra almost 2 years
I have implemented CardView in my app and everything works fine except there is a little padding around the image if I put radius to the card.
It appears like this:
But in android docs and in this article the image takes the entire cardview, so can u help me achieve that.
My layout file is like:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="8dp"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="200dp" card_view:cardBackgroundColor="@android:color/white" card_view:cardCornerRadius="4dp"> <ImageView android:id="@+id/media_image_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:alpha="0.8" android:background="?attr/colorPrimary" android:padding="4dp"> <TextView android:id="@+id/media_download" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:textSize="11sp"/> <TextView android:id="@+id/category_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:textColor="@color/primary_text" android:textSize="12sp"/> </RelativeLayout> </android.support.v7.widget.CardView> </LinearLayout>
NOTE: The screenshot is captured on a pre-lollipop device.
-
Alécio Carvalho about 9 yearsThis is the way to go.
-
Krit almost 9 yearsyou are awesome! this is what i just need.
-
Can Uludağ over 8 yearsThanks! It works. But there is a problem. After adding this tag, it dismiss the corner radius. How can I solve this?
-
Ram Patra over 8 years@CanUludağ yes, the corner radius is 0 for android version lower than 5 but for >=5 the radius is equal to the value you set.
-
Hugo Gresse over 8 yearsfor xml attr:
cardview:cardPreventCornerOverlap
-
RobVoisey over 8 yearsI am setting the cardCornerRadius to 4dp and setting the cardPreventCornerOverlap to false; it's getting rid of the white space but removes the rounding. This is on a device running 4.4.2, any ideas?
-
Ram Patra over 8 years@RobVoisey Yes, the roundings are removed on all pre-lollipop devices. But on lollipop and post-lollipop devices you will get a rounding/radius of
4dp
. -
Animesh Mangla over 8 years@HugoGresse it is card_view:cardPreventCornerOverlap="false"