[TIMOB-26246] Android: Added Ti.UI.Window "extendSafeArea", "safeAreaPadding", and inset/notch support #10383

jquick-axway · 2018-10-18T02:47:49Z

JIRA:

Summary:

TIMOB-26246 Added handling of Android P insets/notches/cutouts.
- Added Ti.UI.Window property "extendSafeArea" to render content beneath insets.
- Unlike iOS, this property is false by default on Android. This is because insets can be of any size and on side, making it more problematic.
TIMOB-26427 Added new Ti.UI.Window property "safeAreaPadding".
- Applies to Android 4.4 and newer OS versions when "extendSafeArea" is true.
- Needed to detect size of insets for translucent StatusBar/NavBar and Android P notches.
- Padding will be all zeros if "extendSafeArea" is false.
TIMOB-26459 Added Android 4.4 constants for Ti.UI.Window property "windowFlags":
- Ti.UI.Android.FLAG_TRANSLUCENT_NAVIGATION
- Ti.UI.Android.FLAG_TRANSLUCENT_STATUS
TIMOB-25810 Fixed bug where ActionBar height won't resize upon orientation changes.
TIMOB-26460 Fixed bug where Toolbar height set to Ti.UI.SIZE won't resize upon orientation change.
TIMOB-26442 Fixed bug where Toolbar with "extendBackground" to true is too tall if both status bar and nav bar are translucent.
Modified DrawerLayout XML to not fit its "center" view under top insets:
- The XML setting was wrong. It was intended to place left/right drawers under top inset, but it was only doing it main center view instead.
- Better solution is to allow left/center/right layouts to overlap insets (like gmail app) and use a Toolbar with "extendBackground" true to position itself beneath top inset.

Test Prerequisite:
You must obtain an Android P device with a notch before doing the below tests.
If the device doesn't have a notch, then you can simulate it as follows:

Go to the Android P device's "Settings" screen.
Tap on "Systems" from the list.
Tap on "Advanced".
Tap on "Developer Options".
Tap on "Simulate a display with cutouts" to display a dialog.
Select "Double display cutout". (Will simulate notch on top and bottom.)

Toolbar Test:

Build and run test code attached to TIMOB-26442 on Android 4.4 or higher.
Verify that there is no extra padding below the Toolbar. (See TIMOB-26442 screenshots.)
Rotate the device to landscape.
Verify that the Toolbar height and font size shrinks. (This tests TIMOB-26460.)
Continue holding the device in landscape and back out of the app.
Relaunch the app in landscape.
Rotate the device to portrait.
Verify that the Toolbar height and font size increase in portrait.

ActionBar Test:

Create a default ClassicApp test project.
Hold an Android device in portrait form.
Build and run the app on that Android device.
Rotate the device to landscape.
Verify that the titlebar height and font size shrinks. (This tests [TIMOB-25810].)
Continue holding the device in landscape and back out of the app.
Relaunch the app in landscape.
Rotate the device to portrait.
Verify that the titlebar height and font size increases in size.

Translucent StatusBar and NavBar Test:

Build and run the code attached to TIMOB-26459 on Android 4.4 or higher.
Verify that screen looks like what's shown in that ticket. App window with green border should fill the screen and top status bar and bottom nav bar should be overlaid on top.

Note that Android 4.4 will show an opaque navigation bar when displayed landscape. This is a limitation on Google's end.

Extend Safe-Area Window Test:

Build and run ExtendSafeAreaContainerTest.js attached to TIMOB-26427.
Hold the device portrait.
Verify that a green rectangle with a blue border is between all insets/notches. (See: image)
Rotate device to landscape where navigation bar is on the right side.
Verify that the green rectangle is still between the insets. (See: image)
Rotate device to the other landscape orientation without rotating to portrait. (Do a barrel roll!)
Verify that the green rectangle is still between the insets. (See: image)

Extend Safe-Area ScrollView Test:

Build and run ExtendSafeAreaScrollViewTest.js attached to TIMOB-26427.
Hold the device in portrait.
Scroll to the very top, if not already.
Verify that top-most view is not overlapped by the top status bar as seen here.
Scroll to the very bottom.
Very bottom-most view is not overlapped by the bottom navigation bar as seen here.
Rotate to landscape where navigation bar is on the right side of the screen.
Scroll to the very top while landscape.
Verify that all rows are not overlapped by insets on the top/left/right sides as seen here.
Rotate device to the other landscape orientation without going to portrait. (Do a barrel roll!)
Scroll to the very top.
Verify that all rows are not overlapped by insets on the top/left/right sides as seen here.
Scroll to the very bottom while landscape.
Verify that "Row 20" is shown without overlap at the bottom. Only top-most rows are overlapped by the top status bar as seen here.

Extend Safe-Area TabGroup Test:

Build and run ExtendSafeAreaTabsTest.js attached to TIMOB-26427.
Hold the device in portrait form and tap "Tab 1".
Verify that a green rectangle is displayed between the top tab bar and the bottom translucent navigation bar without overlap... and a red background fills the translucent areas as seen here.
Tap "Tab 2" while portrait.
Verify Tab 2 display a green rectangle between the top tab bar and bottom navigation bar too... and an orange background fills the rest of the translucent area as shown here.
Rotate device to landscape where navigation bar is on the right side.
Tap "Tab 1" while landscape.
Verify green rectangle is between all insets and the top tab bar as seen here.
Rotate device to the other landscape without going to portrait. (Do a barrel roll!)
Verify green rectangle is between all insets and the top tab bar as seen here.
Tap "Tab 2" and verify green rectangle is between all insets and top tab bar.

Extend Safe-Area DrawerLayout Test:

Build and run ExtendSafeAreaDrawerTest.js attached to TIMOB-26427.
Hold the device portrait.
Verify that the top toolbar's title is below the status bar, but the toolbar's red background extends under the top status bar as seen here.
Tap the hamburger button in the top-left corner to open the drawer.
Verify that the drawer's top blue toolbar's title is below the status bar, but the blue toolbar's background is extended under the status bar as seen here.
Rotate device to landscape.
Verify title is still below top status bar and shifted to the right if there is an Android P notch on the left side as seen here.
Press the back button to close the drawer.
Verify that main window's top red toolbar title is still below the status bar and shifted to the right if there is an Android P notch on the left side of the screen as seen here.

…Padding", and inset/notch support - [TIMOB-26246] Added handling of Android P inset/notch/cutout. * Added Ti.UI.Window property "extendSafeArea" to render content beneath insets. - [TIMOB-26427] Added Ti.UI.Window property "safeAreaPadding". * Applies to Android 4.4 and newer OS versions when "extendSafeArea" is true. * Needed to detect size of insets for translucent StatusBar/NavBar and Android P notches. - [TIMOB-26459] Added constants for Ti.UI.Window property "windowFlags". * Ti.UI.Android.FLAG_TRANSLUCENT_NAVIGATION * Ti.UI.Android.FLAG_TRANSLUCENT_STATUS - [TIMOB-25810] Fixed bug where ActionBar height won't resize upon orientation changes. - [TIMOB-26460] Fixed bug where Toolbar height set to Ti.UI.SIZE won't resize upon orientation change. - [TIMOB-26442] Fixed bug where Toolbar with "extendBackground" to true is too tall if both status bar and nav bar are translucent. - Modified DrawerLayout XML to not fit its "center" view under top insets. * The XML setting was wrong. It was intended to place left/right drawers under top inset, but it wasn't doing that. * Better solution is to allow left/center/right layouts to overlap insets and use a Toolbar with "extendBackground" true to position itself beneath inset.

ypbnv · 2018-10-18T13:12:36Z

android/titanium/src/java/org/appcelerator/titanium/proxy/TiWindowProxy.java

@@ -39,6 +41,9 @@
 import android.util.Pair;
 import android.view.Display;
 import android.view.View;
+import android.view.ViewParent;
+import android.view.Window;


Unused import.

ypbnv · 2018-10-18T13:12:54Z

android/titanium/src/java/org/appcelerator/titanium/view/TiActionBarStyleHandler.java

+	}
+
+	/**
+	 * To be called by the owner when the activity's overriden onConfigurationChanged() method has been called.


Typo in "overridden".

ypbnv · 2018-10-18T13:13:02Z

android/titanium/src/java/org/appcelerator/titanium/view/TiActionBarStyleHandler.java

+	/**
+	 * To be called by the owner when the activity's overriden onConfigurationChanged() method has been called.
+	 * Updates the ActionBar's height and font size base on the given configuration.
+	 * @param newConfig The udpated configuration applied to the activity.


Typo in "updated".

ypbnv · 2018-10-18T13:14:35Z

android/titanium/src/java/org/appcelerator/titanium/view/TiActionBarStyleHandler.java

+				toolbarStyleHandler = new TiToolbarStyleHandler((Toolbar) view);
+			}
+		} catch (Exception ex) {
+		}


Maybe logging a warning or a debug level message here ? To make it easier for troubleshooting at some point if a problem comes from failing this try block. ( I am not a fan of empty catch blocks )

I agree. Done.

ypbnv · 2018-10-18T13:14:59Z

android/titanium/src/java/org/appcelerator/titanium/view/TiActivitySafeAreaMonitor.java

+
+		// Calculate the safe-area, which is the region between the insets.
+		// Note: We must dynamically add ActionBar height here (if enabled) since its
+		//       visbility and height changes can only be detected via an onLayoutChange() event.


Typo in "visibility".

ypbnv · 2018-10-18T13:15:14Z

android/titanium/src/java/org/appcelerator/titanium/view/TiToolbarStyleHandler.java

+	}
+
+	/**
+	 * To be called by the owner when the activity/view's overriden onConfigurationChanged() method has been called.


Typo in "overridden".

ypbnv · 2018-10-18T13:15:20Z

android/titanium/src/java/org/appcelerator/titanium/view/TiToolbarStyleHandler.java

+	/**
+	 * To be called by the owner when the activity/view's overriden onConfigurationChanged() method has been called.
+	 * Updates the toolbar's height and font size base on the given configuration.
+	 * @param newConfig The udpated configuration applied to the activity/view.


Typo in "updated".

ypbnv · 2018-10-18T13:15:24Z

android/titanium/src/java/org/appcelerator/titanium/view/TiToolbarStyleHandler.java

+	 * Updates the toolbar's height and font size base on the given configuration.
+	 * @param newConfig The udpated configuration applied to the activity/view.
+	 */
+	public void onConfigurationChanged(Configuration newConfig)


The newConfig parameter seems to not be used in the method. It is used when the method is called from:
https://github.com/appcelerator/titanium_mobile/pull/10383/files#diff-9ea98253bfde40055a91a9df7a25cb33R52
and
https://github.com/appcelerator/titanium_mobile/pull/10383/files#diff-9ce4241f5edf3cb3a0918ec183f9f59bR83
Maybe the former one may allow us to remove the parameter from the definition in TiActionBarStyleHandler too?

I made it this way to make it clear that this method should be called when the Activity/View object's onConfigurationChanged() method has been called. That's also partly why I decided to name the class a "handler" because it's like an event handler.

Also, I was originally thinking about optimizing this by only updating the ActionBar/Toolbar when the given configuration object indicated that the orientation changed. But onConfigurationChanged() is actually rarely called. So, I didn't think it was worth it.

Are you getting a compiler warning? I may need to add a @SuppressWarnings("unused").

I just saw it was unused. I am OK to leave it as is, matching the declaration makes sense for it being more clear what is happening.

ypbnv

Awesome PR! Besides a few minor things I have commented on it looks good!

jquick-axway · 2018-10-18T23:22:54Z

Thanks for the review @ypbnv . :)

I suspect the following may not work with your refactored TabGroup changes. This is where I'm fetching the container view in the TabGroup which hosts the fragments. I need this to add additional padding to the returned by our new safeAreaPadding property. I can't use the fragment's current position in the ViewPager because unselected tabs are actually placed offscreen. I need to use the container's rectangle instead. I suspect I'll need a follow-up PR if that's the case.
https://github.com/appcelerator/titanium_mobile/pull/10383/files#diff-0b6ca69ce950b64a6498bbeba8edf89dR475

…tend their background - Fixed issue where if multiple toolbars had "extendBackground" true, it would only apply to 1st one. * Had to override default behavior to prevent insets from being consumed. - Fixed regression where toolbar "extendBackground" true would no longer work unless window "extendSafeArea" was also true. * Caused by root Titanium view calling setFitsSystemWindows(true) on startup, instead of default false setting.

jquick-axway · 2018-10-23T02:27:48Z

Updated PR:

Fixed regression caused by this PR where toolbar "extendBackground" set to true would be ignored if window's "extendSafeArea" was also not set to true.
- Caused by root Titanium view now calling setFitsSystemWindows(true) by default now.
- The TiToolbar code was modified to call root view's setFitsSystemWindows(false) now, making it backward compatible.
Fixed issue where if multiple toolbars set "extendBackground" to true, it would only be applied to the 1st toolbar.
- Had to modify Google's default behavior to prevent insets from being consumed by toolbars in this case. Allows insets to be propagated to other view.
- This is needed by apps which use a DrawerLayout and want to use a toolbar for the main window and in the drawer panel.
Modified Toolbar to support "extendBackground" on Android 4.4.
- Was only supported on Android 5.0 and above.
- Needed since this PR supports translucent status bars on 4.4.

ewanharris · 2018-10-23T12:47:46Z

apidoc/Titanium/UI/Window.yml

    type: Boolean
-    default: true
-    since: 6.3.0
+    default: `true` on iOS. `false` on Android.


This is causing the docgen validation to error out as it's a string (which fails the parsing of Window.yml, throwing all the other parse errors)
It's super easy to allow the validation script to allow us to set {android: false, ios: true} here, but I have no idea how this then plays into the generation of the various templates (html, jdsuck, typescript etc.). @jawa9000 do you know how I can check the output?

Thanks. I'll give it a go.

longton95

FR Passed

Verified using the test cases above, extendSafeArea and safeAreaPadding work as expected with the notch supports

ENV

Pixel 2 XL (9.0)
Emulator (9.0, 6.0, 4.4.2)
Appc NPM: 4.2.13
Appc CLI: 7.0.7-9
Ti CLI: 5.1.1
Node: 8.12.0
NPM: 6.4.1

build · 2018-10-25T15:01:23Z

	Messages
📖	💾 Here's the generated SDK zipfile.

Generated by 🚫 dangerJS

jquick-axway added 2 commits October 17, 2018 19:09

Merge branch 'master' into TIMOB-26246

1926dad

jquick-axway added android feature bug docs parity 👯‍♀️ labels Oct 18, 2018

jquick-axway added this to the 7.5.0 milestone Oct 18, 2018

jquick-axway requested review from garymathews and ypbnv October 18, 2018 02:47

Android: Updated code formatting for [TIMOB-26246]

bb0950f

ypbnv reviewed Oct 18, 2018

View reviewed changes

ypbnv approved these changes Oct 18, 2018

View reviewed changes

Android: Updated [TIMOB-26246] based on feedback

d06f9f0

Merge branch 'master' into TIMOB-26246

29e76e4

ewanharris reviewed Oct 23, 2018

View reviewed changes

jquick-axway and others added 3 commits October 23, 2018 11:01

Fixed API doc parse error caused by [TIMOB-26246]

d9d7dde

Merge branch 'master' into TIMOB-26246

55370a0

Merge branch 'master' into TIMOB-26246

15160bf

longton95 self-requested a review October 25, 2018 13:59

longton95 approved these changes Oct 25, 2018

View reviewed changes

longton95 merged commit f45bb2c into tidev:master Oct 25, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TIMOB-26246] Android: Added Ti.UI.Window "extendSafeArea", "safeAreaPadding", and inset/notch support #10383

[TIMOB-26246] Android: Added Ti.UI.Window "extendSafeArea", "safeAreaPadding", and inset/notch support #10383

jquick-axway commented Oct 18, 2018 •

edited

ypbnv Oct 18, 2018

ypbnv Oct 18, 2018

ypbnv Oct 18, 2018

ypbnv Oct 18, 2018

jquick-axway Oct 18, 2018

ypbnv Oct 18, 2018

ypbnv Oct 18, 2018

ypbnv Oct 18, 2018

ypbnv Oct 18, 2018

jquick-axway Oct 18, 2018

ypbnv Oct 19, 2018

ypbnv left a comment

jquick-axway commented Oct 18, 2018

jquick-axway commented Oct 23, 2018 •

edited

ewanharris Oct 23, 2018

jquick-axway Oct 23, 2018

longton95 left a comment

build commented Oct 25, 2018 •

edited

[TIMOB-26246] Android: Added Ti.UI.Window "extendSafeArea", "safeAreaPadding", and inset/notch support #10383

[TIMOB-26246] Android: Added Ti.UI.Window "extendSafeArea", "safeAreaPadding", and inset/notch support #10383

Conversation

jquick-axway commented Oct 18, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ypbnv left a comment

Choose a reason for hiding this comment

jquick-axway commented Oct 18, 2018

jquick-axway commented Oct 23, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

longton95 left a comment

Choose a reason for hiding this comment

build commented Oct 25, 2018 • edited

jquick-axway commented Oct 18, 2018 •

edited

jquick-axway commented Oct 23, 2018 •

edited

build commented Oct 25, 2018 •

edited