I see the unusual behavior of the iPhone X home indicator while working on my latest app. Application background near the purple home indicator. When the app is launched, the home indicator is very light gray.
But something strange happens when I hit the "share" button of the app, which opens the default iOS activity view (aka "share sheet"). When you press the "undo" button to close the activity view, the home indicator is dark gray.
Although the background color is exactly the same, the display of brightly colored activity that passes below causes the home indicator to change color. The only way to get the home indicator back to its original color is to leave the app and come back again.
I've never seen this before, and it makes me curious.
What determines the color of the home indicator and why does it behave like this? The answer is very complex. Let's dive deep and see what we can learn!
Basic home indicator
In September 2017, Apple introduced its newest mobile iteration of the newest phone: iPhone X. The new design replaces the iconic home button with gestures on the screen. To go home, users just swipe from the bottom of the screen.
Destination Home Indicator
To create the ability to swipe up from the bottom of the screen, Apple added a small horizontal bar known as home indicator. Home indicators are always present for the home screen and in any app requesting to be temporarily hidden (full screen video, games, etc.).
The home indicator serves to protect the bottom edge of the screen from opposing user interface elements and gestures. Because users need to be able to swipe from the top of the screen at any time, best practices now dictate that developers avoid conflicting movements or buttons on the bottom edge of the screen.
By placing a bar at the bottom, user interface elements in the same location look wrong-there is a visual conflict between the blades and other elements. In this case, the home indicator "protects" the screen area from designers or engineers who are unaware of the functionality of the iPhone X.
Now we're all on the same page, go back to our original question: "What color is a home indicator?"
Part 1 - Beginning
On September 13, 2017, I answered a Stack Overflow question asking how to change the home indicator color.
At that time, the iPhone X has not been published yet, but the latest version of Xcode includes the iPhone X simulator. Running a simple test app in the simulator shows that the home indicator color is based on the color of the content below it.
The new API for iPhone X is released along with this same Xcode version, and no public API is available to modify the home indicator color (which still happens at the time of writing this post, and it will probably always be the case).
This makes my Stack Overflow answer simple and easy: it's impossible to modify the color, and you do not have to worry, because it is out of your control and guaranteed to be seen.
Since I suspect this to be a common question, I include some screenshots of house indicators above various background colors.
This is good enough for me. The home indicator maintains its visibility by sampling the display colors below it, and choosing a gray color that provides enough contrast.
Part 2 - Thick Plot
Apparently the color of home indicator is not that simple. Several further observations pierced the hole into the "solid-color function" of my theory.
Observation # 1: Multiple Colors
The first observation is that home indicators can have many colors, similar to gradients. In the following example, the left side of the screen is black, and the right one is white. The home indicator adjusts for this by adopting brighter colors on dark backgrounds, and darker colors on a light background.
Home indicators can be multiple colors at once, and a seamless transition between them. This smooth transition is updated in real time if one of the views behind the home indicator changes.
In the example above, a small white display moves back and forth behind the home indicator. The indicator part of the house that covers the white landscape becomes pure black and the transition is smooth to gray.
This behavior is similar to UIVisualEffectView, which in effect obscures the existing content. Home indicators are most likely to take samples of nearby colors to get the mixed effect seen in the image above.
(In addition to good looks, this function can help prevent burn-in on OLED screens.)
Observation # 2: Same Background, Different Home Indicator Colors
As I mentioned at the beginning of this post, I see an unusual behavior when a share sheet is passed under the home indicator.
This is the most surprising observation - there is no simple 1-to-1 mapping between the background color and the home indicator color. At this point I was determined to learn more through experimentation.
Section 3 - Investigation Begins
My first business sequence is to specify the formula for the home indicator color on the iOS simulator. From my previous observations, iOS simulator behavior is more predictable than real devices.
I created a new iOS app as a lab for my future experience. The application is simple-all I need is an easy way to change the background color behind the home indicator. A slider and a stepper control the background gray color, which is displayed as a large number in the center of the screen.
My goal is to determine the home indicator color for any possible gray background color. I can graph this data and see if the formula is applied to it. Since there are only 256 possibilities, I use a manual approach, using the application "Digital Color Meter" macros to get the home indicator color for each value.
I described the result. It's not a linear function, exponential function, or any "nice" function you might see in a math class.
This is not what I was expecting.
It is a step function but with an uneven step. There are different sections: (relatively) light gray period, two large steps, a series of small steps, steps in reverse direction, and pure black period.
The most unusual part is that the home indicator color does not always decrease. There is a period (around 170g / hr) where it becomes lighter because the background becomes lighter.
Why does the graph look like this? What is the same experiment with the same results on real devices? I need to know
Section 4 - Investigations continue
My next job is to do the same experiment on a real device. It soon became apparent that the results would be very different.
To collect data on real devices, I use the same application from before. I streamed a live preview of the iPhone screen to my computer via QuickTime. This removes the color change from the True Tone display, and also allows me to use the Digital Color Meter application to easily check its color.
Other factors add complexity to real devices - red, green, and blue values are not always the same. In the simulator, the RGB values are identical, producing colors like RGB (54, 54, 54). On actual devices, they are almost never the same, but very close, producing colors like RGB (211, 209, 212). When recording the result, I take the average individual RGB value.
Here is the result, compared to previous simulator data.
The colors on the real device (red line) follow a similar trend to the simulator (blue line), unless offset by a significant margin. Home simulator indicator is always very dark, while home device indicator is very light or very dark.
The graphic for the device is actually noisy. Overall it follows a smooth trend, but it skips and looks rough. It's more than just a side effect of my average, and his voice is consistent. If the experiment is repeated, the noise follows the exact same pattern.
However, the graph above does not tell the whole story.
The values presented above are collected by starting a completely black background and adding the RGB values one at a time (from 0 to 255). When the values are collected in the opposite direction, the results are different.
At some point, the house indicator's color "falls from a cliff" in the transition from light to dark or dark to light, and animates for a short period of time, as shown in the previous gif with a purple background color. Depending on whether the background is starting to light or dark, the cliffs occur in different places.
Let's look at a new graph that compares the results from "up" (black to white) and "down" (white to black).
Source by : https://medium.com/@nathangitter/reverse-engineering-the-iphone-x-home-indicator-color-a4c112f84d34