White Space with CardView on pre-lollipop devices

6
votes

I am attempting to add rounding and shadows to some views on an app and am utilizing the card view library to achieve that. It is looking good on lollipop devices but am running into compatibility issues with anything pre-lollipop.

I will preface this by saying that I have looked at the answers in the questions below have found that none of them are working for me.

The most popular answer was to add the attribute 'cardPreventOverlap=false' but this removes the rounded corners. I have tried variations of this flag and 'cardUseCompatPadding="true"' but none of them seem to do the trick. Has anyone else run into the same problem?

My code:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    card_view:cardCornerRadius="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="44dp"
            android:layout_height="match_parent"
            android:layout_marginRight="4dp"
            android:background="@color/mid_yellow"
            android:padding="0dp"
            android:src="@drawable/ic_add_white_24dp" />

        <TextView
            style="@style/Text.Primary.White"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:text="Button" />
    </LinearLayout>

This is how it currently looks on Android 5.0:

enter image description here

The exact same code on 4.4.2 displays as:

enter image description here

With 'cardPreventOverlap=false':

enter image description here

Update Unfortunately we were not able to solve the issue; given that the app only had small install base pre5.0 we decided it was not important. We ended up going with the third option 'cardPreventOverlap=false'.

2
androidmaterial-designandroid-cardview

2 Answers

3
votes

Content clipping is not supported, because is quite expensive on older devices. If you wish, you can use Carbon. It has its own CardView implementation, which correctly clip content to rounded corners. Carbon also adds content clipping and elevation to all other layouts so for your purpose you can use a LinearLayout with rounded corners and shadow. See the image:

enter image description here

0
votes

Instead of using card_view:cardCornerRadius you can set the background of the cardview with a drawable like:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="4dip"/>
</shape>

You can also do this for each element in your cardview such that you have for each element the correct background color. In that case you can specify only certain corners with:

<corners 
    android:topLeftRadius="4dp"
    android:bottomLeftRadius="4dp"/>

For your + button for example.

Use this in combination with cardUseCompatPadding="true"