FAB on pre-lollipop devices with the new support lib

Question

The support library doc states that the version 22.2 supports FloatingActionButton on Pre-Lollipop devices.

I have implemented a demo app to show a FAB on KitKat. The FAB is shown but I still can't set the elevation neither in the xml nor in the code. In the xml I get the warning and I need to use tools:ignore="NewApi". If I call setElevation programmatically I get an exception because the method does not exist.

I have added this to my layout

<android.support.design.widget.FloatingActionButton
    android:id="@+id/add_button"
    style="@style/FAB"
    android:src="@drawable/ic_add_white_24dp"
    android:contentDescription="@string/add_ringtone" />

where the style is defined like this:

<resources
    xmlns:tools="http://schemas.android.com/tools">
    <style name="FAB" tools:ignore="NewApi">
       <item name="android:layout_width">@dimen/fab_width</item>
       <item name="android:layout_height">@dimen/fab_height</item>
       <item name="android:background">@drawable/fab_background</item>
       <item name="android:layout_alignParentBottom">true</item>
       <item name="android:layout_alignParentRight">true</item>
       <item name="android:layout_marginBottom">@dimen/fab_margin</item>
       <item name="android:layout_marginRight">@dimen/fab_margin</item>
       <item name="android:elevation" >@dimen/fab_elevation</item>
       <item name="android:stateListAnimator">@anim/rise</item>

    </style>

</resources>

What should I do to set the elevation on KitKat with the new support library?

score 3 · Accepted Answer · answered May 31 '15 at 17:42

3

Since the new FAB is now part of the support library, you'll probably need to replace

<item name="android:elevation">@dimen/fab_elevation</item>

by

<item name="app:elevation">@dimen/fab_elevation</item>

in your style.

answered May 31 '15 at 17:42

stkent

19,772
14
85
111

Please see: http://stackoverflow.com/questions/30532863/how-to-add-shadow-to-the-fab-provided-with-the-android-support-design-library#30539065. – Jared Burrows Jun 02 '15 at 06:45

kingston · Answer 2 · 2015-06-01T10:00:09.890

This is the solution:

In the gradle file:

dependencies {
    compile 'com.android.support:support-v4:22.2.0'
    compile 'com.android.support:design:22.2.0'
}

In the layout file:

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/add_button"
    style="@style/FAB"
    app:elevation="@dimen/fab_elevation"
    android:src="@drawable/ic_add_white_24dp"
    android:contentDescription="@string/add_ringtone" />

In the styles.xml under values folder:

<style name="FAB">
    <item name="android:layout_width">@dimen/fab_size</item>
    <item name="android:layout_height">@dimen/fab_size</item>
    <item name="android:background">@drawable/fab_background</item>
    <item name="android:layout_alignParentBottom">true</item>
    <item name="android:layout_alignParentRight">true</item>
    <item name="android:layout_marginBottom">@dimen/fab_edge_distance</item>
    <item name="android:layout_marginRight">@dimen/fab_edge_distance</item>

In the styles.xml under values-21 folder:

<resources
    xmlns:tools="http://schemas.android.com/tools">
    <style name="FAB" tools:ignore="NewApi">
       <item name="android:layout_width">@dimen/fab_width</item>
       <item name="android:layout_height">@dimen/fab_height</item>
       <item name="android:background">@drawable/fab_background</item>
       <item name="android:layout_alignParentBottom">true</item>
       <item name="android:layout_alignParentRight">true</item>
       <item name="android:layout_marginBottom">@dimen/fab_margin</item>
       <item name="android:layout_marginRight">@dimen/fab_margin</item>
       <item name="android:stateListAnimator">@anim/rise</item>

    </style>

</resources>

notice that I didn't manage to set the android:stateListAnimator yet — kingston, Jun 01 '15 at 09:52

FAB on pre-lollipop devices with the new support lib

2 Answers2