如何修改BottomAppBar与FloatingActionButton的阴影颜色,并调整FAB阴影为四周扩散效果
我来帮你搞定这两个问题~咱们一步步来:
一、解决BottomAppBar阴影颜色不变的问题
你之前用的android:outlineSpotShadowColor和android:outlineAmbientShadowColor是系统原生View的属性,但Material Components的BottomAppBar有自己的阴影渲染逻辑,这些系统属性可能不生效。试试用组件专属的app:shadowColor属性,同时注意几个细节:
- 确保你的App使用的是Material Components主题(比如
Theme.MaterialComponents.Light.NoActionBar这类),不然很多专属属性会失效; - 去掉
android:outlineProvider="background"这个属性,它会干扰BottomAppBar默认的阴影渲染; - 替换成
app:shadowColor来指定阴影颜色。
修改后的BottomAppBar代码片段:
<com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bab_main" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:background="?attr/selectableItemBackgroundBorderless" app:elevation="@dimen/_5sdp" app:contentInsetStart="0dp" app:contentInsetEnd="0dp" app:fabCradleMargin="@dimen/_8sdp" app:fabCradleRoundedCornerRadius="@dimen/_25sdp" app:fabAlignmentMode="center" app:shadowColor="@color/color_button_main" <!-- 用这个属性设置阴影颜色 --> tools:targetApi="p"> <!-- 内部的BottomNavigationView保持原样即可 --> </com.google.android.material.bottomappbar.BottomAppBar>
二、让FloatingActionButton阴影四周均匀扩散并修改颜色
默认FAB的阴影会有向下的方向(模拟顶部光照效果),要让它四周扩散,同时改颜色,你可以这么调整:
- 用
app:shadowCompatColor做全API级别的阴影颜色适配,搭配高版本的outlineSpotShadowColor和outlineAmbientShadowColor; - 设置
android:outlineProvider="bounds",让阴影基于FAB的矩形边界生成,消除方向感; - 适当调整
elevation的值(不要太高),避免阴影过度偏向某一侧; - 因为FAB锚定在BottomAppBar上,要保证阴影不被底部栏遮挡,你可以检查下
fabCradleMargin的取值是否足够让阴影显示完整。
修改后的FAB代码:
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/flb_add" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/bab_main" app:backgroundTint="?color_button_main" android:src="@drawable/ic_add" app:maxImageSize="35dp" app:fabCustomSize="65dp" app:tint="?color_text_main_inverse" app:elevation="4dp" <!-- 适当降低值让阴影更均匀 --> app:borderWidth="0dp" app:shadowCompatColor="?color_button_main" <!-- 全版本兼容的阴影颜色 --> android:outlineSpotShadowColor="?color_button_main" android:outlineAmbientShadowColor="?color_button_main" android:outlineProvider="bounds" <!-- 让阴影基于边界均匀扩散 --> android:contentDescription="@string/text_add_diary" tools:targetApi="p" />
这样调整后,应该就能实现你想要的效果啦~
备注:内容来源于stack exchange,提问作者DucK
相关产品推荐
相关产品推荐

