30

It changes on their native keyboard/emoji board, depending which of the two are open. I thought it would change the color automatically based on UIInputViewController, however it is not occurring with custom keyboard extensions:

enter image description here

4
  • You want to change the color of the gray area behind the home indicator and globe icon? Commented Sep 22, 2017 at 0:08
  • Yes, precisely.
    – VDog
    Commented Sep 22, 2017 at 0:31
  • Also note when you rotate to landscape it looks particularly awful.
    – Jordan H
    Commented Nov 10, 2017 at 4:10
  • Please check my answer for the similar question here
    – SSemashko
    Commented Nov 17, 2017 at 15:20

2 Answers 2

37

One thing you can do to solve this. Change backgroundcolor of your ViewController's View for home indicator. And set status bar appearance separately through coding as per your needs.

This will change your home indicator, status bar color plus a safe area to Chocolate color, Add separate view in safe area for your other design, as I've added yellow.

enter image description hereenter image description here

enter image description here

If you want different color for your status bar, call it somewhere from viewDidLoad with color you want -

func setStatusBarBackgroundColor(color: UIColor) {

        guard let statusBar = UIApplication.shared.value(forKeyPath: "statusBarWindow.statusBar") as? UIView else { return }
        statusBar.backgroundColor = color
    }  

enter image description here

Apart from this, You won't be able to do any other changes in appearance, at least for now till apple provides any way to control appearance of home indicator. let me show you.

enter image description here

These are the availability of bars, where you can control appearance of it. There is no home indicator bar option Apple has provide for it's alteration.

These are the only bars you can control appearance -
Navigation Bars
Search Bars
Status Bars
Tab Bars
Tool Bars

Referral Link - iPhone-X Interface Guidelines

10
  • 2
    You'd think they would allow us to do this for custom apps so that there isn't a jarring difference between your background color, and theirs. And it seems to work fine in full screen apps me thinks :/
    – VDog
    Commented Sep 26, 2017 at 18:21
  • 1
    This doesn’t answer the question. This changes appearance of your own app, not the bottom bar in your custom keyboard extension.
    – Jordan H
    Commented Nov 10, 2017 at 4:09
  • 1
    Yeah Joey, this is unfortunately true. I got excited thinking this will change the bottom keyboard color :/ but did not work
    – VDog
    Commented Nov 10, 2017 at 19:37
  • 1
    But this wouldn't work on a custom keyboard, as the custom keyboard has no access to the parent app (aside for the one parent app that you make). This means that every other app my keyboard is used in will have my background color, and a harsh grey background color on the bottom :/
    – VDog
    Commented Nov 14, 2017 at 19:11
  • 3
    This doesn't change the bottom bar color even for a regular app. It just change color for the status bar. Did I miss anything here?
    – nuynait
    Commented Nov 21, 2017 at 1:57
0

If you wanna use other background color for the layout which differs with top and bottom edges, or want to keep status bar background color while switching apps, you could try to add two different views of different background color with height 50 or more (pt) in each layout nib. One constraints bottom alignment with top of the safe area, another one constraints top alignment with bottom of the safe area, and then make IBOutlet reference of these two views to set backgroundColor programmatically in code.

Your Answer

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

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