Android实现类Telegram的模糊效果Toolbar方法

一、配置全屏Edge-to-Edge显示 #

先实现深浅主题下的全屏显示，搭配半透明导航栏：

1. 主题配置（res/values/styles.xml） #

在应用主题中添加属性，启用Edge-to-Edge并适配系统栏：

<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- 开启系统栏透明 -->
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <!-- 导航栏、状态栏设为全透明 -->
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <!-- 根据主题切换导航栏图标颜色 -->
    <item name="android:windowLightNavigationBar">?attr/isLightTheme</item>
</style>

2. 代码中启用Edge-to-Edge（Activity的onCreate方法） #

让页面内容延伸到系统栏下方，同时适配图标对比度：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 关闭系统栏自动适配内容边界
    WindowCompat.setDecorFitsSystemWindows(window, false)
    // 配置状态栏、导航栏图标颜色
    val insetsController = WindowCompat.getInsetsController(window, window.decorView)
    insetsController.isAppearanceLightStatusBars = resources.getBoolean(R.bool.isLightTheme)
    insetsController.isAppearanceLightNavigationBars = resources.getBoolean(R.bool.isLightTheme)
}

二、实现Toolbar的模糊+半透明+倒影效果 #

1. 自定义Toolbar布局（layout/toolbar_custom.xml） #

通过嵌套布局实现模糊层、半透明背景和内容层级：

<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp">

    <!-- 模糊半透明层 -->
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/blur_layer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@null"
        app:cardBackgroundColor="@color/toolbar_semi_transparent"
        app:cardElevation="0dp"/>

    <!-- Toolbar核心内容 -->
    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        android:textColor="?attr/textColorPrimary"
        android:textSize="18sp"
        android:layout_gravity="center"/>

</androidx.appcompat.widget.Toolbar>

2. 代码实现模糊与倒影效果 #

（1）模糊效果（Android 12+ 用系统API）

API 31及以上可直接使用系统RenderEffect实现高效模糊：

val toolbar = findViewById<Toolbar>(R.id.toolbar)
val blurLayer = findViewById<MaterialCardView>(R.id.blur_layer)

// 创建模糊效果，参数可根据需求调整
val blurEffect = RenderEffect.createBlurEffect(10f, 10f, Shader.TileMode.CLAMP)
blurLayer.setRenderEffect(blurEffect)

低版本可使用第三方库（如com.github.Dimezis:BlurView）替代。

（2）倒影效果实现

通过截图翻转+渐变遮罩实现Toolbar倒影：

// 获取Toolbar截图并生成翻转倒影
fun addToolbarReflection(toolbar: Toolbar, parentLayout: ViewGroup) {
    val reflectionHeight = (toolbar.height * 0.3f).toInt()
    val reflectionView = ImageView(this).apply {
        layoutParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, reflectionHeight)
        // 生成翻转截图
        val bitmap = getViewBitmap(toolbar)
        val flippedMatrix = Matrix().apply { postScale(1f, -1f) }
        setImageBitmap(Bitmap.createBitmap(bitmap, 0, 0, bitmap.width, bitmap.height, flippedMatrix, true))
        // 添加渐变遮罩，让倒影自然消失
        foreground = GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, intArrayOf(0x80000000, 0x00000000))
    }
    parentLayout.addView(reflectionView)
}

// 辅助方法：获取View截图
private fun getViewBitmap(view: View): Bitmap {
    view.isDrawingCacheEnabled = true
    val bitmap = Bitmap.createBitmap(view.drawingCache)
    view.isDrawingCacheEnabled = false
    return bitmap
}

3. 深浅主题颜色适配 #

在res/values/colors.xml和res/values-night/colors.xml中分别定义半透明背景色：

• 浅色主题：<color name="toolbar_semi_transparent">#CCFFFFFF</color>
• 深色主题：<color name="toolbar_semi_transparent">#CC1E1E1E</color>

三、注意事项 #

• 模糊效果在低版本设备上需依赖第三方库，高版本优先用系统API提升性能
• 倒影会增加内存开销，可根据场景调整倒影高度，或仅在滚动时显示
• Edge-to-Edge模式下，需给页面根布局添加android:paddingTop="?attr/statusBarHeight"和android:paddingBottom="?attr/navigationBarHeight"，避免内容被系统栏遮挡

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