Appcelerator / Titanium - On iPhone X, how to make the ToolBar colour fill to the bottom of the screen?

Question

There appears to be several solutions out there for people using Xcode, however, I'm using Appcelerator Studio / Titanium and I'm getting this problem:

On iPhone X, I have a <Window> with extendSafeArea="false" so that the ToolBar does not go below the area where users can swipe up to go to the iPhone home screen. The <Toolbar> has a green background with bottom="0", which makes it appear in the correct position. However, underneath there is a big white space:

How do I get the green background of the ToolBar to extend to the bottom of the screen?

Update: I have tried setting the Window background colour to the same as the Toolbar - which partially solved the problem, however I then had to set the background colour of the ScrollView to white (for the actual content area above/below the ToolBar). The problem now is that when this screen animates into view (e.g. when clicking an item in a ListView to load this screen), it animates from green to white, because the ScrollView is animating in. This is an ugly animation as it appears to flash green and then fade into the correct colour for the content. Is there another way to do this?

Answer 1

I can think of a few ways to get this done:

1. First, make the <Window> have extendSafeArea="true", so that it stretches all the way down and covers the area where users can swipe up to go to the iPhone home screen.

   Then, put a green view at the bottom, filling that lower area.

   Finally, place your green ToolBar in the same spot as it appears now, by adjusting its position or margins.

   The layout should have the ToolBar appear as it is now, but have a green view under it, as the window allows it to fill that space.

2. Start by hiding the ToolBar with a 0 alpha value, so that it won't show at all at the beginning, as the screen animates into view.

   After a small delay, when the view is now shown:

   • Fade the Window background color from white to the same green as the ToolBar.
   • Fade in the ToolBar, by animating its alpha value from 0 to 1.

   This should result in a less ugly animation than your previous attempt.

3. Similar to point 2 above, hide the ToolBar, but this time, move it off screen, below the visible area.

   Leave the window white and after a small delay, when the view is visible:

   • Fade or directly set the Window background color from white to the same green as the ToolBar.
   • Animate the ToolBar's position from down below the interface to its current position. You could try using a bounce or another effect, to see if the result looks more pleasing. Similarly, you can explore hiding the ToolBar off screen to the left and then animating to have it enter the interface from there.

The common concept of ideas 2 and 3 is to use a reveal animation on the ToolBar in order to "explain" the change in the interface that sets the Window's background color.