
FloatingActionButton系の背景を透過する方法
FloationActionButtonの背景を透過しようとした際にちょっただけ引っかかったので残しておきます。
要約
containerColorを透過にし、エレベーションを0dpに変更する。
引っかかりポイントと理由
本来は下記のようにしたかったのですが、

背景の透過はできてるっぽいけど変な影が表示されてました。

見たところエレベーションのせいでした。エレベーションとはコンポーネントに影をつけることで浮き上がっているように見せるものです。比較のため下記に透過する前のキャプチャをおいています。

透過することにより、この影が見えるため上記の問題を引き起こしていました。
解決方法
containerColorにColor.Transparent、elevationに各引数に0.dpを指定したelevationを指定すれば解決です。
SmallFloatingActionButton(
onClick = {},
containerColor = Color.Transparent,
elevation = FloatingActionButtonDefaults.elevation(
defaultElevation = 0.dp,
pressedElevation = 0.dp,
focusedElevation = 0.dp,
hoveredElevation = 0.dp,
)
) {
Icon(
painter = painterResource(R.drawable.drawable_id),
contentDescription = ""
)
}
まとめ
よくよく考えれば影が不要ならFloatingActionButtonを使う必要ない説がありますが、これで透過で表示されます。
ちなみにExtendedFloatingActionButton、FloatingActionButton、LargeFloatingActionButton、SmallFloatingActionButtonでも同じ方法で解決すると思います。