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

我想创建一个浮动动作按钮(添加项目到一个列表视图) ，像谷歌日历，保持与前棒棒糖安卓版本(5.0之前)兼容。

我设计了这个布局:

Activity 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>

样式 styles.xml

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

结果是相似的，但没有阴影，材质设计的一个特点:

日历的浮动动作按钮:

Calendar's floating action button

我的应用程序的浮动动作按钮:

My app's floating action button

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

我已经使用了属性标高，但是不起作用

120566 次浏览
小开

添加填充和立面:

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

尝试 这个图书馆，它支持阴影，有 minSdkVersion=7也支持 android:elevation隐式属性为 API-21。

原文为 给你。

小开

在你的应用程序中添加一个 FAB (浮动动作按钮)的库有很多，这里有一些我知道的。

Makovkastar 的 FAB

复合 FAB

包括 FAB 的材料设计库

在预棒棒糖设备上支持所有这些库，至少到 api 8

小开

我通常使用 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，下面是结果的截图:

enter image description here

小开

这里还有一个免费的 Android 浮动动作按钮库 它有许多定制，需要 SDK 版本9和更高版本

enter image description here

完整演示视频

小开

@ 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>
小开
最佳答案

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

Https://developer.android.com/reference/android/support/design/widget/floatingactionbutton.html

只需要在你的分级文件中添加一个新的名为 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" />

提交答案