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

【问题标题】：How can I make my button look more like the Floating Action Button from Android JellyBean (v21)?如何使我的按钮看起来更像 Android JellyBean (v21) 中的浮动操作按钮？
【发布时间】：2015-01-16 13:51:55
【问题描述】：

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

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

浮动操作按钮的图像如下所示，我的按钮图像和到目前为止的代码也是如此

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

到目前为止，我的实际 Button 图像如下：

我的 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>

【问题讨论】：

我的最小 sdk 是 19

标签： android xml android-layout android-intent android-activity

【解决方案1】：

结果：

布局中的按钮：

<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，覆盖所有内容并将按钮放在右下角。
margin 为立面提供了一些空间
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 开始，您可以使用涟漪效应：
但是对于旧版本，您必须坚持使用良好的旧颜色选择器

注意事项

可能有一个针对较低 API 的用户制作的波纹库，可能值得一试
较低的 API 可能需要使用阴影和/或自定义可绘制对象而不是高程，由于我没有合适的设备，因此尚未对此进行测试

【讨论】：

对我来说效果很好，但只有当我移除波纹包装器时，我按下时显然看不到任何波纹效果。
@AndreiMikhalevich 什么设备和 API 版本？
@AndreiMikhalevich L 是一年前的预览 + 您没有指定设备。这两件事会使您的 cmets 无用。

【解决方案2】：

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

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>

另外，如果用户与按钮交互，我建议在选择器中使用此代码来提供反馈

【讨论】：

【解决方案3】：

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

https://github.com/makovkastar/FloatingActionButton

【讨论】：