Skip to content

Conversation

@triniwiz
Copy link
Member

@triniwiz triniwiz commented Jul 28, 2025

Android: Edge-to-Edge Support with Overflow Handling

This PR introduces a flexible edge-to-edge system for Android, allowing views to handle system insets more precisely.

Note: Insets propagate down the view hierarchy until consumed. When applied, they are added to the view’s padding.


🔧 Features

  1. androidOverflowEdge (new property)
    Controls which inset edges should be applied and/or consumed by the view.

  2. androidOverflowInset (new event)
    Fired when androidOverflowEdge is set to dont-apply. Allows manual handling of the insets.

  3. enableEdgeToEdge() (new method)
    Enables full edge-to-edge rendering and lets you:

    • Customize status bar and navigation bar light/dark overlay colors
    • Provide a callback to control whether light or dark system UI should be used based on your own logic

✏️ androidOverflowEdge Options

Value Behavior
none Apply and consume all inset edges
left / top / right / bottom Apply and consume only the specified edge
dont-apply Do not apply or consume any insets — triggers androidOverflowInset
left-dont-consume Apply the left inset but do not consume it; all other insets are ignored
top-dont-consume Apply the top inset but do not consume it; all other insets are ignored
right-dont-consume Apply the right inset but do not consume it; all other insets are ignored
bottom-dont-consume Apply the bottom inset but do not consume it; all other insets are ignored
all-but-left Apply and consume all insets except left
all-but-top Apply and consume all insets except top
all-but-right Apply and consume all insets except right
all-but-bottom Apply and consume all insets except bottom

Pages default to dont-apply.


🧩 Manually Handling Insets with androidOverflowInset

When androidOverflowEdge is set to dont-apply, the view will receive the androidOverflowInset event instead of automatically applying insets.

This event allows you to inspect, modify, and explicitly consume specific inset sides using the *Consumed flags.

Example:

myView.on('androidOverflowInset', (args) => {
  // Modify inset values if needed
  args.inset.top += 10;    // Add 10px to top
  args.inset.bottom += 10; // Add 10px to bottom
  args.inset.left += 10;   // Add 10px to left
  args.inset.right += 10;  // Add 10px to right

  // Explicitly consume each side
  args.inset.topConsumed = true;
  args.inset.bottomConsumed = true;
  args.inset.leftConsumed = true;
  args.inset.rightConsumed = true;
});
 

@nx-cloud
Copy link

nx-cloud bot commented Jul 28, 2025

View your CI Pipeline Execution ↗ for commit 36c5e3d

Command Status Duration Result
nx test apps-automated -c=ios ✅ Succeeded 3m 16s View ↗
nx run-many --target=test --configuration=ci --... ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2025-11-05 03:03:57 UTC

@NathanWalker NathanWalker changed the title feat: edge to edge feat(android): edge to edge Jul 28, 2025
@NathanWalker NathanWalker added this to the 9.0 milestone Jul 30, 2025
@triniwiz triniwiz marked this pull request as ready for review August 6, 2025 01:51
@NathanWalker NathanWalker added the docs needed Additional documentation on this issue/PR is needed label Aug 24, 2025
@NathanWalker NathanWalker merged commit 248ff4b into main Nov 5, 2025
6 of 7 checks passed
@NathanWalker NathanWalker deleted the feat/edge-to-edge branch November 5, 2025 03:13
farfromrefug added a commit to Akylas/NativeScript that referenced this pull request Nov 18, 2025
This reverts commit 248ff4b.

# Conflicts:
#	packages/core/platforms/android/widgets-release.aar
#	packages/core/ui/core/view/index.android.ts
#	packages/core/ui/core/view/index.d.ts
#	packages/core/ui/core/view/view-common.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs needed Additional documentation on this issue/PR is needed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants