Quick answer: Use Screen.safeArea to get the unobstructed region, convert it to anchor values on a parent RectTransform that contains your UI, and update it on orientation change. Enable “Render outside safe area” in Player Settings to use the full screen for gameplay while keeping UI elements within safe bounds.
Here is how to fix Unity Android notch safe area layout issues. Your game runs full-screen on a modern Android phone and the top portion of your UI — health bars, score text, menu buttons — is hidden behind the notch or punch-hole camera cutout. On some devices the bottom navigation gesture area overlaps your action buttons. The UI looked fine on your test device without a notch, but players with newer phones see clipped or unreachable elements.
The Symptom
UI elements positioned near screen edges are partially or fully obscured by hardware display cutouts (notch, punch-hole camera, rounded corners) or software navigation areas (gesture bars, navigation buttons). The game renders behind these areas but interactive elements are unreachable or text is unreadable.
This affects Android devices with notches (most phones since 2018), punch-hole cameras, and iOS devices with Dynamic Island or the classic notch. Each device has a different cutout size and position.
What Causes This
UI anchored to screen edges without safe area offset. If your Canvas uses Screen Space Overlay and elements are anchored to the top or sides with zero offset, they extend into the cutout area. The Canvas renders to the full screen resolution including the notch region.
“Render outside safe area” is enabled without compensation. When this Player Setting is on (the default), Unity renders content behind the notch, giving you more screen real estate for gameplay. But if you do not offset your UI, it gets clipped.
No runtime safe area adaptation. Different devices have different cutout sizes and positions. A hardcoded pixel offset that works on one phone fails on another. The solution must query the actual device safe area at runtime.
Orientation changes move the cutout. On phones with a top notch, rotating to landscape moves the cutout to the left or right side. Your safe area handling must respond to orientation changes dynamically.
The Fix
Step 1: Create a SafeArea helper component. Attach this to a RectTransform that acts as the parent container for all UI elements that must avoid the notch.
using UnityEngine;
public class SafeAreaPanel : MonoBehaviour
{
private RectTransform panel;
private Rect lastSafeArea = Rect.zero;
void Awake()
{
panel = GetComponent<RectTransform>();
ApplySafeArea();
}
void Update()
{
if (Screen.safeArea != lastSafeArea)
ApplySafeArea();
}
void ApplySafeArea()
{
Rect safeArea = Screen.safeArea;
lastSafeArea = safeArea;
Vector2 anchorMin = safeArea.position;
Vector2 anchorMax = safeArea.position + safeArea.size;
anchorMin.x /= Screen.width;
anchorMin.y /= Screen.height;
anchorMax.x /= Screen.width;
anchorMax.y /= Screen.height;
panel.anchorMin = anchorMin;
panel.anchorMax = anchorMax;
}
}
Step 2: Structure your Canvas hierarchy. Create a full-screen Canvas with a child “SafeArea” RectTransform that has the SafeAreaPanel script. Put all interactive UI under this child. Background elements that should extend behind the notch (like a full-screen gradient) stay outside the safe area container.
// Canvas hierarchy:
// Canvas (Screen Space Overlay, full screen)
// ├── Background (full screen, no safe area)
// └── SafeArea (RectTransform + SafeAreaPanel script)
// ├── TopBar (health, score)
// ├── HUD (gameplay UI)
// └── BottomBar (action buttons)
Step 3: Enable Render outside safe area in Player Settings. Go to Player Settings > Android > Resolution and Presentation. Check “Render outside safe area.” This lets your game use the full display for 3D content and backgrounds while your UI script keeps interactive elements within bounds.
Step 4: Test with Device Simulator. Install the Device Simulator package (Window > General > Device Simulator). Select device profiles with notches (Pixel, Samsung Galaxy, iPhone) to verify your safe area handling in the editor without deploying to a device.
Handling Landscape Orientation
In landscape, the notch moves to the left or right edge. Screen.safeArea accounts for this automatically, but your UI layout must handle horizontal insets as well as vertical ones. If you only planned for top insets, landscape mode will clip side-anchored elements. The SafeAreaPanel script above handles all orientations because it re-applies anchors whenever Screen.safeArea changes.
“Every phone has a different notch. Do not hardcode pixel offsets — query Screen.safeArea and let the device tell you where the safe region is.”
iOS Considerations
The same Screen.safeArea API works on iOS for the Dynamic Island, notch, and home indicator area. No platform-specific code is needed. The helper script above works identically on both platforms.
Test on at least three different notch devices. The Samsung punch-hole, the iPhone Dynamic Island, and a Pixel notch all have different cutout sizes and positions.