Transparent background in Outlined Button in Jetpack Compose

Question

I want to create button where I have only text and icon and all background and borders are transparent. I create something like that:

OutlinedButton(
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent),
    border = BorderStroke(0.dp, Color.Transparent),
    modifier = modifier,
    onClick = onClick
) {
    icon?.invoke()
    Text(
        text = value,
        fontSize = 12.sp
    )
}

and everything is ok, but I lost default colors(should be blue, and I have black icon and text). How can I remove all background and borders from button but still have theme colors?

Answer 1

Could you try this?

@Composable
fun TiledButton(
    onClick: () -> Unit,
    @DrawableRes backgroundDrawableId: Int,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    contentColor: Color = MaterialTheme.colors.primary,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        onClick = onClick,
        contentPadding = PaddingValues(0.dp),
        enabled = enabled,
        shape = shape,
        border = border,
        elevation = null,
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Transparent,
            contentColor = contentColor,
            disabledBackgroundColor = Color.Transparent,
            disabledContentColor = contentColor.copy(alpha = ContentAlpha.disabled),
        ),
        modifier = modifier
    ) {
        Box(
            contentAlignment = Alignment.Center,
        ) {
            TileAndroidImage(
                drawableId = backgroundDrawableId,
                contentDescription = "...",
                modifier = Modifier.matchParentSize()
            )
            Row(
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.padding(contentPadding),
                content = content,
            )
        }
    }
}

---

TiledButton(
    onClick = {  },
    backgroundDrawableId = R.drawable.tile,
    border = BorderStroke(1.dp, Color.Blue),
) {
    Text("Button")
}

Answer 2

Just use a TextButton instead of a OutlinedButton :

TextButton(
    onClick = {  }
) {
    Icon(Icons.Default.Add,"")
    Text(
        text = value,
        fontSize = 12.sp
    )
}

If you want to use a OutlinedButton just use ButtonDefaults.outlinedButtonColors instead of ButtonDefaults.buttonColors :

OutlinedButton(
    colors = ButtonDefaults.outlinedButtonColors(backgroundColor = Color.Transparent),
    border = BorderStroke(0.dp, Color.Transparent),
    modifier = modifier,
    onClick = onClick
) {
    Icon(Icons.Default.Add,"")
    Text(
        text = value,
        fontSize = 12.sp
    )
}