android - 如何使我的按钮看起来更像 Android JellyBean (v21) 中的 float 操作按钮?

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

如何使我的按钮看起来更像 float 操作按钮?

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

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

实际 float 操作按钮的图片如下:

enter image description here

到目前为止,我的实际 Button 图像如下:

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>

最佳答案

结果:

resulting button


布局中的按钮:

<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 开始,您可以使用涟漪效应:
    ripple effect
  • 但是对于旧版本,您必须坚持使用旧的颜色选择器

注意事项

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

关于android - 如何使我的按钮看起来更像 Android JellyBean (v21) 中的 float 操作按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27985466/

相关文章:

android - EditText 的验证不起作用

java - 如何将项目位置适配器发送到 fragment 以及将 fragment 发送到 Activity

android - 如何计算不同位图上的相同位置?

java - 无法打开 ServletContext 资源 [/WEB-INF/mvc-dispatcher-servlet.xml]

html - 如何在 XML 中转义 & 符号,以便将它们呈现为 HTML 中的实体?

c# - 解析 XML/XHTML 文档但忽略 C# 中的错误

java - 如何在两个 Activity 之间传递类对象?

android - 以编程方式在布局中布置 subview

android - 使用 Espresso 测试 TextView 值不为空,如果 TextView 值为空则失败

Android 自定义 View - 自定义属性错误