Android Fullbleed IAMs #1481

emawby · 2021-11-08T22:00:50Z

Description

One Line Summary

Added support for fullbleed in app messages to the Android SDK.

Details

Fullscreen and Carousel In App Messages that do not have margins will now bleed under the status bar to be completely full screen.
The dashboard has added the ability for fullscreen and Carousel IAMs to be created without margins. When doing so it sets remove_height_margin and remove_width_margin to true in styles (this was already being read by the SDK). Currently we don't support only width or height removal so I am consolidating these flags into an isFullscreen boolean that controls the fullbleed behavior.

In order to handle notched devices we need to tell the Javascript about the device insets so that IAM content doesn't overlap with notches and the status bar. To do this we are modifying the IAMs HTML and calling setSafeAreaInsets with a javascript object of the form

{
top: ,
bottom: ,
right: ,
left: ,
}

Version specific notes

Fullbleed is accomplished in two different ways. For API < 30 we use

webView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                   View.SYSTEM_UI_FLAG_IMMERSIVE |
                   View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);

For API >=30 we use
webView.setFitsSystemWindows(false);

Additionally landscape mode behaves differently in API 29 than all other versions. In API 29 the IAM will bleed under notches whereas in all other versions the IAM will not bleed under. This means we only account for left+right notch insets for API 29.

Orientation Change

We also need to call the setSafeAreaInsets() method again if the device is rotated since the side of the notches have changed. To do so we are now responding to the resize javascript event (previously unused).

Misc Changes

In order for the IAM to bleed under the status bar we needed to change the popupWindow's display type to PANEL. If the IAM is not fullbleed we will still use attachedDialog. Additionally we must set clippingEnabled to false.

Motivation

Customer request for full screen IAMs.

Background Context

When we initially discussed removing margins from IAMs we discussed the future ability to remove just width or height margins so we split them into their own booleans. We eventually decided against that approach and to just focus on fullbleed IAMs.

Scope

This change involves coordinating new behavior between the SDK and IAM Javascript. It makes no new API calls and provides no new public APIs in the SDK. This change should not affect non fullscreen/carousel IAMs.

Testing

Unit testing

✅ All tests pass after the below modifications
We don't have infrastructure for testing visual properties of IAMs currently or good ways to test a messages HTML content.

Manual testing

✅ Tested on various Android emulators and phsyical devices for Android API versions 27-31 with and without notches. Test both carousels and fullscreen IAMs. Tested both landscape and portrait.

Affected code checklist

Checklist

Overview

I have filled out all REQUIRED sections above
PR does one thing
Any Public API changes are explained in the PR details and conform to existing APIs

Testing

I have included test coverage for these changes, or explained why they are not needed
All automated tests pass, or I explained why that is not possible
I have personally tested this on my device, or explained why that is not possible

Final pass

Code is as readable as possible.
I have reviewed this PR myself, ensuring it meets each checklist item

This change is

No Margin IAMs now are full screen covering the status bar. This commit does not yet adjust the IAM content to account for this

Note that this doesn't override the App's display cutout window settings meaning that if the App doesn't support content bleeding under the cutout then the IAM will not go under the cutout.

also testing fullscreen windowManager flags in the demo app

Just a snapshot of it working, don't desinged to be merged. Will create another branch to follow up with a commit of only then changes needed.

Other cleanup as well

jkasten2

Reviewed 2 of 7 files at r1, 9 of 9 files at r3, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @emawby, @Jeasmine, and @nan-li)

OneSignalSDK/onesignal/src/main/java/com/onesignal/InAppMessageView.java, line 411 at r3 (raw file):

        cardView.setClipToPadding(false);
        cardView.setPreventCornerOverlap(false);
        cardView.setCardBackgroundColor(Color.TRANSPARENT);

This change was already done in PR #1482

OneSignalSDK/onesignal/src/main/java/com/onesignal/WebViewManager.java, line 242 at r3 (raw file):

        private void handleResize() {
            if (messageContent.isFullBleed()) {
                updateSafeAreaInsets();

Why is this dependent on a JS resize event? Shouldn't we set this as soon as possible after the JS is ready to receive it?

emawby

Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @emawby, @Jeasmine, @jkasten2, and @nan-li)

OneSignalSDK/onesignal/src/main/java/com/onesignal/WebViewManager.java, line 242 at r3 (raw file):

Previously, jkasten2 (Josh Kasten) wrote…

Why is this dependent on a JS resize event? Shouldn't we set this as soon as possible after the JS is ready to receive it?

This for adjusting the insets when the device orientation changes or something else causes the window to resize. The initial insets are already set in the HTML.

Are you thinking there is a better place to update the insets on orientation change?

webView.evaluateJavascript methods should be run on the main thread

emawby

Reviewable status: 10 of 11 files reviewed, 2 unresolved discussions (waiting on @Jeasmine, @jkasten2, and @nan-li)

OneSignalSDK/onesignal/src/main/java/com/onesignal/InAppMessageView.java, line 411 at r3 (raw file):

Previously, jkasten2 (Josh Kasten) wrote…

This change was already done in PR #1482

Done.

jkasten2

Reviewed 1 of 1 files at r4, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @emawby, @Jeasmine, and @nan-li)

OneSignalSDK/onesignal/src/main/java/com/onesignal/WebViewManager.java, line 242 at r3 (raw file):

Previously, emawby (Elliot Mawby) wrote…

This for adjusting the insets when the device orientation changes or something else causes the window to resize. The initial insets are already set in the HTML.

Are you thinking there is a better place to update the insets on orientation change?

Yes, thinking insets should be set when the IAM, Activity is resumed, or an orientation change.

emawby

Reviewable status: 10 of 11 files reviewed, 1 unresolved discussion (waiting on @Jeasmine, @jkasten2, and @nan-li)

OneSignalSDK/onesignal/src/main/java/com/onesignal/WebViewManager.java, line 242 at r3 (raw file):

Previously, jkasten2 (Josh Kasten) wrote…

Yes, thinking insets should be set when the IAM, Activity is resumed, or an orientation change.

Gotcha I removed it. I was already calling it calculateHeightAndShowWebViewAfterNewActivity which is called on orientation change and makes sense to call update insets here

jkasten2

Reviewed 1 of 1 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @Jeasmine and @nan-li)

OneSignalSDK/onesignal/src/main/java/com/onesignal/WebViewManager.java, line 242 at r3 (raw file):

Previously, emawby (Elliot Mawby) wrote…

Gotcha I removed it. I was already calling it calculateHeightAndShowWebViewAfterNewActivity which is called on orientation change and makes sense to call update insets here

👍

* Revert the focusable property of the PopupWindow that displays an IAM view to be false. This was added as part of fullbleed IAM implementation in #1481, but does not appear to be necessary. * This allows banner-style top and bottom IAMs to remain on the screen while the user interacts with the app. * Otherwise, currently, tapping on the background dismisses the banner-style IAM.

emawby force-pushed the feature/full_bleed_IAM_notch_working_snapshot branch 2 times, most recently from e24b912 to 580ffdd Compare November 9, 2021 20:59

emawby and others added 14 commits November 9, 2021 13:28

Make the IAM full screen

a134763

No Margin IAMs now are full screen covering the status bar. This commit does not yet adjust the IAM content to account for this

Setting safe area insets

81acdd9

Note that this doesn't override the App's display cutout window settings meaning that if the App doesn't support content bleeding under the cutout then the IAM will not go under the cutout.

moving safeareainset script to webviewmanager

75823e5

using updateSafeAreaInsets

4f3ec83

only update insets if the IAM is fullscreen

3015c9a

Updating SDK and demo app to use API 30

b8fc929

also testing fullscreen windowManager flags in the demo app

Fixing full bleed carousel width

2728bb8

snapshot of working IAM under notch

1fe3dc7

Just a snapshot of it working, don't desinged to be merged. Will create another branch to follow up with a commit of only then changes needed.

Revert example app changes

68589b3

cleaning up InAppMessageView

fa4753a

Fixing non-fullbleed IAMs by using type dialog instead of panel

9b6c06c

Other cleanup as well

Using immersize and hide navigation for fullbleed IAMs

fdc65b1

simplify logic for getCutoutandStatusBarInsets and use immersive mode

a926095

Fixing insets for non API 29 devices

71f558c

emawby force-pushed the feature/full_bleed_IAM_notch_working_snapshot branch from 580ffdd to 4d1001e Compare November 9, 2021 21:29

emawby changed the title ~~WiP Android Fullbleed IAMs~~ Android Fullbleed IAMs Nov 9, 2021

emawby requested review from jkasten2, nan-li and Jeasmine November 10, 2021 17:37

jkasten2 requested changes Nov 11, 2021

View reviewed changes

emawby commented Nov 12, 2021

View reviewed changes

emawby added 2 commits November 12, 2021 09:40

Renaming isFullscreen to isFullbleed to avoid confusion

f22dfe7

Running setSafeAreaInsets() on main thread

b53858c

webView.evaluateJavascript methods should be run on the main thread

emawby force-pushed the feature/full_bleed_IAM_notch_working_snapshot branch from 65f65d0 to b53858c Compare November 12, 2021 17:40

emawby commented Nov 12, 2021

View reviewed changes

emawby requested a review from jkasten2 November 12, 2021 17:41

jkasten2 requested changes Nov 12, 2021

View reviewed changes

removing handleResize

5b30875

emawby commented Nov 12, 2021

View reviewed changes

emawby requested a review from jkasten2 November 12, 2021 19:13

jkasten2 approved these changes Nov 12, 2021

View reviewed changes

emawby merged commit 1fcacef into main Nov 12, 2021

emawby deleted the feature/full_bleed_IAM_notch_working_snapshot branch November 12, 2021 19:50

nan-li mentioned this pull request Nov 13, 2021

Release commit 4.6.3 #1488

Merged

renovate bot mentioned this pull request Nov 13, 2021

Update dependency com.onesignal:OneSignal to v4.6.3 nuhkoca/Proje-Bulteni-Android-App#30

Merged

1 task

nan-li mentioned this pull request Feb 20, 2024

Keep banner-style IAMs on the screen while background is tapped #1999

Merged

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Android Fullbleed IAMs #1481

Android Fullbleed IAMs #1481

emawby commented Nov 8, 2021 •

edited

Loading

jkasten2 left a comment

emawby left a comment

emawby left a comment

jkasten2 left a comment

emawby left a comment

jkasten2 left a comment

Android Fullbleed IAMs #1481

Android Fullbleed IAMs #1481

Conversation

emawby commented Nov 8, 2021 • edited Loading

Description

One Line Summary

Details

Version specific notes

Orientation Change

Misc Changes

Motivation

Background Context

Scope

Testing

Unit testing

Manual testing

Affected code checklist

Checklist

Overview

Testing

Final pass

jkasten2 left a comment

Choose a reason for hiding this comment

emawby left a comment

Choose a reason for hiding this comment

emawby left a comment

Choose a reason for hiding this comment

jkasten2 left a comment

Choose a reason for hiding this comment

emawby left a comment

Choose a reason for hiding this comment

jkasten2 left a comment

Choose a reason for hiding this comment

emawby commented Nov 8, 2021 •

edited

Loading