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


79

我想创建一个浮动操作按钮(将项目添加到列表视图),例如Google日历,以保持与棒棒糖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>

样式styles.xml

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

结果相似,但没有阴影,这是材料设计的特征:

日历的浮动操作按钮:

日历的浮动操作按钮

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

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

如何在按钮上添加阴影?

我已经使用过属性高程,但是不起作用


1
海拔API仅适用于棒棒糖,您是否尝试过棒棒糖设备?
— Marc Plano-Lesay 2014年

2
现在可能是您接受给定答案之一的时候了。
— Phantômaxx

实际上,在我的4.4.2 Samsung Galaxy S III上,有了AppCompat,阴影就在那里了。
— FractalBob

Answers:


100

不再需要创建自己的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" />

1
如何更改背景颜色?
— Jjang

2
默认情况下,背景色将是主题中的“ colorAccent”。但是,您也可以使用floatActionButton.setRippleColor(color),不要让“ ripple”这个名字吓到您,它也可以在棒棒糖之前的设备上使用。
— user1354603 2015年

我没有colorAccent,如果我添加一个并将其设置为其他颜色,它将不起作用-颜色会变为绿色/青绿色。
— Jjang 2015年

我为此使用了第三方。真的帮了我很多。谢谢。与此有关的一个问题是,它仍然感觉它尚未完全开发。
— V_J

1
来自文档的@Jjang @ user1354603The 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).
— Muhammad Babar

43

我通常使用xml drawables在预棒棒糖小部件上创建阴影/高程。例如,此处是一个可绘制的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可以选择任何一种颜色来代替。这是结果的屏幕截图:

在此处输入图片说明


1
感谢您分享这个。我很害怕再次挖掘XML代码来重新创建它。
— Cookster

我刚刚实施了,这很棒,只有一件奇怪的事情。似乎当您旋转手机时,阴影/高程正在消失。有什么想法吗?在此先感谢Justin
— Amilcar Andrade

@AmilcarAndrade这是一个很好的问题。我在其他xml可绘制对象中也遇到了类似的事情,但实际上是从可绘制对象本身提取了位图。为了解决这个问题,我本质上将drawable用作单例。设置一次,因此不会再次绘制。也许您可以将drawable作为静态变量并将其设置为onCreate中的背景?
— 贾斯汀·波拉德

我还添加了一个增强功能,可以非常轻松地添加波纹效果,下面是代码。
— 阿米尔卡·安德拉德

2
供以后参考,这是避免阴影和高程的好例子-> curious-creature.com/2008/12/18/avoid-memory-leaks-on-android/…–
— Amilcar Andrade



4

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


0

添加填充和高程:

 android:elevation="10dp"
 android:padding="10dp"
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.