Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26427] Android: Add "safeAreaPadding" property to Ti.UI.Window

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2018-10-25T14:05:27.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.5.0
ComponentsAndroid
Labelsandroid, safearea, window
ReporterJoshua Quick
AssigneeJoshua Quick
Created2018-10-02T01:55:53.000+0000
Updated2018-10-25T22:45:45.000+0000

Description

*Summary:* On Android, we'd like to add support for Window property "extendSafeArea" so that the window's root view can extend under the Android 9 notch or under an Android 4.4 translucent StatusBar/NavigationBar (see: [TIMOB-26246]). However, this feature is useless since these insets can be of various sizes and on any side of the screen. An app developer needs to know what region of the screen they can place content so that it won't be covered up by the device's insets. *Proposal:* Add read-only property "safeAreaPadding" to Ti.UI.Window. This property will return a Titanium [ViewPadding](https://docs.appcelerator.com/platform/latest/#!/api/ViewPadding) dictionary providing the left, top, right, and bottom padding needed to show content safely within the window without overlap. If there are no insets or if "extendSafeArea" is set false, then this property is expected to return all zeros for the padding. The idea is that the app developer will then be able to set up their own safe area view and use it as a container as shown below.
var FLAG_TRANSLUCENT_NAVIGATION = 134217728;
var FLAG_TRANSLUCENT_STATUS = 67108864;
var window = Ti.UI.createWindow({
	extendSafeArea: true,
	theme: "Theme.AppCompat.NoTitleBar",
	windowFlags: FLAG_TRANSLUCENT_STATUS | FLAG_TRANSLUCENT_NAVIGATION,
});
var safeAreaView = Ti.UI.createView({
	backgroundColor: "green",
	borderWidth: "4dp",
	borderColor: "blue",
});
window.add(safeAreaView);
window.addEventListener("postlayout", function() {
	// Padding's left/top/right/bottom can be used as pin positions for the view.
	safeAreaView.applyProperties(window.safeAreaPadding);
});
window.open();
*Note:* We should do the same on iOS to handle the following: * iPhone X top notch and bottom home indicator. * Translucent status bar on all other iOS devices. (Safe area should be beneath status bar.) *Safe-Area Container Example:* Test code [^ExtendSafeAreaContainerTest.js] shows how to create a safe-area view container for other child views, guaranteed to always make child content tappable without overlap. The green rectangle with the blue border is the safe-area view within the root white window using an orange border. !ExtendSafeAreaContainerPortrait.jpeg|thumbnail! !ExtendSafeAreaContainerLandscapeLeft.jpeg|thumbnail! !ExtendSafeAreaContainerLandscapeRight.jpeg|thumbnail! *Safe-Area ScrollView Example:* Test code [^ExtendSafeAreaScrollViewTest.js] shows how to pad a ScrollView. It allows its contents to scroll beneath a translucent status bar and navigation bar, but pads the top and bottom so that the top-most view and bottom-most view can be scrolled within the safe-area, making them tappable. !ExtendSafeAreaScrollPortraitTop.jpeg|thumbnail! !ExtendSafeAreaScrollPortraitBottom.jpeg|thumbnail! !ExtendSafeAreaScrollLandscapeRightTop.jpeg|thumbnail! !ExtendSafeAreaScrollLandscapeLeftBottom.jpeg|thumbnail! !ExtendSafeAreaScrollLandscapeLeftTop.jpeg|thumbnail! *Safe-Area TabGroup Example:* Test code [^ExtendSafeAreaTabsTest.js] shows how to extend tabs to beneath the notches, translucent status bar, and translucent navigation bar. You would *not* normally use a translucent top status bar with an opaque top tab bar, but this is for testing purposes. Note that the top tab bar hovers over the content and each individual tab completely fills the window. The safe-area padding reported lies within the TabGroup container where content is normally displayed when "extendSafeArea" is set to false. !ExtendSafeAreaTab1Portrait.jpeg|thumbnail! !ExtendSafeAreaTab2Portrait.jpeg|thumbnail! !ExtendSafeAreaTabTransitionPortrait.jpeg|thumbnail! !ExtendSafeAreaTab1LandscapeRight.jpeg|thumbnail! !ExtendSafeAreaTab1LandscapeLeft.jpeg|thumbnail! *Safe-Area DrawerLayout Example:* Test code [^ExtendSafeAreaDrawerTest.js] shows that a Ti.UI.Toolbar with "extendBackground" to true will automatically handle the safe-area when docked to the top of the screen. The toolbar will extend into the unsafe area of the screen inset while leaving its text and button content within the safe-area. This test code uses a toolbar in the root view and in a drawer side panel. !ExtendSafeAreaDrawerMainPortrait.jpg|thumbnail! !ExtendSafeAreaDrawerMainLandscape.jpg|thumbnail! !ExtendSafeAreaDrawerPanelPortrait.jpg|thumbnail! !ExtendSafeAreaDrawerPanelLandscape.jpg|thumbnail!

Attachments

FileDateSize
ExtendSafeAreaContainerLandscapeLeft.jpeg2018-10-22T23:02:44.000+0000602568
ExtendSafeAreaContainerLandscapeRight.jpeg2018-10-22T23:02:43.000+0000443116
ExtendSafeAreaContainerPortrait.jpeg2018-10-22T23:02:43.000+0000462364
ExtendSafeAreaContainerTest.js2018-10-22T22:57:43.000+0000842
ExtendSafeAreaDrawerMainLandscape.jpg2018-10-22T22:38:21.000+0000426379
ExtendSafeAreaDrawerMainPortrait.jpg2018-10-22T22:38:21.000+0000473671
ExtendSafeAreaDrawerPanelLandscape.jpg2018-10-22T22:38:21.000+0000581942
ExtendSafeAreaDrawerPanelPortrait.jpg2018-10-22T22:38:21.000+0000528083
ExtendSafeAreaDrawerTest.js2018-10-22T22:34:44.000+00002981
ExtendSafeAreaScrollLandscapeLeftBottom.jpeg2018-10-22T22:48:11.000+0000380421
ExtendSafeAreaScrollLandscapeLeftTop.jpeg2018-10-22T22:48:11.000+0000411288
ExtendSafeAreaScrollLandscapeRightTop.jpeg2018-10-22T22:48:11.000+0000429002
ExtendSafeAreaScrollPortraitBottom.jpeg2018-10-22T22:50:40.000+0000444875
ExtendSafeAreaScrollPortraitTop.jpeg2018-10-22T22:50:22.000+0000418895
ExtendSafeAreaScrollViewTest.js2018-10-22T22:48:06.000+00001801
ExtendSafeAreaTab1LandscapeLeft.jpeg2018-10-22T23:39:10.000+0000443817
ExtendSafeAreaTab1LandscapeRight.jpeg2018-10-22T23:39:10.000+0000380636
ExtendSafeAreaTab1Portrait.jpeg2018-10-22T23:39:10.000+0000496940
ExtendSafeAreaTab2Portrait.jpeg2018-10-22T23:39:10.000+0000461524
ExtendSafeAreaTabsTest.js2018-10-22T23:17:18.000+00001955
ExtendSafeAreaTabTransitionPortrait.jpeg2018-10-22T23:39:10.000+0000443968

Comments

  1. Joshua Quick 2018-10-18

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/10383
  2. Josh Longton 2018-10-25

    *FR Passed* Waiting on Jenkins to merge
  3. Keerthi Mahalingam 2018-10-25

    Verified the fix on SDK 7.5.0.v20181025085349. Closing.
       Operating System
         Name                        = Mac OS X
         Version                     = 10.13.6
         Architecture                = 64bit
       Node.js
         Node.js Version             = 8.12.0
         npm Version                 = 6.4.1
       Titanium CLI
         CLI Version                 = 5.1.1
       Studio			      =5.1.2.201810080801
       Titanium SDK
         SDK Version                 = 7.5.0.v20181025085349
       Device                        = Samsung s5 Android 6,pixel android 9 
       Emulator		     = Samsung galaxy s6 android 6,nexus 4.4
       

JSON Source