[TIMOB-26427] Android: Add "safeAreaPadding" property to Ti.UI.Window
GitHub Issue | n/a |
---|---|
Type | New Feature |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2018-10-25T14:05:27.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 7.5.0 |
Components | Android |
Labels | android, safearea, window |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2018-10-02T01:55:53.000+0000 |
Updated | 2018-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!
PR (master): https://github.com/appcelerator/titanium_mobile/pull/10383
*FR Passed* Waiting on Jenkins to merge
Verified the fix on SDK 7.5.0.v20181025085349. Closing.