24

I would like to change the background color of the view that appears on the bottom of the new iPhone X with a home indicator inside.

Is it possible?

0

3 Answers 3

39

The home indicator color is determined automatically based on the color of the content below it.

Most of the time, this means you should not worry about its color since it is out of your control, and will always be clearly visible to users.

However, you can place a colored view in the area behind the home indicator to manipulate its color.

Examples

(Please note that these examples were taken on the iOS simulator, and behavior on a real device is different.)

Home indicator with white background

Background: white (#ffffff)

Home Indicator: black (#000000)


Home indicator with black background

Background: black (#000000)

Home Indicator: gray (#484848)


Home indicator with gray background

Background: gray (#5f5f5f)

Home Indicator: dark gray (#282828)


Home indicator with blue background

Background: blue (#1a98fc)

Home Indicator: very dark gray (#121212)


I wrote an in-depth article about the home indicator color if you want to learn more about its behavior: Reverse-Engineering the iPhone X Home Indicator Color

5
  • How do I access the view that's behind the indicator, so that I can change it's background color?
    – Fengson
    Sep 13, 2017 at 14:33
  • 1
    There's no specific view in that location. In my examples above, I changed the background color of the entire view. If you want to change just that area, you can constraint a view to that area. Sep 13, 2017 at 15:06
  • I've read the answer and the article and I've got a question: How do you make a color free component like that home indicator? Like, I've got a camera running, and have a close button on top of it. How do I make the button always clearly visible despite the background color (camera's layer) just like how the home indicator changing its color?
    – Eddie
    Nov 9, 2018 at 9:49
  • 3
    Wow... The investigations described in the medium article is simply mind blowing ...
    – RainCast
    May 8, 2019 at 20:29
  • I believe that only when it's set a toolbar it becomes a filled area, with the toolbar bartintcolor (like it happens with the navigation bar...)
    – Miniapps
    Sep 14, 2019 at 15:20
4

The home indicator (line) colour is set automatically based on the content below it, often the root view background.

To change the background colour use this:

self.window.rootViewController.view.backgroundColor = [UIColor colorWithWhite:0.98 alpha:1.0] ;
2

You can add some negative distance between a colored view's bottom and the safe area's bottom.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.