How to remove or reduce padding in Jetpack compose OutlinedButton

Question

Unable to reduce the huge padding in OutlinedButton. Tried contentPadding, modifier padding, etc. Cannot reduce padding for text "apple". Any idea? Should I use any other type of compose component for this?

OutlinedButton(     
    onClick = {},       
    border = BorderStroke(1.dp, Color.White),
    shape = RoundedCornerShape(12.dp),
    contentPadding = PaddingValues(0.dp),
    modifier = Modifier 
        .background(bgColor)
        .height(24.dp)      
        .padding(all = 0.dp),
    colors = ButtonDefaults.outlinedButtonColors(backgroundColor = bgColor)) {
        Text("apple",   
            color = Color.White,
            style = MaterialTheme.typography.body2,
            modifier = Modifier.height(10.dp).padding(vertical = 0.dp), //.background(bgColor),
        )               
    }

Updated after @liveAnyway's answer (thanks!) which appeared to help. After that I removed height from OutlinedButton too - ideally I wanted it like "wrap-content". Once I made that change, I still see the padding. Bottomline I don't want any absolute height specified so that it can work with different font size from system settings.

Row(modifier = Modifier.padding(vertical = 12.dp)) {
    OutlinedButton( 
        onClick = {}, 
        border = BorderStroke(1.dp, Color.White),
        shape = RoundedCornerShape(18.dp),
        contentPadding = PaddingValues(0.dp),
        modifier = Modifier
            .background(bgColor)
            .padding(all = 0.dp),
        colors = ButtonDefaults.outlinedButtonColors(backgroundColor = bgColor)
    ) {             
        Text("apple",   
            color = Color.White,
            style = MaterialTheme.typography.body2,
            modifier = Modifier.padding(vertical = 0.dp),
        )               
    }               
}

thanks, @liveAnyway. That helped. However I still see padding once I remove all absolute height values, any idea? — rysv, Sep 13 '21 at 04:38

score 28 · Accepted Answer · answered Sep 13 '21 at 05:54

Button has default min size modifier. This is done according to Material guidelines, so that the button is easy to hit. If the control size is too small, the user may have problems hitting it, take this into account when changing this parameter.

You can override it by applying defaultMinSize modifier. The 0.dp will be ignored, but starting from 1.dp you will get the desired result:

OutlinedButton(
    onClick = { /*TODO*/ },
    contentPadding = PaddingValues(),
    modifier = Modifier
        .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
) {
    Text(
        "Apple",
    )
}

Alternatively, you can design your own button without these restrictions:

Surface(
    onClick = {

    },
    shape = MaterialTheme.shapes.small,
    color = bgColor,
    contentColor = MaterialTheme.colors.primary,
    border = ButtonDefaults.outlinedBorder,
    role = Role.Button,
) {
    Text(
        "Apple",
    )
}

There still will be additional padding around the button. To remove it completely check https://stackoverflow.com/a/70031001/1502079 — vovahost, Jan 09 '22 at 21:06

score 15 · Answer 2 · answered Sep 13 '21 at 06:03

You have to change the minHeight (default size are MinWidth = 64.dp and MinHeight = 36.dp) and remove the contentPadding with contentPadding = PaddingValues(0.dp):

 OutlinedButton(
        onClick = {},
        border = BorderStroke(1.dp, Color.White),
        shape = RoundedCornerShape(12.dp),
        contentPadding = PaddingValues(0.dp),
        modifier = Modifier.defaultMinSize(
                minWidth = ButtonDefaults.MinWidth,
                minHeight = 10.dp
         )
    ) {
        Text(
            "apple",
            style = MaterialTheme.typography.body2
        )
    }

How to remove or reduce padding in Jetpack compose OutlinedButton

2 Answers2