Notch Solution: designing Unity UI around a cutout instead of hiding it

The problem: a screen with a hole in it

Notch Solution is described as a set of components and tools to solve notched and cutout phone layout problems for Unity, and the README is direct about the philosophy behind it. Whether you like it or not, the time has come for designers to design in context of a notch and embrace it instead of hiding it. That is the design position the whole package takes, and it is more opinionated than most utility packages. A cutout or punch hole intrudes on the usable rectangle of a phone screen, and the common workarounds are to letterbox the top of the screen, to shift the whole interface down, or to leave the content underneath where the hardware will cover it. The package exists so that a layout can be authored against the real shape of the display, with the safe area and the cutout treated as first class things a designer can see and adjust rather than a constant you guess at per device.

Design-time preview, and why it changes the iteration loop

The second feature the README calls out is that the tool enables design-time preview, which helps you iterate your design without building the game. For Unity developers this is the part that matters most, because the normal alternative to checking a layout on a notched phone is to build, deploy, launch, look, and repeat. The components in the Editor/ directory are the tooling side, and the Runtime/ directory holds what ships. A sample scene called Debug Scene is registered in the package manifest, and its description says it displays the safe area and cutouts, the device information, and some basic Notch Solution component doing its work, and that you can build this scene to a real device to check runtime behaviour. So the package is designed for two loops at once: a fast loop in the editor where the cutout geometry is visible on the canvas, and a verification loop on hardware where the same scene confirms the real device agrees.

What the package manifest says about scope

The package.json is short and tells you what the thing is made of. The package name is com.e7.notch-solution, the display name is Notch Solution, the author is Exceed7 Experiments, the version is 2.0.1 and the unity field is 2019.4. The description reads runtime components and design tools to solve notched and cutout phones layout problems. The keyword list is the most useful part, because it tells you which concepts the package reasons about: ui, ugui, mobile, user interface, responsive, notch, cutout, safe area, padding, hole and punch hole. The presence of responsive and safe area alongside the hardware terms says the scope is layout adaptation, not just drawing a black rectangle over the camera. The samples array registers one entry, the Debug Scene, with the path Samples~/DebugScene, which is the same hidden folder convention the documentation uses.

The hidden folder convention, and why Unity never imports it

The distribution method is unusual and worth understanding before you install anything. The README says that with an internet connection you should visit the website, and without one, the website was generated from files in a hidden folder, Documentation~/index.md. Currently you may see it in a zipped form, Documentation~.zip, because Asset Store does not support publishing unimported folders yet, so the author zips them to make them go together. You unzip that to access the documentation, and you can unzip Samples~.zip to reach the unimported samples, which you copy into your project to make them actually import. The trailing tilde in a folder name is a Unity convention, and the README explains the payoff: Unity will not create .meta files for these folders and will not import the tutorial texts and images, so they stay out of your game. The same applies to the unzipped Samples~ folder, which is not supposed to import until you want to see it. The README calls this format the current best practice, and it is a sensible way to ship documentation inside a Unity package without polluting the consuming project's import pipeline.

Installing it, and reading the docs the way the author intends

There is no install command in the README, and there is not supposed to be one. The path is the official website at exceed7.com/notch-solution, which is where the documentation lives, or the zipped folders inside the package if you have no connection. Once you have a Documentation~ folder, the README says you can read it in Markdown form from your code editor, because the markdowns are human readable by design and will not be imported into Unity, thanks to the trailing tilde. The author also suggests using an IDE such as Visual Studio Code with the Markdown: Open Preview to the Side command, which renders the Markdown nicely with images working properly, and you navigate by clicking files in the folder tree. The repository root also carries a .docfx_project/ directory, which is the documentation site generator configuration, alongside Icons/ for the package's own icon assets, a CHANGELOG.md and a package.json with its .meta file, since this is meant to be imported as a Unity package rather than cloned as a working folder.

The limits: a niche package, and a version story that needs reading

Two limitations are worth naming. The first is that the package is narrow, and that is by design rather than by omission. It addresses cutouts and safe areas, and nothing else, so a project that also wants a general responsive layout system will still be writing that system. The second is more concrete: the version numbers and the tags do not line up. The manifest says version 2.0.1 while the newest tagged release is 1.9.0 from 2019-11-20, and the second tag is 1.2.1 from 2019-05-24, so the visible release history is old while the package manifest has moved past it. The unity field says 2019.4, which is the Unity version the package targets, and that is also the era of those tags. For a team on a current Unity version, the practical questions are whether the components still behave as expected on a recent editor and what the CHANGELOG.md records since the last tag, and the README does not answer either. The alternative to weigh is doing it by hand with the built-in Screen.safeArea, which exists in Unity and needs no package, at the cost of designing a preview workflow yourself.

The commercial side, and how the project sustains itself

The README has a section on paying for the software that is unusual enough to be worth quoting rather than paraphrasing. It asks whether you are looking for a way to say thanks for this open source work other than a code contribution, and points to a publisher page for what it calls its collection of niche Unity Asset Store audio plugins, and to telling your audio caring friends about them. The effect is that the notch work is free and MIT licensed, while the author's other Unity work is sold commercially, and readers are pointed at that in exchange for the notch tool. The official website is exceed7.com/notch-solution, questions and problems go to [email protected], and there is a Discord link as well. On the licensing itself, the README links an MIT LICENSE.md at the repository root, and the file is there alongside its .meta counterpart, so the terms are the standard permissive ones. A practical point for a team: the open source part is the notch components, and the paid part is audio, so a commercial game can use the notch package without a separate licence negotiation.

Editorial conclusion

Adopt Notch Solution if you ship Unity builds to phones with a notch or a punch hole and want the layout to account for the cutout with an editable preview, rather than hiding it behind a black bar. Do not adopt it if your target devices have no cutouts, and note that the shipped package is Unity 2019.4 era, with a version in package.json of 2.0.1 and the newest tagged release at 1.9.0 from 2019. Before you wire it into a project, read the documentation in the Documentation~ folder, and check the CHANGELOG.md to see which parts of the package have been revised since the last tag.

Frequently asked questions

Official sources

1. 5argon/NotchSolution on GitHub
2. License: MIT
3. Project website
4. README
5. Releases