Android Cardview Remove Padding

Android CardView remove padding

UDPATE

Well, seems there is a much easier way to do it, without guessing the padding and all:

card_view:cardPreventCornerOverlap="false"

or using java:

cardView.setPreventCornerOverlap(false)

You can read all about it here.

ORIGINAL ANSWER

It is an intentional padding to avoid content from bleeding off the rounded corner of the card in pre lollipop versions (since clipping is not available). If you want to get rid of it all together you may use a negative padding in pre-lollipop versions for the contentPadding attribute of the CardView such as:

card_view:contentPadding="-8dp"

or using java:

int padding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics());
cardView.setContentPadding(-padding,-padding,-padding,-padding);

I'm not particularly sure which value will work seamlessly, you'll need to experiment and see for yourself.

Unnecessary padding in CardView?

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.

How to remove cardview padding?

The answer is that cardElevation should be set to 0

How can i remove unnecessary top padding in cardview?

I found a solution for my problem by changing the height of the imageView to 130dp. Apparently since i made the with of the image to match_parent, i had to find the exact height that will suit the image inside the cardview without giving it some extra padding.

How to override standart padding in CardView while using cardUseCompatPadding?

Taken from the documentation:

This may cause Cards to have different sizes between Lollipop and
before Lollipop. If you need to align CardView with other Views, you
may need api version specific dimension resources to account for the
changes. As an alternative, you can set this flag to true and CardView
will add the same padding values on platforms Lollipop and after.

Next, you can add the indentation you need by using the margin attribute

example.xml:

<FrameLayout 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:background="#2861">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:id="@+id/item_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="1dp"
            android:layout_marginEnd="2dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="1dp"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?attr/selectableItemBackground"
            card_view:cardBackgroundColor="@android:color/white"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="2dp"
            card_view:cardPreventCornerOverlap="false"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="130dp"
                android:animateLayoutChanges="true"
                android:orientation="horizontal"
                android:weightSum="3">

                <!-- Your code here -->

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </FrameLayout>

    <!-- badge -->
    <FrameLayout
        android:id="@+id/ribbon_main"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_gravity="end"
        android:background="@drawable/corner_ribbon"
        android:visibility="visible" />

</FrameLayout>

Now it looks great on different versions of the API.

API 19 example

API 26 example

comparison side by side

In your project, you can use these settings for both CardView and FrameLayout (ribbon) to achieve the desired result.

example_2.xml:

<FrameLayout 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:background="#2861">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:id="@+id/item_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="18dp"
            android:layout_marginTop="17dp"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?attr/selectableItemBackground"
            card_view:cardBackgroundColor="@android:color/white"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="2dp"
            card_view:cardPreventCornerOverlap="false"
            card_view:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="130dp"
                android:animateLayoutChanges="true"
                android:orientation="horizontal"
                android:weightSum="3">

                <!-- Your code here -->

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </FrameLayout>

    <!-- badge -->
    <FrameLayout
        android:id="@+id/ribbon_main"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_gravity="end"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/corner_ribbon"
        android:visibility="visible" />

</FrameLayout>

increased indentation

---

Related Topics