Android开发：如何实现类似Instagram的模糊背景与高对比度前景？

你的布局思路方向是对的，但有几个关键问题需要修正，才能实现预期的模糊效果：

原布局的核心问题 #

1. 缺少根布局容器：直接写三个子View却未指定根布局（如ConstraintLayout或RelativeLayout），android:layout_centerInParent这类定位属性仅在相对布局类容器中生效。
2. BlurView未关联目标RecyclerView：RealtimeBlurView默认模糊整个窗口，必须明确指定要模糊的目标View，否则无法正确模糊RecyclerView的内容。

修正后的完整布局代码 #

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 底层：内容列表RecyclerView -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view_meme"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layerType="hardware" />

    <!-- 中间层：RecyclerView的模糊遮罩 -->
    <com.github.mmin18.widget.RealtimeBlurView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:realtimeBlurRadius="20dp"
        app:realtimeOverlayColor="#66000000" <!-- 调整为更自然的半透明黑，贴近Instagram质感 -->
        app:realtimeTargetView="@id/recycler_view_meme" /> <!-- 指定模糊目标为RecyclerView -->

    <!-- 顶层：居中的弹窗CardView -->
    <com.google.android.material.card.MaterialCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/darkGray"
        app:cardCornerRadius="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="30dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|top"
                android:text="解锁！"
                android:textColor="@color/white"
                android:textSize="30sp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/cardview_dark_background"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:text="观看广告解锁帖子视频"
                android:textColor="@color/white"
                android:textSize="20sp" />

            <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:backgroundTint="@color/white"
                android:text="观看广告"
                android:textColor="@color/black"
                app:cornerRadius="20dp"/>
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

关键修改说明 #

• 根容器选择：使用ConstraintLayout作为根布局，更灵活地控制View层级与位置，符合现代Android布局最佳实践。
• 绑定模糊目标：通过app:realtimeTargetView="@id/recycler_view_meme"让BlurView专门模糊RecyclerView内容，而非整个窗口。
• 优化遮罩颜色：将realtimeOverlayColor调整为#66000000，比原#8000的半透明效果更自然，贴近Instagram弹窗的模糊质感。
• CardView居中实现：用ConstraintLayout的四边约束替代layout_centerInParent（该属性仅在RelativeLayout中生效），确保弹窗居中显示。

额外优化提示 #

• 若RecyclerView滚动时模糊效果卡顿，可尝试降低realtimeBlurRadius数值，或在代码中为BlurView设置更高效的模糊算法（如setBlurAlgorithm）。
• 确保已正确添加RealtimeBlurView的依赖到项目build.gradle中。

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