如何使用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?
我已经使用属性提升,但不起作用
不再需要创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"