如何使用 AppCompat v21 在 android 中创建浮动操作按钮 (FAB)？答案

【问题标题】：How to create a floating action button (FAB) in android, using AppCompat v21?如何使用 AppCompat v21 在 android 中创建浮动操作按钮 (FAB)？
【发布时间】：2015-01-13 19:20:25
【问题描述】：

我想创建一个浮动操作按钮（将项目添加到列表视图），如谷歌日历，保持与棒棒糖之前的 Android 版本（5.0 之前）的兼容性。

我创建了这个布局：

活动 main_activity.xml：

<LinearLayout ... >

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

     <RelativeLayout ... >

     <!-- My rest of the layout -->

          <!-- Floating action button -->
          <ImageButton style="@style/AppTheme"
                     android:layout_width="60dp"
                     android:layout_height="60dp"
                     android:text="New Button"
                     android:id="@+id/button"
                     android:src="@drawable/ic_fab"
                     android:background="@drawable/fab"
                     android:layout_alignParentBottom="true"
                     android:layout_alignParentRight="true"
                     android:layout_marginBottom="24dp"
                     android:layout_marginRight="24dp"/>

     </RelativeLayout>

 </LinearLayout>

可绘制的 fab.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#ffa48bc0"/>
</shape>

样式样式.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff1d79b1</item>
        <item name="colorPrimaryDark">#ff084d95</item>
    </style>
</resources>

结果相似，但没有阴影，这是材料设计的一个特点：

日历的浮动操作按钮：

我的应用的浮动操作按钮：

如何为我的按钮添加阴影？

我已经使用了属性提升，但是不起作用

【问题讨论】：

海拔 API 仅适用于 Lollipop，您是否在 Lollipop 设备上尝试过？
现在可能是您接受给定答案之一的时候了。
事实上，在我的 4.4.2 三星 Galaxy S III 上，阴影就在那里，这要归功于 AppCompat。

标签： android xml

【解决方案1】：

不再需要创建自己的 FAB 或使用第三方库，它已包含在 AppCompat 22 中。

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

只需在您的 gradle 文件中添加名为 design 的新支持库：

compile 'com.android.support:design:22.2.0'

...你很高兴：

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_happy_image" />

【讨论】：

如何改变背景颜色？
默认情况下，背景颜色将是您主题中的“colorAccent”。不过你也可以使用 floatingActionButton.setRippleColor(color)，不要让“ripple”这个名字吓到你，它也适用于棒棒糖之前的设备。
我没有 colorAccent，如果我添加一个并将颜色设置为其他颜色，则它不起作用 - 颜色粘在绿色/青绿色。
我为此使用了第三方。真的帮了我很多。谢谢。一个问题是，它仍然感觉它没有完全开发。
@Jjang @user1354603 来自文档The background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

【解决方案2】：

我通常使用 xml 可绘制对象在棒棒糖前小部件上创建阴影/高度。例如，这里是一个 xml 可绘制对象，可以在棒棒糖之前的设备上使用，以模拟浮动操作按钮的高度。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="?attr/colorPrimary"/>
    </shape>
</item>
</layer-list>

您可以选择任何颜色来代替?attr/colorPrimary。这是结果的屏幕截图：

【讨论】：

感谢您分享此内容。我害怕再次挖掘 XML 代码来重新创建它。
我刚刚实现了，很棒，只有一个奇怪的地方。似乎当您旋转手机时，阴影/高度会丢失。对此有什么想法吗？在此先感谢贾斯汀
@AmilcarAndrade 这是个好问题。我在其他 xml 可绘制对象中遇到过类似的事情，但我实际上是从可绘制对象本身中提取位图。为了解决这个问题，我基本上将可绘制对象用作单例；设置一次，因此不会再次绘制。也许您可以将drawable作为静态变量并将其设置为onCreate中的背景？
我还添加了一个增强功能，你可以很容易地添加波纹效果，下面是代码。
为了以后的参考，这是一个很好的例子来避免阴影和高度 --> curious-creature.com/2008/12/18/avoid-memory-leaks-on-android/…

【解决方案3】：

有很多库在你的应用程序中添加一个 FAB（浮动操作按钮），我知道的其中几个。

makovkastar's FAB

futuersimple's Composite FAB

Material Design library which includes FAB too

所有这些库都在棒棒糖之前的设备上受支持，最低到 api 8

【讨论】：

【解决方案4】：

这里还有一个免费的Floating Action Button library for Android 它有许多自定义项，需要 SDK 9 及更高版本

Full Demo Video

【讨论】：

请阅读：meta.stackexchange.com/questions/57497/…

【解决方案5】：

@Justin Pollard xml 代码非常好用。作为旁注，您可以使用以下 xml 行添加涟漪效果。

    <item>
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight" >
        <item android:id="@android:id/mask">
            <shape android:shape="oval" >
                <solid android:color="#FFBB00" />
            </shape>
        </item>
        <item>
            <shape android:shape="oval" >
                <solid android:color="@color/ColorPrimary" />
            </shape>
        </item>
    </ripple>
</item>

【讨论】：

【解决方案6】：

试试this library，它支持阴影，有minSdkVersion=7，还隐式支持API-21的android:elevation属性。

原帖是here。

【讨论】：

【解决方案7】：

添加内边距和高程：

 android:elevation="10dp"
 android:padding="10dp"

【讨论】：