"Ugly" CardView on Pre-Lollipop devices

Question

I am using CardView as custom item for RecyclerView. They looks good on Android 5+ but so different on older Android versions.

On Android 5 +

On Android < 5

The code is the same:

<android.support.v7.widget.CardView 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="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
card_view:cardCornerRadius="1dp"
card_view:cardElevation="1dp">

... other items ...

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

Is there a way to achieve the Android 5+ behavior on pre-Lollipop devices?

Zielony Zielony · Accepted Answer · 2017-02-23T23:45:26

Using the support CardView? No.

Personally I think that the support CardView is broken and shouldn't be used at all. It looks and works a little bit different on Lollipop and on older systems. The shadow is different, the padding is different, content clipping doesn't work on pre-Lollipop devices, etc. The API is also weird and confusing. That's why it's hard to get good results on all platforms. If you can live without cards, I would go that way.

Of course it's possible to create a custom, nice-looking, backwards-compatible card, but it's a bit complex task. To create a card on your own you have to implement:

rounded corners with content clipping (doesn't work in the support CardView). Here's how to do it properly.
shadows drawn outside the card (not inside, like the support CardView). This one depends on your needs. I would override drawChild(...) in a parent container, where I could draw shadows around cards freely. Shadow generation method doesn't matter - it could be a gradient, a static 9-patch or a RenderScript-blurred black shape.

I was frustrated by the look and the API of CardView as well, so I created my own implementation. It can be found on GitHub - the library is called Carbon and using it is probably the easiest way to get a decent card. After importing the library simply add style="?attr/carbon_cardViewStyle" to any layout to make it look like a card:

<carbon.widget.RelativeLayout 
    style="?attr/carbon_cardViewStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

"Ugly" CardView on Pre-Lollipop devices

1 Answers