Compose: What is the proper way to add to a (Lazy)Column enough bottom padding to avoid the FAB to cover its content?

Question

The issue is the very similar to the one discussed here for Flutter, but happens in native Android using Jetpack Compose:

Is there a way to dynamically add bottom padding to a (Lazy)Column so its content is never obscured by the FAB?

The FAB is added to the Scaffold so I would expect some way to get this padding dynamically.

Bracket

In this way you would have an empty space. Maybe the FAB is not the best solution in this case. You could use a Row at the bottom with a centered Button. – Evie

Hi @GabrieleMariotti, the use case is the same as Gmail and Google Contact app: it has a FAB on top of a list but, when you scroll to the bottom, there is enough padding for it to not block the content. – Bracket

@RobertoLeinardi What about adding extra padding to your last item ? – Blim

Answer 1

You can try this though this may not be a good solution,

@Composable
fun MyScreen() {
    
    var fabHeight by remember {
        mutableStateOf(0)
    }

    val heightInDp = with(LocalDensity.current) { fabHeight.toDp() }

    Scaffold(
        floatingActionButton = {
            FloatingActionButton(
                modifier = Modifier.onGloballyPositioned {
                    fabHeight = it.size.height
                },
                shape = CircleShape,
                onClick = {},
            ) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = "icon")
            }
        },
        floatingActionButtonPosition = FabPosition.End
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(it),
            contentPadding = PaddingValues(bottom = heightInDp + 16.dp)
        ) {
            items(100) {
                Text(text = " Hello world Hello world Hello world Hello world  Hello world")
            }
        }
    }
}

Edit: Just simply add the modified paddings to contentPadding of LazyColumn

The hardcoded 16.dp is added because internally the Scaffold implementations has a private property that offsets the fab from the bottom.

So having all of these will produce something like this:

Brandonbrandt

Thanks, but I was hoping to not have to hardcode any padding value. It's a shame that the Scaffold doesn't expose it. Anyway, your solution can be improved replacing the item with the spacer with simply this set directly to the LazyColumn, after the modifier: contentPadding = PaddingValues(bottom = heightInDp + 16.dp), – Bracket

Ohh yes, thank you, that's a better way to do it, never thought of just adding the height of the fab that way, ill edit my answer based on your suggestion – Brandonbrandt

Answer 2

Just Add the Below Code in LazyColumn.

 contentPadding = PaddingValues(bottom = 16.dp) // put value as per you requirement 

Appellative