Improve swiping through notifications behaviour

[ashiagr]

When swiping between the screens for e.g. swiping through notifications on the Notification tab, the foreground and the background screens are not distinguishable (See https://github.com/wordpress-mobile/WordPress-Android/pull/14906#pullrequestreview-690723314).

Giving such screens an elevation doesn't look great either (See https://github.com/wordpress-mobile/WordPress-Android/pull/14906#issuecomment-867333493).

The goal of this task to explore our options to further improve this swiping behavior.

[ssinha2103]

I would like to work on it.

[ashiagr]

Thanks for your interest in this issue!

I've assigned it to you. Let me know if you have any questions on this issue, Project Setup, or the Contributing Guide.

[ssinha2103]

Hii @ashiagr , can you please elaborate what is the issue, coz I am now using the app on emulator, and I cannot find any transition issues with the app. I mean, the swipe feels perfect. What is the exact change that you want ?

[ashiagr]

👋 @ssinha2103

Thank you for trying it out 👍.

the swipe feels perfect

The only issue is that the limit between the foreground and the background screens are not distinguishable on areas without content (see https://github.com/wordpress-mobile/WordPress-Android/pull/14906#pullrequestreview-690723314). I've highlighted it in the screenshot you shared.

One way is to add an elevation to the screens (see https://github.com/wordpress-mobile/WordPress-Android/pull/14906#issuecomment-867333493) but the common app bar doesn't look great with it. Can you try anything that can improve this transition?

[ssinha2103]

Hii @ashiagr , is it fine now ?

Hii @ashiagr , is it fine now ?

[ashiagr]

Looks better 👍. Can you create a PR? We can test and discuss it there.

[ssinha2103]

I created One , can you please check.

[ashiagr]

Thank you! I'll check it tomorrow.

[ssinha2103]

Hii @ashiagr Can you please check it and merge the PR.

[ashiagr]

We try not to add custom colors and instead reuse colors like colorSurface or colorOnSurface which are present in values/styles.xmland values-night/styles.xml. Let me know if you cannot utilize any of the existing colors.

[ssinha2103]

android:background="@color/quick_start_task_card_illustration_edit_site_icon_mountain_fill" Will it be fine @ashiagr ?

[ashiagr]

Can you try @color/placeholder? Add a screenshot for both light and dark mode. I'll get some design feedback.

[ssinha2103]

Is it fine ?

[ashiagr]

Thanks, @ssinha2103!

👋 @osullivanchris, pinging you for a little help. Can you advise us of the right color that we're trying to use here? Currently we've used view pager background as @color/placeholder (Light: #1A000000, Dark: #1AFFFFFF) in the screenshots above.

[ssinha2103]

Hii @ashiagr and @osullivanchris. currently I have modified notification_detail_activity.xml with android:background="@color/quick_start_task_card_illustration_edit_site_icon_mountain_stroke" Please guide further ? Working as shown in the screenshots above.

[ashiagr]

@ssinha2103, can you add screenshots for @color/placeholder as well, please? quick_start_task_card_illustration_edit_site_icon_mountain_stroke looks dark in the light mode.

[ssinha2103]

Sure, here are the screenshots for @color/placeholder as well @ashiagr and @osullivanchris

[osullivanchris]

Hi @ashiagr and @ssinha2103 ! Thanks for the ping and for the work on this!

I have a slightly different approach I'd like to suggest. Sorry to throw a curve ball in. Let me know what you think. If you don't agree, I can have a further look at the overlay colours/shadow behaviour.

Currently

• when you swiped to move between notifications, the current notification (A) is shown a level above the next notification (B) on the Z-axis.
• The next notification (B) is slightly reduced in size and opacity, but then animates to full size and opacity from behind the other one (A)
• The initial notification (A) moves horizontally out of the device frame.

Here's a sketch and a very rough video to try to clarify what I'm describing.

https://user-images.githubusercontent.com/50576199/131374146-93a0a1c2-36a3-4574-a500-f074bd584b3f.mp4

Issues

• in the current solution, because notification B is 'behind' and smaller than notification A, I think it implies that there is a hierarchical or child/parent relationship between these two.
• In fact, when I tried this interaction, I thought I was going up/back to the notification screen.

Proposal

• I think these notifications are actually at an equal level of hierarchy. They are in a list. But they don't have a parent/child relationship. They are siblings of equal level.
• Therefore I think it might work better if they all just moved horizontally, with no shrinking or transparency.
• Again here is a sketch and video to try to illustrate what I am suggesting
• If you agree, we could avoid the overlay issue entirely. The notifications would just swiped left/right on an infinite horizontal plane. It would be like they are all on one long sheet, and the device screen is a window framing one of them at at a time.

https://user-images.githubusercontent.com/50576199/131374650-2794b1b3-fccd-415a-b9e6-ae6c09fbe64f.mp4

Apologies if this is much more design input than you were looking for! But it struck me as a general possible improvement. Noting that we use the same system in My Site -> Comments. And there might be native/component conventions that conflict with what I'm saying, I'm open to feedback.

[ssinha2103]

@osullivanchris The issue you have mentioned is already resolved. I request you to build and try the app from my PR. Currently the notification seems to be at same level.

[ashiagr]

👋 @osullivanchris

Thank you so much for a detailed explanation of your thoughts on animation! 🙇‍♀️ I totally get your point. I see a slide animation similar to yours in the Gmail app when we horizontally swipe through emails and I agree it gives a better effect of screens being at the same level.

We'll try it out, and get back to you.

---

@ssinha2103

The issue you have mentioned is already resolved.

Not sure if you got the idea. Right now, the left screen goes deeper on the z-axis and it looks like it the right screen is sliding over it. They do not appear to be at the same level. Chris has included videos that demonstrate it very well, I'd suggest you carefully observe it.

It seems we can get the suggested sliding effect using a different PageTransformer (E.g. see screen slide in this Guide).

Can you give it a try? Let me know if it is still not clear.

[ssinha2103]

Hii @ashiagr , can u merge the pr, coz something is better than nothing, and I am working on the suggestion by @osullivanchris . Kindly merge the PR and enrich the UI experience until I finish .

[ashiagr]

👋 @ssinha2103!

Alright, I'll merge it and we can create a separate PR for the suggested animation. Thanks for working on it!

[thehenrybyrd]

@ashiagr looks like this issue was addressed in #15253 , and we'd wanted to work on an animation as well. Can we go ahead and close this issue? And, is there a new issue for the animation? Thanks!

[ashiagr]

Thanks for the ping @thehenrybyrd!

https://github.com/wordpress-mobile/WordPress-Android/pull/15253 addresses the original issue:

the foreground and the background screens are not distinguishable

So I'll go ahead and close this issue. I've created a new issue for the animation: https://github.com/wordpress-mobile/WordPress-Android/issues/16600.