Question

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

到目前为止，我的按钮看起来很接近，但到目前为止看起来并不相同。你会建议其他什么变化？

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

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

enter image description here

目前我实际按钮的图片如下：

enter image description here

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

结果：

布局中的按钮：

<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以背景drawable和文本
stateListAnimator设置为null，因此它不会与高程混乱（可以通过此设置动画）

<强> RES /可绘-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 /可绘/ 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 /可绘/ add_button.xml：

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

<强> RES /可绘/ 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可能需要使用阴影和/或自定义drawable而不是高程，因为我没有合适的设备而未测试过

Answer 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" />

drawable的代码（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>

圆形可绘制代码

<?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 3

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

https://github.com/makovkastar/FloatingActionButton

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

3 个答案:

结果：

说明：

说明：

备注