如何使我的按钮看起来更像 Android JellyBean (v21) 中的浮动操作按钮？

Question

如何使我的按钮看起来更像浮动操作按钮？

到目前为止，我的按钮看起来很接近，但看起来并不一样。您还建议进行哪些其他更改？

下面是浮动操作按钮的图像，以及到目前为止我的按钮和代码的图像

实际浮动操作按钮的图片如下：

到目前为止我的实际按钮图像如下：

我的API是v19

代码：

实际按钮的代码

 <Button
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:text="+"
        android:textSize="60sp"
        android:background="@drawable/addbutton"
        android:elevation="3dp"
        android:layout_marginTop="215dp"
        android:layout_marginLeft="310dp"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:textColor="#ffff" />

Addbutton.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <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="#FF4186"/>
        </shape>
    </item>
</layer-list>

Answer 1

我使用这段代码在我的应用程序中构建了这种按钮

代码在Fragment.xml

<Button
    android:id="@+id/contact_list_add_button"
    android:layout_width="65dip"
    android:layout_height="65dip"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="20dip"
    android:layout_marginEnd="20dip"
    android:layout_marginRight="20dip"
    android:background="@drawable/round_button_shape"
    android:text="@string/action_plus"
    android:textColor="@android:color/white"
    android:textSize="35sp" />

可绘制代码 (round_button_shape)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="2dip" android:color="#44aaaaaa"/>
            <padding 
                android:left="2dip"
                android:right="2dip"
                android:top="2dip"
                android:bottom="2dip"
                />            
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="2dip" android:color="#90aaaaaa"/>
            <padding 
                android:left="2dip"
                android:right="2dip"
                android:top="2dip"
                android:bottom="2dip"
                />                        
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="2dip" android:color="#ffaaaaaa"/>
            <padding 
                android:left="1dip"
                android:right="1dip"
                android:top="1dip"
                android:bottom="1dip"
                />                        
        </shape>
    </item>
   <item android:drawable="@drawable/round_shape" android:left="1dip"         
    android:top="1dip" android:right="1dip" android:bottom="1dip"/>  
</layer-list>

圆形Drawable的代码

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

    <solid android:color="@color/red_dark"/>
</shape>

此外，我建议在选择器中使用此代码，以便在用户与按钮交互时提供反馈

Answer 2

我一直在为我的应用程序使用以下库（我不是作者）。它似乎工作得很好，看起来就像一个 FAB，甚至可以很容易地附加到列表视图，以便在您向下滚动时自动隐藏。该库也很容易通过 gradle 添加。 github 页面上的 image/animation 使按钮看起来质量很差，但它不是现实生活中的，看起来与 google 版本完全一样。

https://github.com/makovkastar/FloatingActionButton

Answer 3

结果：

布局中的按钮：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    ...

    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom|end">
        <Button
            android:id="@+id/add_button"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/add_button_selector"
            android:gravity="center"
            android:stateListAnimator="@null"
            android:text="+"
            android:textSize="25sp"
            android:elevation="3dp"
            android:fontFamily="sans-serif-light"
            android:textColor="#FFF"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </RelativeLayout>
</LinearLayout>

解释：

RelativeLayout，覆盖所有内容并将按钮放在 bottom-right 角。
margin 提供一些 space 的高度
gravity 将可绘制背景和文本居中
stateListAnimator 设置为 null，这样它就不会影响海拔高度（它可以通过这个动画）

res/drawables-v21/add_button_selector.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#b0372c">
    <item>
        <shape android:shape="oval">
            <solid android:color="#da4336" />
        </shape>
    </item>
</ripple>

res/drawables/add_button_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/add_button_selected"/>
    <item android:state_pressed="true" android:drawable="@drawable/add_button_selected"/>
    <item android:drawable="@drawable/add_button"/>
</selector>

res/drawables/add_button.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#da4336" />
</shape>

res/drawables/add_button_selected.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#b0372c" />
</shape>

解释：

从 API 21 开始你可以使用涟漪效果：
然而，对于旧版本，您必须坚持使用良好的旧颜色选择器

备注

可能有一个 user-made ripple 库用于较低的 APIs，可能值得一试
较低的 APIs 可能需要使用阴影 and/or 自定义可绘制对象而不是高程，尚未测试，因为我没有合适的设备

如何使我的按钮看起来更像 Android JellyBean (v21) 中的浮动操作按钮？

How can I make my button look more like the Floating Action Button from Android JellyBean (v21)?

android

xml

android-layout

android-intent

android-activity

结果：

解释：

解释：

备注