如何制作Android的凸起按钮？

Question

我已经在网上搜索了一个星期，想要找到一个制作彩色凸起按钮的示例或教程，但是没有什么收获。

我希望能够实现以下功能以提供更好的用户界面体验。

我找到了卡片视图，但是当你编写大量按钮的程序时，xml代码由于这个卡片视图会变得很长。

因此，如果有任何快速简单的解决方案，请告诉我。

谢谢

（附图）

            Normal button 

and with color 

- silverFoxA

---

使用默认的 Material Button 样式，将 backgroundTint 设置为蓝色（或者使用灰色作为禁用状态的颜色状态列表），并将前景设置为 ?android:attr/textColorPrimaryInverse。 - alanv

@alanv 但要获得涟漪效果，必须在前景上使用 "?attr/selectableItemBackground"。 - Someone Somewhere

Answer 1

我认为您实际上想要在按钮中添加突出效果。不要使用卡片，因为它需要更多的资源。对于棒棒糖设备，请使用

<Button
    ...
    android:stateListAnimator="@anim/my_animator" />

在资源文件夹中的anim文件夹中创建my_animator.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_enabled="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                            android:duration="@integer/button_pressed_animation_duration"
                            android:valueTo="@dimen/button_pressed_z_material"
                            android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="@dimen/button_elevation_material"
                            android:valueType="floatType"/>
        </set>
    </item>
    <!-- base state -->
    <item android:state_enabled="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                            android:duration="@integer/button_pressed_animation_duration"
                            android:valueTo="0"
                            android:startDelay="@integer/button_pressed_animation_delay"
                            android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="@dimen/button_elevation_material"
                            android:valueType="floatType" />
        </set>
    </item>
    ...
</selector>

- Ajeet

---

请告诉我使用的dimen值和整数值。还有，如何将颜色应用到按钮上，就像Android raised button一样。 - silverFoxA

颜色怎么样？ - silverFoxA

凸起按钮没有特殊颜色，它们在屏幕外有第三个维度，这给它们一些阴影和超出屏幕的感觉。但是要改变按钮的颜色，可以在“my_animator”中使用以下代码：<shape><solid android:color="@color/dark_white" /></shape> - Ajeet

是的，我按照你说的做了，但它没有显示颜色。 - silverFoxA

我已经更新了输出，请检查。此外，在添加颜色时，我无法在单击时看到任何效果。 - silverFoxA

Answer 2

您可以尝试这个替代方法： 在您的drawable文件夹中创建一个xml文件： cardlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="90"
                android:endColor="@color/background_gray" android:startColor="#ccc" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="1.5dp"
        android:top="0dp"
        android:bottom="1.5dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

现在你可以使用这个卡片布局来提高任何你想要突出显示的视图（如按钮、列表行或图片视图）。只需设置该视图的背景即可。

android:background="@drawable/cardlayout"

根据您的需求更改卡片布局的背景颜色。

- Mohammad Arman

---

一件美好的事物！ - kodu

Answer 3

看看这个：

<Button
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="60dp"
    android:text="Raised Color Button"
    android:textSize="15sp"
    android:backgroundTint="#1E9D96"
    android:textColor="@android:color/background_light" />

- Ritesh

Answer 4

你可以使用： android:elevation="2dp" 但它只适用于Lollipop及以上版本。我建议在Android低版本中使用layerlist。

- abhishekm473