Android Studio登录页背景模糊效果实现咨询

你之前用android:alpha="0.5"的方式无效，是因为父布局的透明度会传递给所有子控件，导致整个页面半透明，而不是只模糊背景。下面提供几种可行的实现方案，确保仅背景模糊、子控件不受影响：

方案1：官方RenderEffect实现（API 31+，推荐） #

利用Android 12+提供的RenderEffectAPI，直接给独立的背景层添加模糊效果，性能最优。

步骤1：修改布局结构 #

将原布局拆分为背景层和内容层，背景层单独承载渐变背景并添加模糊，内容层放在上方保持透明：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- 模糊背景层 -->
    <View
        android:id="@+id/blur_bg_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_bg"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- 原内容布局，设为透明背景 -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent">

        <!-- 这里复制你原布局中的所有控件：TextView、EditText、Button等 -->
        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:fontFamily="@font/roboto_black"
            android:shadowColor="#252525"
            android:text="Login"
            android:textAlignment="center"
            android:textColor="#FFFFFF"
            android:textSize="40sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView3" />

        <!-- 其余控件省略，直接复用你原代码 -->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

步骤2：在Activity中设置模糊效果 #

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val blurBgView = findViewById<View>(R.id.blur_bg_view)
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
        // 调整模糊半径（单位：dp），数值越大模糊程度越高
        val blurEffect = RenderEffect.createBlurEffect(20f, 20f, Shader.TileMode.CLAMP)
        blurBgView.setRenderEffect(blurEffect)
    }
}

方案2：兼容低版本（API 21+） #

如果需要兼容Android 12以下版本，可使用第三方实时模糊库：

步骤1：添加依赖 #

在build.gradle（Module级别）中添加：

dependencies {
    implementation 'com.github.mmin18:realtimeblurview:1.2.1'
}

步骤2：修改布局中的背景层 #

<com.github.mmin18.widget.RealtimeBlurView
    android:id="@+id/blur_bg_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:blurRadius="20dp" <!-- 模糊半径 -->
    app:downsampleFactor="4" <!-- 降采样率，数值越大性能越好但模糊精度越低 -->
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

步骤3：在代码中设置渐变背景 #

val blurBgView = findViewById<RealtimeBlurView>(R.id.blur_bg_view)
blurBgView.setBackgroundResource(R.drawable.gradient_bg)

方案3：静态模糊（最简单） #

如果不需要动态调整模糊效果，直接用图片编辑工具（如PS、在线模糊工具）将gradient_bg处理成模糊状态，替换原文件即可，无需修改布局和代码。

注意事项 #

• 模糊半径越大，性能消耗越高，建议根据实际需求调整（推荐10-30dp）。
• 动态模糊（如RealtimeBlurView）适合需要背景随内容变化的场景，静态模糊性能最优。

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