Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Jetpack compose IconButton padding

How to remove padding in an IconButton ? I want items in my column have the same start padding

preview image

Column(
    modifier = Modifier
        .fillMaxWidth() 
        .padding(horizontal = 16.dp)
) {
    IconButton(onClick = { }) {
        Icon(asset = Icons.Filled.Search)
    }
    Text("Some text")
} 
like image 411
LDQ Avatar asked Oct 06 '20 09:10

LDQ


People also ask

How to set padding for text in Android jetpack compose?

To set padding for Text composable, in Android Jetpack Compose, assign modifier parameter of Text with Modifier companion object, where padding () method is called on the Modifier. Pass required padding value in the padding () function call.

How does jetpack compose work?

Note: In Jetpack Compose, whenever we call a function which either it belongs to the same class, file or any other, it has to be annotated as Composable. As the code mentioned above, each parameter checks for a value and if it is not been provided anything than it gets set as null by default.

How do I add padding to a composable?

The first modifier available is the padding modifier that takes an optional padding argument for each side of the composable: This is a flexible modifier as it allows us to apply padding to a defined set of sides – be it a single side or several sides. For example, let’s apply some padding to only the start of the composable:

What is padding in JavaScript?

In most cases, padding is used in the form of a modifier, meaning that it can be applied to any composable that we might be working with. The first modifier available is the padding modifier that takes an optional padding argument for each side of the composable:


2 Answers

With 1.0.x the IconButton applies this modifier: IconButtonSizeModifier = Modifier.size(48.dp).
It is due to accessibility touch targets and allows the correct minimum touch target size.

You can modify it using something like:

IconButton(modifier = Modifier.
        then(Modifier.size(24.dp)),
    onClick = { }) {
    Icon(
        Icons.Filled.Search,
        "contentDescription",
        tint = Color.White)
}

It is important the use of .then to apply the size in the right sequence.

enter image description here

like image 90
Gabriele Mariotti Avatar answered Sep 24 '22 14:09

Gabriele Mariotti


Wrap the IconButton with CompositionLocalProvider to override the value of LocalMinimumTouchTargetEnforcement which enforces a minimum touch target of 48.dp.

CompositionLocalProvider(
    LocalMinimumTouchTargetEnforcement provides false,
) {
    IconButton(onClick = { }) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = "Search",
        )
    }
}
like image 20
vovahost Avatar answered Sep 24 '22 14:09

vovahost