How to remove Surface padding in jetpack compose

Question

In LazyColumn when we use LazyListScope.items with Surface. Inside multiple items there is extra padding on TOP and BOTTOM. I want to remove this padding. I am using Surface component of Material 3. BOM version is compose_bom = "2022.11.00".

Please don't suggest any alpha or beta version fix. If Material 3 stable api don't have solution, then please suggest normal Surface Material.

PreviewCreateListView

@Preview(showBackground = true)
@Composable
fun PreviewCreateListView() {
    CreateListView()
}

CreateListView

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CreateListView() {
    val itemList = listOf(1, 2, 3)
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
    ) {
        items(itemList) { item ->
            Surface(
                onClick = { },
                color = Color.Blue
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "$item",
                )
            }
        }
    }
}

Output

Gabriele Mariotti · Accepted Answer · 2023-02-09T06:39:28.820

2

The M3 Surface with the onClick parameter has a minimum touch target size (48.dp) for accessibility. It will include extra space outside the component to ensure that they are accessible.

You can override this behaviour applying false to the LocalMinimumInteractiveComponentEnforcement. If it is set to false there will be no extra space.

Something like:

CompositionLocalProvider(
    LocalMinimumInteractiveComponentEnforcement provides false) {
    
    Surface(
        onClick = { },
        color = Color.Blue
    ) {
        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "$item",
        )
    }
}

Note: LocalMinimumInteractiveComponentEnforcement requires at least M2 1.4.0-alpha04 and M3 1.1.0-alpha04. Before you can use LocalMinimumTouchTargetEnforcement in the same way.

edited Feb 09 '23 at 06:39

answered Feb 08 '23 at 22:42

Gabriele Mariotti

320,139
94
887
841

`Unresolved reference: LocalMinimumInteractiveComponentEnforcement` getting error. – Kotlin Learner Feb 08 '23 at 23:24
@VivekModi My bad. With the M3 1.0.1 stable you have to use `LocalMinimumTouchTargetEnforcement`. Starting with M3 **1.1.0** it was changed to `LocalMinimumInteractiveComponentEnforcement` – Gabriele Mariotti Feb 09 '23 at 06:40

score 0 · Answer 2 · answered Feb 08 '23 at 22:42

The Surface variant that you use, with a onClick parameter, enforces a minimum height for accessibility purposes, see this at line 221

If you want to remove the space, use the variant without the onClick argument and use a Modifier.clickable instead

@Composable
fun CreateListView() {
    val itemList = listOf(1, 2, 3)
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
    ) {
        items(itemList) { item ->
            Surface(
                modifier = Modifier.clickable {  },
                color = Color.Blue
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "$item",
                )
            }
        }
    }
}

How to remove Surface padding in jetpack compose

2 Answers2