CardView compatibility problems on Pre-Lollipop

Question

I have some problems using the new CardView

That's my current situation: I want to use a CardView to provide a Floating Action Button for all devices (also Pre-Lollipop)

my activity's layout looks like this

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:cardview="http://schemas.android.com/apk/res-auto"
         android:id="@+id/container"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="#cdcdcd"
         android:focusable="false">

<include layout="@layout/toolbar"/>


<android.support.v7.widget.CardView
    android:layout_width="58dp"
    android:layout_height="58dp"
    cardview:cardPreventCornerOverlap="true"
    android:layout_gravity="bottom|right"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="18dp"
    cardview:cardCornerRadius="29dp"
    cardview:cardBackgroundColor="?attr/colorPrimary">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center"
        android:layout_margin="12dp"
        android:src="@android:drawable/ic_menu_edit"/>
</android.support.v7.widget.CardView>

Running the app on a Nexus 5 (4.4.4) the screen looks like this:

now I want to set the cardElevation by setting this in the xml

cardview:cardElevation="8dp"

After starting the app the button looks like this (it isn't a circle anymore):

It seems setting the card elevation also affects the view's dimensions... If you take now a closer look to picture #1 you can see, that this button isn't also a perfect circle.

Is there a way to figure that out? I also tried to set this

cardview:cardPreventCornerOverlap="false"

But it also has no affect

Thanks guys :)

Answer 1

Using CardView for FAB shadows is not the best idea. CardView is a layout, so it's pretty heavy. It's also very limited on pre-Lollipop versions. The shadow is not animated, corners pad the content and there's no ripple. Seems like there's no good method to achieve 100% FABs using only AppCompat.

In general I'm not happy being limited to AppCompat, so I wrote my own Button classes based on regular ones. I was able to achieve pretty good results as you can see on the screenshot. It's Gingerbread and there are animated shadows, ripples, vector graphics, etc. It's a pretty large repository, so I'm unable to give you a short solution here, but if you wish, check out the code on github.

Answer 2

You could try using the FAB from this MaterialDesign library if you're desperate for the shadow effect on older devices.

You can find the library at https://github.com/navasmdc/MaterialDesignLibrary

<com.gc.materialdesign.views.ButtonFloat
            android:id="@+id/buttonFloat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="24dp"
            android:background="#1E88E5"
            materialdesign:animate="true"
            materialdesign:iconDrawable="@drawable/ic_action_new" />

Alternatively you could create your own shadow resource in your drawables folder, and add the shape below your button, something like this:

<shape android:shape="oval"
 xmlns:android="http://schemas.android.com/apk/res/android">

 <solid android:color="@color/black_alpha"/>
 <corners android:radius="20dip"/>

And create a layer list resource where you include your button and the shadow

<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shadow"/>
<item
 android:drawable="@drawable/button"
 android:bottom="4px" />  
 </layer-list>