How to remove padding from Text button?

Question

I am trying to remove padding from TextButton but it wont work.

TextButton(
    onClick = {},
    modifier = Modifier.padding(0.dp)
) {
    Text(
        " ${getString(R.string.terms_and_conditions)}",
        color = MaterialTheme.colors.primary,
        fontFamily = FontFamily(Font(R.font.poppins_regular)),
        fontSize = 10.sp,
    )
}

I have tried setting the height and size in Modifier property as well but the padding is still present

Mountebank

Answer 1

You cannot reduce padding with the padding modifier: it always adds an extra padding on top of the existing padding. See this reply for more details about the order of modifiers.

You can reduce TextButton padding with contentPadding argument, by specifying PaddingValues(0.dp), but this will not fully remove the padding.

If you need fully remove the padding, you can use the clickable modifier instead:

Text(
    "getString(R.string.terms_and_conditions",
    color = MaterialTheme.colors.primary,
    fontFamily = FontFamily(Font(R.font.neris_semi_bold)),
    fontSize = 10.sp,
    modifier = Modifier
        .clickable {
            // onClick()
        }
)

If you want to change the color of the ripple, as is done in TextButton, you can do it as follows:

.clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(color = MaterialTheme.colors.primary),
) {
    
}

Winglet

Adding the .clickable modifier to the Text composable still didn't remove the padding for me. – Wattle

Answer 2

Wrap the TextButton with CompositionLocalProvider to override the value of LocalMinimumTouchTargetEnforcement. This will only remove the extra margin but will not modify the defaultMinSize which is hardcoded.

CompositionLocalProvider(
    LocalMinimumTouchTargetEnforcement provides false,
) {
    TextButton(
        onClick = {},
        contentPadding = PaddingValues(),
    ) {
        Text(
            "Button",
            color = MaterialTheme.colors.primary,
            fontSize = 10.sp,
        )
    }
}

Maneuver

TextButton is using the Button which wraps the content with a Surface which inside adds a modifier.minimumTouchTargetSize(). This modifier uses LocalMinimumTouchTargetEnforcement. Have a look here cs.android.com/androidx/platform/frameworks/support/+/… – Maneuver

Indeed, missed that one. This still won't remove the padding completely, only the difference between ButtonDefaults.MinHeight and minimumTouchTargetSize.height. – Winglet

You can pass Modifier.defaultMinSize(minHeight = 1.dp) to override the default minimum of Button which would otherwise be applied. – Colombia

This might also be of interest to others: setting LocalMinimumTouchTargetEnforcement to false does not necessarily remove the appropriately-sized touch target; it simply doesn't enforce an empty visual area to overlap with a larger touch target. If you don't want to padding for layout purposes, but you place the buttons near a border of a component with sufficient padding, the touch target will still overlap with this padding of the other component. – Colombia

Answer 3

You can achieve it changing the contentPadding and applying a fixed size:

TextButton(
    onClick = {},
    contentPadding = PaddingValues(0.dp),
    modifier = Modifier.height(20.dp).width(40.dp)
) {
    Text(
        "Button",
        color = MaterialTheme.colors.primary,
        fontSize = 10.sp,
    )
}

Calendre

Answer 4

If you come across unwanted margins. When you use onclick in any Button function, it sets propagateMinConstraints = true inside the view's surface - this will apply to unwanted margins. Example how solve this problem:

@Composable
fun ButtonWithoutOuterPadding(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    elevation: Dp = 0.dp,
    color: Color = Color.Transparent,
    border: BorderStroke? = null,
    contentAlignment: Alignment = Alignment.Center,
    content: @Composable () -> Unit
) {
    Box(
        modifier
            .shadow(elevation, shape, clip = false)
            .then(if (border != null) Modifier.border(border, shape) else Modifier)
            .background(
                color = color,
                shape = shape
            )
            .clip(shape)
            .then(
                Modifier.clickable(
                    interactionSource = remember { MutableInteractionSource() },
                    indication = LocalIndication.current,
                    enabled = true,
                    onClickLabel = null,
                    role = null,
                    onClick = onClick
                )
            ),
        contentAlignment = contentAlignment,
        propagateMinConstraints = false
    ) {
        content()
    }
}

Maxma