Bottom bar with inset FAB

Hey Makers!
It would be good, having a bottom action bar with an inset FAB, as you can see the image:

(Source : App bars: bottom - Material Design)
What do you think about it, is it possible?

This is really good idea.

Actually, I tried to do this before.
But I could not moving the FAB button to the middle of the screen. I have tried many different ways like dividing the screen size into 2, but it did not happen.

I think the only problem is moving the FAB button to the center of the screen.


É só colocar entre 250 e 150, eu acho, não lembro muito mas eu consegui com algum desses números…

Really good idea.

Looks amazing :relaxed:


What have you tried to get it in the middle ?

1 Like

Idk guys if you got it, but I’m talking about the shape of bottom bar.

1 Like

Setting FAB margin (right) to;

  • Screen width / 2
  • Screen width / 2 - 28
  • Screen width / 2 * 0.5
  • Screen width * 0.5 - 28
    like this…

I already understand what you mean.
I think it’s hard to just center the FAB button, It’s easier to do the bottom bar. (to me)
It can also be done by adding around white photo behind the FAB button. [at least until this feature is added]


Or just making the FAB White and using a black icon inside.


here you go: