如何不使用第三方库为Android的Button、ImageView等View添加发光效果？

以下实现全部基于Android原生API，无需引入任何第三方组件：

一、MaterialButton 发光效果实现 #

你当前使用的MaterialButton本身就支持自定义发光属性，直接修改样式即可：

1. 更新按钮样式配置 #

在你现有的Widget.App.Button.OutlinedButton样式中新增发光相关参数：

<style name="Widget.App.Button.OutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <!-- 基础发光阴影配置，阴影颜色可替换为你需要的发光色 -->
    <item name="android:elevation">8dp</item>
    <item name="android:translationZ">4dp</item>
    <item name="android:shadowColor">@color/blue_glow</item>
    <item name="android:shadowRadius">12dp</item>
    <item name="android:shadowDx">0</item>
    <item name="android:shadowDy">0</item>
    <!-- 点击态发光变化动画 -->
    <item name="android:stateListAnimator">@animator/button_glow_anim</item>
    <!-- 边框、水波纹和发光色呼应 -->
    <item name="strokeColor">@color/blue_glow</item>
    <item name="strokeWidth">1dp</item>
    <item name="rippleColor">@color/blue_glow_transparent</item>
</style>

注：@color/blue_glow为你需要的发光主色，@color/blue_glow_transparent为同色系半透明色，可根据设计需求自行调整。

2. 新建点击态动画文件 #

在res/animator路径下新建button_glow_anim.xml，实现按压时发光增强效果：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="elevation" android:valueTo="16dp" android:duration="100"/>
            <objectAnimator android:propertyName="translationZ" android:valueTo="8dp" android:duration="100"/>
        </set>
    </item>
    <item android:state_enabled="false">
        <set>
            <objectAnimator android:propertyName="elevation" android:valueTo="2dp" android:duration="100"/>
            <objectAnimator android:propertyName="translationZ" android:valueTo="1dp" android:duration="100"/>
        </set>
    </item>
    <item>
        <set>
            <objectAnimator android:propertyName="elevation" android:valueTo="8dp" android:duration="100"/>
            <objectAnimator android:propertyName="translationZ" android:valueTo="4dp" android:duration="100"/>
        </set>
    </item>
</selector>

3. 低版本兼容方案 #

如果需要兼容API 28以下的阴影色设置，可以自定义layer-list作为按钮背景，用多层渐变模拟发光效果：

<!-- res/drawable/button_glow_bg.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 外层发光层 -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="24dp"/>
            <solid android:color="@color/blue_glow_transparent_30"/>
            <padding android:bottom="4dp" android:top="4dp" android:left="4dp" android:right="4dp"/>
        </shape>
    </item>
    <!-- 次外层发光层 -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="24dp"/>
            <solid android:color="@color/blue_glow_transparent_20"/>
            <padding android:bottom="3dp" android:top="3dp" android:left="3dp" android:right="3dp"/>
        </shape>
    </item>
    <!-- 按钮底色层 -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="24dp"/>
            <solid android:color="@color/white"/>
            <stroke android:width="1dp" android:color="@color/blue_glow"/>
        </shape>
    </item>
</layer-list>

直接在按钮样式中把background设置为该drawable即可。

二、ImageView 发光效果实现 #

两种原生方案可选，都不需要修改ImageView本身：

方案1：阴影轮廓方案（API 28+） #

直接在代码中给ImageView配置参数即可，支持自动匹配圆角/圆形图片的发光轮廓：

// Kotlin示例代码
imageView.apply {
    outlineProvider = ViewOutlineProvider.BACKGROUND
    clipToOutline = true
    elevation = 10f
    shadowColor = ContextCompat.getColor(context, R.color.blue_glow)
}

如果是圆角/圆形图片，只需要给ImageView设置对应形状的background，系统会自动识别轮廓生成对应形状的发光效果。

方案2：Drawable包裹方案（全版本兼容） #

自定义带发光效果的Drawable包裹原有图片资源即可：

class GlowDrawable(
    private val source: Drawable,
    private val glowColor: Int,
    private val glowRadius: Float
) : DrawableWrapper(source) {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)

    init {
        paint.maskFilter = BlurMaskFilter(glowRadius, BlurMaskFilter.Blur.NORMAL)
        paint.color = glowColor
    }

    override fun draw(canvas: Canvas) {
        // 先绘制发光层
        val bounds = source.bounds
        canvas.drawRect(bounds, paint)
        // 再绘制原图片
        super.draw(canvas)
    }

    override fun setBounds(left: Int, top: Int, right: Int, bottom: Int) {
        super.setBounds(left, top, right, bottom)
        source.setBounds(left, top, right, bottom)
    }
}

使用时直接给ImageView设置该Drawable即可：

imageView.setImageDrawable(GlowDrawable(
    source = ContextCompat.getDrawable(this, R.drawable.your_image_res),
    glowColor = ContextCompat.getColor(this, R.color.blue_glow),
    glowRadius = 24f
))

内容的提问来源于stack exchange，提问作者Ron Petrosian