Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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: screenshot_2014-12-27-20-31-55

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.

like image 698
Ram Patra Avatar asked Dec 27 '14 15:12

Ram Patra


People also ask

How do I add padding to CardView?

In fact, the Android system does just that: Before L, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

What is Android padding?

The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific number of pixels. For instance, a left padding of 2 will push the view's content by 2 pixels to the right of the left edge.


2 Answers

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.

like image 198
Ram Patra Avatar answered Oct 11 '22 01:10

Ram Patra


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.

like image 37
thanhbinh84 Avatar answered Oct 10 '22 23:10

thanhbinh84