https://kotlinlang.org logo
Title
t

Travis Griggs

02/28/2023, 1:05 AM
Banging my head here, tried a couple of different things. My current iteration is here:
@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 size
f

francisco

02/28/2023, 1:10 AM
Material library has an
IconButton
that does the elevation animation on the icon, have you tried that?
t

Travis Griggs

02/28/2023, 1:23 AM
For some reason, i had convinced myself at some point that that only works with Icons, not Drawables fetched from
painterResource(R.drawable.whatever)
c

Chris Sinco [G]

02/28/2023, 1:25 AM
Well you place an Icon as the content of an IconButton. Icon takes painter, vector, and bitmap.
t

Travis Griggs

02/28/2023, 2:38 AM
Threw darts for a while and eventually came up with this:
@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.
c

Chris Sinco [G]

02/28/2023, 3:34 AM
Do you have a mockup or video of what you want to do? It seems you want to deviate from the default interaction animations in the Material components like the FAB?