'Unnecessary padding in CardView?
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.
Solution 1:[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:[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.
Solution 3:[3]
For me adding android:scaleType="centerCrop" works, it removes unwanted padding.
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="220dp"
android:layout_height="150dp"
app:cardCornerRadius="5dp"
android:elevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
>
<ImageView
android:id="@+id/imgUrl"
android:layout_width="match_parent"
android:layout_height="110dp"
android:scaleType="centerCrop">
</ImageView>
</RelativeLayout>
</androidx.cardview.widget.CardView>
Solution 4:[4]
Just use FrameLayout instead of LinearLayout, it works
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-4dp">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="5dp"
card_view:cardCornerRadius="4dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true"
>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
>
<ImageView
android:id="@+id/imageView"
android:tag="image_tag"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="@drawable/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_weight="2"
android:orientation="vertical"
>
<TextView
android:id="@+id/textViewName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Android Name"
android:textAppearance="?android:attr/textAppearanceLarge"/>
<TextView
android:id="@+id/textViewVersion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Android Version"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Mehrdad |
| Solution 3 | Suhail khan |
| Solution 4 | Jitendra Bansiwal |