7

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.

z.g.y
  • 5,512
  • 4
  • 10
  • 36
Roberto Leinardi
  • 10,641
  • 6
  • 65
  • 69
  • 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. – Gabriele Mariotti Nov 11 '22 at 13:19
  • 1
    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. – Roberto Leinardi Nov 11 '22 at 14:16
  • @RobertoLeinardi What about adding extra padding to your last item ? – Zach Sao Nov 11 '22 at 22:26

2 Answers2

5

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.

enter image description here

So having all of these will produce something like this:

enter image description here

z.g.y
  • 5,512
  • 4
  • 10
  • 36
  • 1
    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),` – Roberto Leinardi Nov 11 '22 at 13:00
  • 1
    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 – z.g.y Nov 11 '22 at 13:08
0

Just Add the Below Code in LazyColumn.

 contentPadding = PaddingValues(bottom = 16.dp) // put value as per you requirement
Hanif Shaikh
  • 500
  • 1
  • 10