How to extend bottom view colour below the home indicator in iPhone X?

Question

Please check the attached image. The Viewcontroller's view's background colour is blue. This colour extends below the status bar and below the home indicator as you can see. There is a white view at the bottom which is a button. Here the white view is inside the safe layout guide.

I want the same white colour to extend below the home indicator without adding any additional view only for iPhone-X.

How to do this?

Answer 1

You need to set/attach bottom constraint of you white view with super view.

Follow these steps and see:

• Check bottom/bottom alignment constraint of your view. It may be attached with bottom anchor/constraint of safe area.

• (To edit it) Double click on Bottom constraint, which will show you following options.
• Now change selection (tick mark) from safe area to super view.

• set constant to 0 if not.

• Here is result, that you may want.

Answer 2

Krunal's answer works in most cases. But if you don't have that top constraint set, the white view will go under the home indicator line.

In my design, the white view had leading ,trailing,bottom and height constraints only. I had to add another view as a subview to the white view (This view will act as the white view from now),enable the safe area layout guide for the outer white view and set the constraints to the margin/safe area in order to get this thing work for all the devices including X.

NB: Height constraint should be set for the inner view/Button(in my case) and not for the outer view. Autolayout will properly do the work for you in iphone X device.

This is how it looks in iphone X and other phones. iPhone SE:

iPhone X:

Hope this may help someone. :)

Answer 3

In my case I wanted the view at the bottom to have a height of 49. So set the top to be 49 above the bottom layout guide.

Then set the view bottom to the superview bottom.

Now on iPhone X the view extends to the bottom of the phone, and is still has a height of 49 above the safe area, and on other devices the view has a height of 49.