Android：为按钮添加霓虹光效果

Question

我想在按钮上添加发光效果（在Android Studio中），如下图所示：

我不想要背景图像，所以为了获得这种效果，我尝试在XML文件中进行操作。我为按钮添加了描边，并为按钮提供了阴影（与描边颜色相同）。

我使用了90度角的线性渐变，起始颜色和结束颜色与描边相同，中心颜色与背景颜色相同。请参见以下代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item android:right="5dp" android:top="0dp">
            <shape>
                <corners android:radius="50dp" />
                <gradient
                    android:angle="45"
                    android:startColor="#8008c3fa"
                    android:endColor="#8008c3fa"
                    android:type="linear"
                    />
            </shape>
        </item>
        <item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
            <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
                <corners
                    android:radius="50dp"
                    />
                <gradient
                    android:angle="90"
                    android:centerX="50%"
                    android:centerColor="@color/trans_parent"
                    android:startColor="#8008c3fa"
                    android:endColor="#8008c3fa"
                    android:type="linear"
                    />
                <padding
                    android:left="0dp"
                    android:top="0dp"
                    android:right="0dp"
                    android:bottom="0dp"
                    />
                <size
                    android:width="270dp"
                    android:height="60dp"
                    />
                <stroke
                    android:width="2.5dp"
                    android:color="#08c3fa"
                    />
            </shape>
        </item>
    </layer-list>
</item>

</selector>

对于上述的XML，我得到了以下结果：

尽管设计和结果图看起来完全不同，但我认为如果我们增加中心颜色高度并保持阴影的渐变效果，它可以工作。但我无法做到相同。

- Sri Harsha

---

你可以使用 Figma 或 Adobe XD 设计一个按钮，并将其作为资源使用。 - Ali

@Ali，谢谢回复。但我们不能直接使用XML来完成吗？ - Sri Harsha

我在安卓上从未尝试过这种程度的渐变，所以说实话，我真的不知道它是否可能。 - Ali

我在安卓上从未尝试过如此复杂的渐变，所以说实话我不确定它是否可行。 - Ali

Answer 1

我知道已经有一段时间了，但如果仍然有人对这个效果感兴趣，这里有一个自定义视图库，它受到了这个问题的启发：

发光和霓虹灯按钮

它还有像图片中那样的动画禁用和启用方法。

这是MIT许可的，所以你可以随意使用。希望这能帮助到某些人。

- MehranB

---

我们如何保持发光的动画？ - Zeeshan Ali

@ZeeshanAli 你不能这样做。这是用于启用/禁用按钮的动画。 - MehranB

Answer 2

通过向图层列表添加另一个项目，您可以增加中心颜色高度，并保持阴影的淡出效果。第一个项目为上限创建渐变，其余部分为透明；第二个项目以同样的方式为下限创建渐变。

我添加了两个项目来填充左右半圆。我改变了一些颜色以增强效果，但没试太久。我认为使用更多项目和更好的颜色会有更好的效果 :)

祝好，Josh

最终结果：

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:right="5dp" android:top="0dp">
                <shape>
                    <corners android:radius="50dp" />
                    <gradient
                        android:centerX="70%"
                        android:startColor="#804CD6FF"
                        android:centerColor="#8004485C"
                        android:endColor="#804CD6FF"
                        android:type="linear"
                        />
                </shape>
            </item>
            <item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
                    <corners
                        android:radius="50dp"
                        />
                    <gradient
                        android:angle="90"
                        android:centerX="30%"
                        android:centerColor="@color/transparent"
                        android:startColor="#8008c3fa"
                        android:endColor="@color/transparent"
                        android:type="linear"
                        />
                    <size
                        android:width="270dp"
                        android:height="60dp"
                        />
                    <stroke
                        android:width="2.5dp"
                        android:color="#08c3fa"
                        />
                </shape>
            </item>
            <item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
                    <corners
                        android:radius="50dp"
                        />

                    <gradient
                        android:angle="90"
                        android:centerX="70%"
                        android:centerColor="@color/transparent"
                        android:startColor="@color/transparent"
                        android:endColor="#8008c3fa"
                        android:type="linear"
                        />

                    <size
                        android:width="270dp"
                        android:height="60dp"
                        />
                </shape>
            </item>
            <!-- the glow for the half circles, possible with radius as well. I liked
                 android:type="sweep" better because radius tends to fade out.-->
            <item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
                    <corners
                        android:radius="50dp"
                        />

                    <gradient
                        android:angle="360"
                        android:centerX="5%"
                        android:centerColor="#8008c3fa"
                        android:startColor="@color/transparent"
                        android:endColor="@color/transparent"
                        android:gradientRadius="360"
                        android:type="sweep"
                        />

                    <size
                        android:width="270dp"
                        android:height="60dp"
                        />
                </shape>
            </item>
            <item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
                <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
                    <corners
                        android:radius="50dp"
                        />

                    <gradient
                        android:angle="360"
                        android:centerX="95%"
                        android:centerColor="@color/transparent"
                        android:startColor="#8008c3fa"
                        android:endColor="#8008c3fa"
                        android:gradientRadius="360"
                        android:type="sweep"
                        />

                    <size
                        android:width="270dp"
                        android:height="60dp"
                        />
                </shape>
            </item>
        </layer-list>
    </item>

</selector>

- Joscha

Answer 3

如果你想要改进的霓虹灯按钮，带有不同的渐变效果。可以看一下我回答的这篇相关文章。我使用了来自 "@Mehran B" 的建议库，并将其与自定义的 drawable 和透明的 stroke 结合起来，使其更易修改。正如你可以在下面的示例中看到的那样，固体和阴影的渐变是分开的，因此更加灵活。

- Ole Pannier