Skip to content

Commit 5cf4a5d

Browse files
NathanWalkerNathanWalker
committed
feat: android edge to edge
1 parent f1d1363 commit 5cf4a5d

File tree

2 files changed

+157
-0
lines changed

2 files changed

+157
-0
lines changed

‎content/core/utils.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -545,6 +545,59 @@ Utils.android.getApplicationContext()
545545

546546
---
547547

548+
### enableEdgeToEdge()
549+
550+
```ts
551+
function enableEdgeToEdge(
552+
activity: androidx.appcompat.app.AppCompatActivity,
553+
options?: {
554+
statusBarLightColor?: Color
555+
statusBarDarkColor?: Color
556+
navigationBarLightColor?: Color
557+
navigationBarDarkColor?: Color
558+
handleDarkMode?: (
559+
bar: 'status' | 'navigation',
560+
resources: android.content.res.Resources,
561+
) => boolean
562+
},
563+
): void
564+
```
565+
566+
Enables full edge-to-edge rendering on Android and lets you customize system UI overlay colors and behavior.
567+
568+
- `activity` The current `AppCompatActivity` instance.
569+
- _Optional_ `options` may include:
570+
- `statusBarLightColor` Color to use for light appearance of the status bar (icons dark on light background).
571+
- `statusBarDarkColor` Color to use for dark appearance of the status bar (icons light on dark background).
572+
- `navigationBarLightColor` Color to use for light appearance of the navigation bar.
573+
- `navigationBarDarkColor` Color to use for dark appearance of the navigation bar.
574+
- `handleDarkMode` Decide whether light or dark system UI should be used for the given bar based on your own logic. Return `true` to use light appearance, `false` for dark.
575+
576+
Notes:
577+
- Works together with Page `androidOverflowEdge` and `androidOverflowInset` to control inset application/consumption.
578+
- When insets are applied, they are added to the view's padding.
579+
580+
Example:
581+
582+
```ts
583+
import { Application, Utils, Color } from '@nativescript/core'
584+
585+
const activity = Utils.android.getCurrentActivity()
586+
587+
Utils.android.enableEdgeToEdge(activity, {
588+
statusBarLightColor: new Color('#FFFFFF'),
589+
statusBarDarkColor: new Color('#000000'),
590+
navigationBarLightColor: new Color('#FFFFFF'),
591+
navigationBarDarkColor: new Color('#000000'),
592+
handleDarkMode: (bar, resources) => {
593+
// Decide per your theme; return true for light appearance
594+
return true
595+
},
596+
})
597+
```
598+
599+
---
600+
548601
### getInputMethodManager()
549602

550603
```ts

‎content/ui/page.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,44 @@ Gets or sets the color of the status bar on Android devices. **Android only.**
267267

268268
See [Color](/api/class/Color).
269269

270+
### androidOverflowEdge
271+
272+
```ts
273+
androidOverflowEdge:
274+
| 'none'
275+
| 'left'
276+
| 'top'
277+
| 'right'
278+
| 'bottom'
279+
| 'dont-apply'
280+
| 'left-dont-consume'
281+
| 'top-dont-consume'
282+
| 'right-dont-consume'
283+
| 'bottom-dont-consume'
284+
| 'all-but-left'
285+
| 'all-but-top'
286+
| 'all-but-right'
287+
| 'all-but-bottom'
288+
```
289+
290+
Controls how Android system insets (status bar, navigation bar, cutouts) are applied and/or consumed by the Page. When insets are applied, they are added to the Page's padding. Insets propagate down the view hierarchy until consumed. Defaults to `'dont-apply'` for Pages. **Android only.**
291+
292+
Options:
293+
294+
| Value | Behavior |
295+
|---|---|
296+
| `none` | Apply and consume all inset edges |
297+
| `left` / `top` / `right` / `bottom` | Apply and consume only the specified edge |
298+
| `dont-apply` | Do not apply or consume any insets — triggers `androidOverflowInset` |
299+
| `left-dont-consume` | Apply the left inset but do not consume it; all other insets are ignored |
300+
| `top-dont-consume` | Apply the top inset but do not consume it; all other insets are ignored |
301+
| `right-dont-consume` | Apply the right inset but do not consume it; all other insets are ignored |
302+
| `bottom-dont-consume` | Apply the bottom inset but do not consume it; all other insets are ignored |
303+
| `all-but-left` | Apply and consume all insets except left |
304+
| `all-but-top` | Apply and consume all insets except top |
305+
| `all-but-right` | Apply and consume all insets except right |
306+
| `all-but-bottom` | Apply and consume all insets except bottom |
307+
270308
### enableSwipeBackNavigation
271309

272310
```ts
@@ -346,6 +384,72 @@ on('navigatedFrom', (args: NavigatedData) => {
346384

347385
Emitted after the app has navigated away from the current page.
348386

387+
### androidOverflowInset
388+
389+
```ts
390+
on('androidOverflowInset', (args) => {
391+
// args.inset: { top, bottom, left, right, topConsumed?, bottomConsumed?, leftConsumed?, rightConsumed? }
392+
})
393+
```
394+
395+
Emitted when `androidOverflowEdge` is set to `'dont-apply'`, allowing manual handling of system insets. You can inspect and modify inset values and explicitly consume individual sides by setting the corresponding `*Consumed` flags. **Android only.**
396+
397+
Example:
398+
399+
```ts
400+
page.on('androidOverflowInset', (args) => {
401+
// Modify inset values if needed
402+
args.inset.top += 10
403+
args.inset.bottom += 10
404+
args.inset.left += 10
405+
args.inset.right += 10
406+
407+
// Explicitly consume each side
408+
args.inset.topConsumed = true
409+
args.inset.bottomConsumed = true
410+
args.inset.leftConsumed = true
411+
args.inset.rightConsumed = true
412+
})
413+
```
414+
415+
## Android: Edge-to-Edge tip
416+
417+
::: tip Edge-to-Edge on Android
418+
You can opt into full edge-to-edge and precisely control how system insets are handled on a per-Page basis.
419+
420+
- Set `androidOverflowEdge` to choose which inset edges to apply and/or consume. Pages default to `'dont-apply'`.
421+
- When using `'dont-apply'`, handle `androidOverflowInset` to adjust and explicitly consume sides.
422+
- Call `Utils.android.enableEdgeToEdge(...)` to enable edge-to-edge and configure light/dark system UI overlays.
423+
424+
Example:
425+
426+
```ts
427+
import { Utils } from '@nativescript/core'
428+
429+
// Let the page handle insets manually
430+
page.androidOverflowEdge = 'dont-apply'
431+
432+
// Enable edge-to-edge (Android) with light/dark colors
433+
import { Application, Color } from '@nativescript/core'
434+
const activity =
435+
Application.android.foregroundActivity || Application.android.startActivity
436+
Utils.android.enableEdgeToEdge(activity, {
437+
statusBarLightColor: new Color('#FFFFFF'),
438+
statusBarDarkColor: new Color('#000000'),
439+
})
440+
441+
// Optionally handle and consume insets yourself
442+
page.on('androidOverflowInset', (args) => {
443+
args.inset.top += 8
444+
args.inset.bottom += 8
445+
args.inset.topConsumed = true
446+
args.inset.bottomConsumed = true
447+
})
448+
```
449+
450+
See also: [enableEdgeToEdge](/core/utils#enableedgetoedge).
451+
:::
452+
349453
## Native component
350454

351455
- Android: [`org.nativescript.widgets.GridLayout`](https://github.com/NativeScript/NativeScript/blob/master/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/GridLayout.java)

0 commit comments

Comments
 (0)