Travis Griggs
02/28/2023, 1:05 AM@Composable
fun CircleButton(vectorID: Int, modifier: Modifier = Modifier, click: () -> Unit = {}) {
Button(
onClick = click,
modifier = modifier.size(40.dp),
shape = CircleShape,
elevation = ButtonDefaults.elevation(defaultElevation = 5.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent
),
contentPadding = PaddingValues(5.dp)
) {
Image(
modifier = Modifier
.clip(CircleShape)
.background(color = Color.White),
painter = painterResource(id = vectorID),
contentDescription = null,
colorFilter = ColorFilter.tint(color = colorResource(id = R.color.accent_blue))
)
}
}
But this produces a shadow that is 40.dp. I want the shadow and depress feedback on just the inset icon. But I want the touch target to be outset to the larger sizefrancisco
02/28/2023, 1:10 AMIconButton
that does the elevation animation on the icon, have you tried that?Travis Griggs
02/28/2023, 1:23 AMpainterResource(R.drawable.whatever)
Chris Sinco [G]
02/28/2023, 1:25 AMTravis Griggs
02/28/2023, 2:38 AM@Composable
fun CircleButton(vectorID: Int, modifier: Modifier = Modifier, click: () -> Unit = {}) {
IconButton(onClick = click, modifier = modifier
.size(40.dp)
.padding(6.dp)) {
Icon(
painter = painterResource(id = vectorID),
contentDescription = null,
modifier = Modifier.shadow(elevation = 4.dp, shape = CircleShape),
tint = colorResource(
id = R.color.accent_blue
)
)
}
}
The push down highlight isn't quite what I wanted, but it's good enough. And this is less code/simpler than my previous attemps.Chris Sinco [G]
02/28/2023, 3:34 AM