Android CardView Padding Different on Different Android Version

Jun 17, 2018
CardView with consistent look/UI on all Android platforms

Android CardView have different padding/size on pre-Lollipop and post-Lolipop devices.

  • On pre-Lollipop devices, outer padding exist between 2 CardView
  • On KitKat devices and above (API v21+), there is no outer padding between 2 CardView

For a more consistent UI, use cardUseCompatPadding=true

CardView adds additional padding to draw shadows on platforms before Lollipop.

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.

Since setting this flag to true adds unnecessary gaps in the UI, default value is false.

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardUseCompatPadding="true"
    >

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

On pre-Lollipop devices, there is additional inner padding.

On pre-Lollipop platforms, 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.

To prevent this (inner padding) on pre-Lollipop devices, use cardPreventCornerOverlap=false. The side effect is that the content might overlap the rounded corner on pre-Lollipop devices (thus making it look like square corner, unless the content has transparent background). Based on my testing, this has no side effect on post-Lollipop devices (corner is still rounded without inner padding).

You can disable this behavior by setting this field to false.

Setting this value on Lollipop and above does not have any effect unless you have enabled compatibility padding.

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardUseCompatPadding="true"
    app:cardPreventCornerOverlap="false"
    >

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

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.