Compose rounded Button with transparent background-CodePudding

I am trying to display a Button with rounded corners and a 50% transparent background. My current attempt looks like this:

MaterialTheme {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.Yellow
    ) {
        Column(modifier = Modifier.padding(10.dp)) {
            Button(
                modifier = Modifier
                    .clip(CircleShape),
                onClick = { },
                colors = ButtonDefaults.buttonColors(backgroundColor = Color.White.copy(alpha = 0.5f))
            ) {
                Text(
                    text = "My Button",
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

The result is not very pretty:

It looks like the issue is with with the shading, but I'm not sure how to remove it and just show the same color within the whole shape.

CodePudding user response：

Button is just a Surface wrapping the content that you provide. You could check the source. So, I just tweaked it a little

@Composable
fun HollowButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    val contentColor by colors.contentColor(enabled)
    Surface(
        modifier = modifier,
        shape = shape,
        color = colors.backgroundColor(enabled).value.copy(0.5f), //Basically I refactored the alpha modification to here
        contentColor = contentColor.copy(alpha = 1f),
        border = border,
        elevation = elevation?.elevation(enabled, interactionSource)?.value ?: 0.dp,
        onClick = onClick,
        enabled = enabled,
        role = Role.Button,
        interactionSource = interactionSource,
        indication = rememberRipple()
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(
                value = MaterialTheme.typography.button
            ) {
                Row(
                    Modifier
                        .defaultMinSize(
                            minWidth = ButtonDefaults.MinWidth,
                            minHeight = ButtonDefaults.MinHeight
                        )
                        .padding(contentPadding),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    content = content
                )
            }
        }
    }
}

Works like a charm.

CodePudding user response：

Turns out the shadow will disappear when the elevation is removed.

Button(
    modifier = Modifier
        .clip(CircleShape),
    onClick = { },
    elevation = null,
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White.copy(alpha = 0.5f))
) { ... }