0

In a project I am creating, I want to have a transparent floating button button in one of my screens.

The button should be of a color RGB(126,26,71), with 75% alpha channel.

But, when I create said button composable, it looks like this: As you can see, it has slightly white, transparent background as well

This is how the composable is created:

FloatingActionButton(
       onClick = {//TODO},
       backgroundColor = MediumOpaquePurple, //the color I specified above
       elevation = FloatingActionButtonDefaults.elevation(Space8)
       ) 
   {
       Icon(
            imageVector = Icons.Default.Delete,
            contentDescription = "Delete notifications"
       )
   }

Weird thing is that when I use the same color for ExtendedFloatingActionButton composable, it looks perfectly fine and there's no white background in it.

Any help apprectiated.

Thanks

PetrHoracek
  • 41
  • 3
  • Does the `ExtendedFloatingActionButton` also have `elevation` set? I suspect `elevation` might have a hand in changing the color. – Primož Ivančič Apr 01 '22 at 16:45
  • 1
    ^ That's what that is, actually. You're seeing the artifact from the elevation shadow through the translucent background. Ultimately, Compose is using the same basic APIs as the `View` framework, and that shadow glitch is from the hardware-accelerated shadow generated by a `RenderNode`. – Mike M. Apr 01 '22 at 16:50
  • Yes, the Extended FAB has the elevation set the same way as the regular FAB. The regular FAB also shows the shadow even without elevation parameter set. Thanks for helping. – PetrHoracek Apr 01 '22 at 16:59
  • I'm not very familiar with Compose yet, but I would imagine that both of those are going to have default elevations, even if you don't explicitly set them. – Mike M. Apr 01 '22 at 17:04
  • This is exactly what I just checked and tested. There is default elevation. Set it to `0.dp` and the issue with background color will be solved. `ExtendedFloatingActionButton` works a bit differently, though. – Primož Ivančič Apr 01 '22 at 17:16
  • @PrimožIvančič Awesome, that did the trick, thanks a lot. – PetrHoracek Apr 01 '22 at 17:25
  • You might want to check the behavior when they're clicked. Normally, buttons animate their elevations when pressed/un-pressed. – Mike M. Apr 01 '22 at 17:29
  • Ah, I see. If you set `elevation(0.dp, 0.dp)`, that's the default and pressed elevations, so with both at zero, it won't animate. – Mike M. Apr 01 '22 at 17:35

1 Answers1

0

For FloatingActionButton the solution is to set elevation(0.dp). Just omitting the call is not enough, because it has a default value of 6.dp.

ExtendedFloatingActionButton acts a bit differently and does need this tweaking.

Primož Ivančič
  • 1,984
  • 1
  • 17
  • 29