如何使用AppCompat v21在android中创build浮动操作button(FAB)?

我想创build一个浮动动作button(添加项目到一个列表视图),如谷歌日历,保持与棒棒糖前的Android版本(5.0之前)的兼容性。

我创build了这个布局:

活动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> 

结果是相似的,但没有阴影,材料devise的一个特点:

日历的浮动操作button:

日历的浮动操作按钮

我的应用程序的浮动操作button:

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

我如何将阴影添加到我的button?

我已经使用属性提升,但不起作用

  • Android - 片段标签上的未知属性样式
  • 什么工具:片段xml文件中的布局?
  • 静态android快捷方式多种口味?
  • 在Android中存储静态数据 - 自定义资源?
  • 如何制作像这样的自定义导航视图animation
  • 使用水平滚动嵌套的RecyclerView中的滚动行为
  • 如何在Android中的xml中为string资源指定空值?
  • XML格式的换行符?
  • 不再需要创build自己的FAB,也不需要使用第三方库,它被包含在AppCompat 22中。

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

    只需在gradle-file中添加名为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" /> 

    我通常使用xml drawable来创build一个前棒棒糖小部件的阴影/高程。 例如,这里是一个xml drawable,可以在前棒棒糖设备上用来模拟悬浮动作button的标高。

     <?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你可以select任何颜色。 以下是结果的截图:

    在这里输入图像说明

    有一堆图书馆在你的应用程序中添加一个FAB(浮动操作button),这里是我知道的几个。

    makovkastar的FAB

    futuersimple的复合FAB

    其中也包含FAB的Material Design库

    所有这些库都支持预棒棒糖设备,最低为api 8

    这里是一个自由的Android浮动操作button库它有很多的自定义,并要求SDK版本9和更高

    在这里输入图像说明

    完整的演示video

    @Justin波拉德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> 

    试试这个库 ,它支持阴影,有minSdkVersion=7 ,也隐式支持API-21 android:elevation属性。

    原来的post在这里 。

    添加填充和高程:

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