Banging my head here, tried a couple of different ...

# compose

[Travis Griggs]

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

[francisco]

Material library has an IconButton that does the elevation animation on the icon, have you tried that?

[francisco]

https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#IconButton(kotlin.Function0[…]tionSource,kotlin.Function0)

[Travis Griggs]

For some reason, i had convinced myself at some point that that only works with Icons, not Drawables fetched from painterResource(R.drawable.whatever)

[Chris Sinco [G]]

Well you place an Icon as the content of an IconButton. Icon takes painter, vector, and bitmap.

[Travis Griggs]

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.

[Chris Sinco [G]]

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?