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

vovahost · Answer 1 · 2021-11-19T07:28:42.950

24

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,
        )
    }
}

edited Nov 19 '21 at 07:28

answered Nov 19 '21 at 07:04

vovahost

34,185
17
113
116

1

`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 https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Surface.kt;drc=2c48dd3399eeb0cfdcc9a16978692a8cb9775f96;l=216 – vovahost Nov 19 '21 at 08:12
1

Indeed, missed that one. This still won't remove the padding completely, only the difference between `ButtonDefaults.MinHeight` and `minimumTouchTargetSize.height`. – Phil Dukhov Nov 19 '21 at 09:18
2

You can pass `Modifier.defaultMinSize(minHeight = 1.dp)` to override the default minimum of `Button` which would otherwise be applied. – Steven Jeuris Nov 09 '22 at 14:45
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. – Steven Jeuris Nov 09 '22 at 14:53

Phil Dukhov · Accepted Answer · 2022-04-18T11:21:26.803

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),
) {
    
}

Adding the `.clickable` modifier to the `Text` composable still didn't remove the padding for me. — Raj Narayanan, Aug 14 '22 at 17:34

score 9 · Answer 3 · answered Sep 08 '21 at 07:53

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,
    )
}

Forest Thief · Answer 4 · 2022-08-19T13:35:17.837

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()
    }
}

How to remove padding from Text button?

4 Answers4

Linked