您所在的位置：首页 > 最新热文 > 计算机探索

我怎样才能让我的按钮看起来更像是从Android的软糖（V21）的浮动操作按钮？我的、按钮、软糖、是从

2023-09-12 04:57:45 作者：丢ろ的狗绝不再看第二眼

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

我的按钮，远远看上去接近，但迄今为止，看起来不一样。你会建议什么其他的变化？

什么样的浮动操作按钮看起来像一个图像的下方，因为是我的按钮的图像，到目前为止，我的code到目前为止

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

我的实际按钮的图像迄今如下：

我的API是V19

code：

code为实际的按钮

 ＆LT;按钮
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =60dp
        机器人：文本=+
        机器人：TEXTSIZE =60SP
        机器人：背景=@可绘制/ Add按钮
        机器人：海拔=3DP
        机器人：layout_marginTop =215dp
        机器人：layout_marginLeft =310dp
        机器人：fontFamily中=无衬线光
        机器人：重力=中心
        机器人：文字颜色=＃FFFF/＆GT;

Addbutton.xml

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;层列表的xmlns：机器人=http://schemas.android.com/apk/res/android＆GT;
    ＆LT;项目＆GT;
        ＆LT;层列表＆gt;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃08000000/＆GT;
                    ＆LT;填充
                        机器人：底部=的3px
                        机器人：左=的3px
                        机器人：右=的3px
                        机器人：顶部=的3px
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃09000000/＆GT;
                    ＆LT;填充
                        机器人：底部=2px的
                        机器人：左=2px的
                        机器人：右=2px的
                        机器人：顶部=2px的
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃10000000/＆GT;
                    ＆LT;填充
                        机器人：底部=2px的
                        机器人：左=2px的
                        机器人：右=2px的
                        机器人：顶部=2px的
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃11000000/＆GT;
                    ＆LT;填充
                        机器人：底部=1像素
                        机器人：左=1像素
                        机器人：右=1像素
                        机器人：顶部=1像素
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃1200/＆GT;
                    ＆LT;填充
                        机器人：底部=1像素
                        机器人：左=1像素
                        机器人：右=1像素
                        机器人：顶部=1像素
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃1300/＆GT;
                    ＆LT;填充
                        机器人：底部=1像素
                        机器人：左=1像素
                        机器人：右=1像素
                        机器人：顶部=1像素
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃1400/＆GT;
                    ＆LT;填充
                        机器人：底部=1像素
                        机器人：左=1像素
                        机器人：右=1像素
                        机器人：顶部=1像素
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃1500/＆GT;
                    ＆LT;填充
                        机器人：底部=1像素
                        机器人：左=1像素
                        机器人：右=1像素
                        机器人：顶部=1像素
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃16000000/＆GT;
                    ＆LT;填充
                        机器人：底部=1像素
                        机器人：左=1像素
                        机器人：右=1像素
                        机器人：顶部=1像素
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
            ＆LT;项目＆GT;
                ＆LT;形机器人：形状=椭圆形＆GT;
                    [固体机器人：颜色=＃17000000/＆GT;
                    ＆LT;填充
                        机器人：底部=1像素
                        机器人：左=1像素
                        机器人：右=1像素
                        机器人：顶部=1像素
                        /＆GT;
                ＆LT; /形状＆GT;
            ＆LT; /项目＆GT;
        ＆LT; /层列表＆gt;
    ＆LT; /项目＆GT;
    ＆LT;项目＆GT;
        ＆LT;形机器人：形状=椭圆形＆GT;
            [固体机器人：颜色=＃FF4186/＆GT;
        ＆LT; /形状＆GT;
    ＆LT; /项目＆GT;
＆LT; /层列表＆gt;

解决方案

结果：

按钮的布局：

 ＆LT;的LinearLayout
    的xmlns：机器人=http://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent＆GT;
    ...

    ＆LT; RelativeLayout的
        的xmlns：工具=http://schemas.android.com/tools
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent
        机器人：重力=底部|结束＆GT;
        ＆LT;按钮
            机器人：ID =@ + ID / add_button
            机器人：layout_width =50dp
            机器人：layout_height =50dp
            机器人：layout_margin =10dp
            机器人：背景=@可绘制/ add_button_selector
            机器人：重力=中心
            机器人：stateListAnimator =@空
            机器人：文本=+
            机器人：TEXTSIZE =25sp
            机器人：海拔=3DP
            机器人：fontFamily中=无衬线光
            机器人：文字颜色=＃FFF
            工具：忽略=硬codedText，UnusedAttribute/＆GT;
    ＆LT; / RelativeLayout的＆GT;
＆LT; / LinearLayout中＆GT;

说明：

RelativeLayout的，覆盖一切，并在右下角放置按钮。 保证金提供了一些空间，海拔 重力中心的背景绘制和文本 stateListAnimator 设置为null，所以也没有惹海拔（它可以通过这个动画）

RES /可绘制-V21 / add_button_selector.xml

 ＆LT;纹波
    的xmlns：机器人=http://schemas.android.com/apk/res/android
    机器人：颜色=＃b0372c＆GT;
    ＆LT;项目＆GT;
        ＆LT;形机器人：形状=椭圆形＆GT;
            [固体机器人：颜色=＃da4336/＆GT;
        ＆LT; /形状＆GT;
    ＆LT; /项目＆GT;
＆LT; /纹波＆GT;

RES /可绘制/ add_button_selector.xml：

 ＆LT;选择的xmlns：机器人=http://schemas.android.com/apk/res/android＆GT;
    ＆LT;项目安卓state_selected =真正的机器人：可绘制=@可绘制/ add_button_selected/＆GT;
    ＆LT;项目的android：STATE_ pressed =真正的机器人：可绘制=@可绘制/ add_button_selected/＆GT;
    ＆LT;项目机器人：可绘制=@可绘制/ add_button/＆GT;
＆LT; /选择器＆GT;

RES /可绘制/ add_button.xml：

 ＆LT;形状
    的xmlns：机器人=http://schemas.android.com/apk/res/android
    机器人：形状=椭圆形＆GT;
    [固体机器人：颜色=＃da4336/＆GT;
＆LT; /形状＆GT;

RES /可绘制/ add_button_selected.xml：

 ＆LT;形状
    的xmlns：机器人=http://schemas.android.com/apk/res/android
    机器人：形状=椭圆形＆GT;
    [固体机器人：颜色=＃b0372c/＆GT;
＆LT; /形状＆GT;

说明：

在自21 API，你可以使用连锁反应：然而，对于旧版本，你必须坚持历久弥新的颜色选择器

注意

有可能是用户制作的纹波库更低的API，这可能是值得检查下的API可能需要使用阴影和/或自定义绘制的，而不是抬高，还没有测试过，因为我没有正确的设备

How do I make my button look more like the Floating Action Button?

My button so far looks close but as yet, doesn't look the same. What other changes would you suggest?

An image of what the Floating Action Button looks like is below, as is an image of my button so far and my code so far

An image of the actual Floating Action Button is below:

An image of my actual Button so far is below:

My API is v19

Code:

Code for actual button

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

解决方案

Result:

Button in a layout:

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

Explanation:

RelativeLayout, overlays everything and places the button at the bottom-right corner. margin provides some space for the elevation gravity centers the background drawable and the text stateListAnimator set to null so it doesn't mess with elevation (it can be animated via this)

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>

Explanation:

Since API 21 you can use the ripple effect: However for older versions you'll have to stick with the good old color selector

Notes

There may be a user-made ripple library for lower APIs, that might be worth checking out Lower APIs may need to use shadow and/or a custom drawable instead of elevation, haven't tested that since I don't have a proper device

上一篇：活动返回图像图像

下一篇：什么是onActivityResult参数意向意向、参数、onActivityResult

相关推荐

精彩图集

精彩推荐

图片推荐