Have button in UIToolbar cover full height below iPhone X Home Indicator

Question

I have a UIToolbar at the bottom of the screen that contains three buttons, all with different background colors. I use Auto Layout and constrained the toolbar to the bottom layout guide (I have to support iOS 8, so no Safe Area Layout Guides) so that the toolbar shows correctly above the iPhone X Home Indicator.

My problem is that I want the buttons to cover the full height of the toolbar and draw below the Home Indicator. I currently have this:

Note the white space below the Home Indicator.

I'd like that space to be covered by the button background color (labels ,of course, have to remain above the Home Indicator):

I have to support devices all the way down to iOS 8, landscape and portrait mode.

Edit:

When I constrain the toolbar to the bottom of the superview, it sits too low and the buttons are covered by the Home Indicator:

Answer 1

I think this will work for you.

1. You need to set your toolbar button constraint to safe area.
2. Then you need one other view whice contain only three colored view without any text. and set following constraint for this view. -> Vertical space constraint to toolbar -> leading, trailing and bottom constraint to superview.

So, in Nouch devices this dummy view become expanded and in other device it's height get zero automatically.

No Device specific coding required.