UI support for the phones with a notch

[p-mitana]

Description of the feature

With the iPhone X having started a new trend (it may be arguable, but still is a fact), more devices will probably follow the path of having a notch at the top. A notable example is OnePlus 6, which is speculated to have a notch almost for sure.

Current indicator design will not play well with the notch, so at some point a solution should be found.

Illustrations

iPhone X's notch: https://s.hdnux.com/photos/67/17/42/14481558/3/920x920.jpg

[Flohack74]

We are re-thinking the whole indicator stuff at the moment. Maybe smth much cooler will appear. So by the time we need the notch, we should be ready for it ;)

[dobey]

I think we should ignore notched phones. Seems like a fad, and there's really no sensible way to design for it. Unless we follow suite with Android/iOS and make the top panel a weird transparent thing, and then treat the notched section like a second screen that only extends some bits of UI, it's going to be a horrible experience.

[p-mitana]

Other option would be to make a notch parts a place for something like configurable hardware buttons. It would stay out of the UI and indicators would lie below it, and a notch may have two or four slots where user could place for example shortcuts.

These shortcuts would ignore swipes - swiping from the top of the notch would do the same thing as swiping from indicators.

Of course the switches would be always visible, including when in fullscreen applications - in terms of usability they would not differ from hardware touch buttons. For phones with always on screens and touch constantly active (double touch to wake etc.) they might even be always visible - then you could possibly mute your phone with one touch without even lighting your screen (yes, I know you ain't need the notch for this indeed).

Ideas for notch area elements:

• switches (sound on/off/vibrate, wi-fi/mobile data on/off, flashlight on/off, screen timeout on/off)
• CPU/memory monitors optional in developer settings
• insert back button and use your phone upside down (OK, I'm kidding with this one :P)

The notch are should in my opinion visually stay out of the UI and be very distinct - possibly subtle gray icons (on black (not dark, but entirely black) background. As I guess all notched phones will employ OLED screens, black background over the not-entirely-black top panel will look like out of screen.

What do you think about such a concept?

[polyjitter]

I think it's safe to say that at this point, the notch is NOT a fad, and that it plus punch-out implementations are here to stay. Is there anywhere this is being worked on and/or where this can be brought back up?

[NeoTheThird]

I'm not sure adding new UI elements there is a good idea, as that changes the UI concept. However, notched and round-cornered devices are a fact of life nowadays, and completely ignoring them is not an option. From using the prototype of the VollaPhone (both rounded corners and a notch) for a couple of days, here's some of my thoughts.

We are in no position right now to completely redesign the indicators or experiment with new UI concepts, but i think we have a couple easy steps we can take to make this a passable experience without too much device-specific code or behavior changes.

I propose introducing a couple new device-specific settings that are used as offsets to re-position some UI elements. We already have device-specific config files that specify things like the default orientation, so this would not be too out-of-character. Here's what i would propose. These steps could be implemented one after the other, depending on how easy each of them is to achieve.

Four equally rounded corners

We could have a pixel value corner_offset that moves the beginning and end of the indicators (i.e. indicator-datetime) inwards.

Centered notch

On most notched devices, the notch is in the middle of the top edge of the screen in portrait mode. Notches come in different forms and sizes, but we could handle most cases by simply specifying the center_notch_width in pixels and have the indicator icons arrange themselves around it if the device is in the home orientation.

Leftbound or rightbound notches or unequally rounded corners

Devices that have other weird setups, like a sensor array in a corner could be tackled with a <position>_corner_offset (eg. top_left_corner_offset) that takes precedence over the normal corner offset described above.

Notch height

Some notches are larger than the black portion of the notification bar and extend into the rest of the screen creating a weird black bump. Not a usability issue, but a cosmetic one. Could be tackled with a min_indicator_height pixel value that serves as a lower bound for the height of the indicator bar in home orientation.

Without being terribly familiar with the implementations of the involved components, i could imagine something like this to work. What is not covered by this is the fact that the notch still covers a part of the indicators in their extended form, but i don't think that's as big of an issue.

For reference, here's a picture of how the vollaphone indicator situation looks right now, so people without notched devices laying around can get an idea:

[doniks]

maybe related:the pinephone has an area without touch input.

it's not a black rectangle notch, there is still graphical output displayed, but no touch input https://gitlab.com/ubports/community-ports/pinephone/-/issues/105

[JamiKettunen]

There are some "experimental" patches along with screenshots for the Volla Phone & OnePlus 6/6T currently on my unity8-notch-hax repo, I hope these can help with potential future implementation of UI customization for notched/curved screen corner devices :)

[greskom]

I would suggest to skip the invosoble area and in case there is not enough space for all the icons then place them in two rows.

[cauerego]

We are re-thinking the whole indicator stuff at the moment. Maybe smth much cooler will appear. So by the time we need the notch, we should be ready for it ;)

whatever happened with this?

[Flohack74]

@cauerego well ultimately the team is too small, and we have to priotize the move to 20.04 over everything else. We are working on 20.04 for at least another 4-5 months probably. Contributions are of course welcome.

[cauerego]

@Flohack74 i would love to contribute more and for the long run, but i would need to talk over voice with someone to help me fit me in.

i've been looking for a nice ~~open source~~ free project to join since forever, and this might be it! 😁

any pointers?

[Flohack74]

Sure. lets have a call. The project is weak on documentation so you need a lot of exploration to do before you might be able to tackle that feature. We made a draft of some first steps, but its farily incomplete. Ping me on Telegram @Flohack

[Flohack74]

Just FYI we will probably implement the solution by Michele since its not very intrusive and does the job. The rounded corners avoidance is split out into a separate story.

[polyjitter]

what implementation is that, again?

[Flohack74]

Its basically a keepout area in the indicator bar that is sizeable, so the phone porter can determine how wide it will be, and the indicators will not draw in that are in the middle. We still have to see how it affects rotation