Member-only story
Are Compose Components Betraying You? The Shocking Hack to Vanish Native Padding! 🧙✨
.offset hack for removing FloatingActionButton paddingEver felt like your Jetpack Compose components have a secret agenda to add unwanted padding? You’re not alone! I’ve seen countless questions on Stack Overflow and Slack asking how to wrestle control back from default paddings. While Compose is designed for ease of use, sometimes we need to get down and dirty with a bit of a hack to achieve pixel-perfect layouts. Today, we’re diving into a clever trick using the .offset modifier to surgically remove that unwanted spacing."
USE CASE :
I have a FloatingActionButton composable that displays an image and a dropdown icon. The Icon component, by default introduces some unwanted padding. To combat this, I applied the .offset(x = (-8).dp, y = 0.dp)modifier. This shifts the icon 8dp to the left, effectively counteracting the perceived spacing. You can see the unwanted padding in the image below.
HOW TO FIX THE UNWANTED PADDING :
@Composable
fun FloatingActionButton(onClick: () -> Unit) {
Surface(Modifier.wrapContentSize().clickable { onClick() },
shape =…
