Hey, I want to add a Floating Action Button with a...

# compose

[Kiprop Victor]

Hey, I want to add a Floating Action Button with a gradient background in Jetpack Compose. I have the following snippet to do so:

FloatingActionButton(
    onClick = {
        coroutineScope.safeLaunch {
            navController.navigate("AddTodoPage") {
                launchSingleTop = true
            }
        }
    },
    shape = RoundedCornerShape(14.dp),
    backgroundColor = Color.Transparent,
    modifier = Modifier
        .constrainAs(addFab) {
            bottom.linkTo(parent.bottom)
            end.linkTo(parent.end)
        }
        .offset(x = (-16).dp, y = (-24).dp)
        .background(
            brush = Brush.verticalGradient(
                colors = BluePinkGradient()
            ),
            shape = RoundedCornerShape(14.dp)
        )

) {
    Icon(
        painter = painterResource(id = R.drawable.ic_add),
        contentDescription = "Add icon",
        tint = Color.White
    )
}

But from the image below, the button has a "Whitish" shade on the plus icon. How can I remove that shade or a better way to set the FAB background to a gradient?

https://kotlinlang.slack.com/files/U022ZVC37PE/F02J1559G8H/image.png▾

[Kirill Grouchnikov]

Is your gradient fully opaque? How is BluePinkGradient defined?

[Kiprop Victor]

This is the BluePinkGradient method:

fun BluePinkGradient(inverse: Boolean = false) = when (inverse) {
    true -> listOf(
        MutedBlue,
        MutedPink
    )
    false -> listOf(
        MutedPink,
        MutedBlue
    )
}

and the colros:

val MutedBlue = Color(0xFF26A69A)
val MutedPink = Color(0xFFEC407A)

[Kiprop Victor]

@Kirill Grouchnikov the gradient is opaque from the blocks above.

[Kirill Grouchnikov]

It looks like you set the "true" background to fully transparent, and the "alternative" background is displayed under the elevation shadow

[Albert Chang]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1622654756178300?thread_ts=1622654565.176700&cid=CJLTWPH7S

[Colton Idle]

You ever figure out how to get this working properly? I'm having the same issue. lol

[Albert Chang]

Just build your own fab. Something like this.

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    backgroundBrush: Brush,
    contentColor: Color,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(
        LocalContentColor provides contentColor,
        LocalContentAlpha provides contentColor.alpha
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = modifier
                .defaultMinSize(minWidth = 56.dp, minHeight = 56.dp)
                .shadow(
                    elevation = elevation.elevation(interactionSource = interactionSource).value,
                    shape = shape,
                    clip = false
                )
                .background(brush = backgroundBrush, shape = shape)
                .clip(shape)
                .clickable(
                    interactionSource = interactionSource,
                    indication = rememberRipple(),
                    role = Role.Button,
                    onClick = onClick
                )
        ) {
            content()
        }
    }
}