Is it possible to make extra padding for content i...
# compose
p
Is it possible to make extra padding for content in Scaffold if FAB is showing? Or may be there are more correct way to handle FAB overlaping?
c
Sounds like you just want extra padding on the last item of the list that is equal to the FAB height? Not sure if there is an easy way to do that. 🤔
p
Yes. Do you know how to get current fab height?
e
Just define a variable with the FAB size and use it for both the FAB's size and the bottom padding of the Composable in question. No need to make it complicated IMO.
p
But what if size of content of Fab is not matched?
c
@Erik Christensen But what about the spacing below the FAB to the bottom of the container? How do we add that same amount of spacing (in addition to the FAB height) to the bottom of the scaffold content?
because that's what's really necessary in order to make the content appear above the FAB
e
If you're using a Scaffold, it should all "just work" so long as you're using the slots for the different components and applying the content padding to your content area.
c
By default, placing everything in the proper slot, the FAB appears overlayed on top of the content, which can extend below the FAB to the bottom of the container. What I'm wondering is how to determine how much extra bottom padding the content needs to ensure that it appears above the FAB vertically, and is not obscured by the FAB. For example, when scrolling to the bottom of the list, you want to be able to fully see that last list item. By default, if that last item is at the bottom of the content slot, then the FAB will partially obscure it.
e
Apply the content padding provided to the content lambda to the list
c
@Erik Christensen The
contentPadding
param passed into `Scaffold`'s content lambda contains the padding values representing the height of the top and bottom app bars (so that your root content can properly lie between them). What I'm looking for is the distance from the bottom of the content after applying that padding, up to the top of the FAB. (i.e. from the top of the bottom bar to the top of the FAB).
t
@Chuck Stein did you figure this out?
c
@Thomas sorry for the late reply, haven't been on here lately. I just ended up looking into Jetpack Compose's internals and copying the private values for FAB height and padding (which really should not be private to the library) into my own hardcoded padding values
Maybe there's an easier way now with the latest compose updates but I haven't looked into it yet
c
@Louis Pullen-Freilich [G] I feel like you had a reason last time this came up for why it's not public?
t
@Chuck Stein no problem, thanks for letting me know your method. That's actually exactly what I did too and it is working great, no issues here.
c
Yup it works just fine for me too, until the day they change the value. If there was an actual reason to keep it private at the cost of either developers having to resort to bad practices or having overlapping UI content, I'm curious to hear it
Maybe there's some other way through the API now to avoid having overlapping content with the FAB?
262 Views