search

saket / cascade

Nested popup menus with smooth height animations for Android
https://saket.github.io/cascade
Apache License 2.0
2.02k stars 67 forks source link

Arrows briefly left hanging on transition to a smaller menu #24

Closed cmt218 closed 3 years ago

cmt218 commented 3 years ago

Hi! Just a small UI issue my teammate @burntcookie90 and I were discussing is that during menu transitions sometimes the arrow icon is briefly left hanging. I didn't notice it at all for a while, but then one of our team members pointed it out and now its hard to unsee!

We noticed it in a POC we were doing, but it can actually be seen slightly in the demo gif:

demo

Relevant frames (sorry for uneven height):

Screen Shot 2021-01-27 at 12 45 25 PMScreen Shot 2021-01-27 at 12 45 33 PMScreen Shot 2021-01-27 at 12 45 43 PMScreen Shot 2021-01-27 at 12 45 51 PMScreen Shot 2021-01-27 at 12 45 59 PMScreen Shot 2021-01-27 at 12 46 07 PMScreen Shot 2021-01-27 at 12 46 15 PMScreen Shot 2021-01-27 at 12 46 23 PMScreen Shot 2021-01-27 at 12 46 30 PM

Seems to happen when navigating to a shorter menu and the arrows are below the incoming menu items.

Thanks for the great library!

saket commented 3 years ago

Interesting. I'm trying to watch a slowed down version of that video and I don't see the arrow left hanging. Is it possible that the low quality of the GIF is giving such an impression? Here's a high quality version of the GIF:

https://user-images.githubusercontent.com/2387680/106095502-e7fe5b00-6101-11eb-85ca-86c5136a6897.mp4

Relevant frames:

   
cascade-0003 cascade-0005
cascade-0006 cascade-0007

Here's another video captured at 5x (by slowing down animations in debugger settings):

https://user-images.githubusercontent.com/2387680/106095561-fe0c1b80-6101-11eb-9d35-c9aa2de738f2.mp4

saket commented 3 years ago

I'm watching a video of your app sent by @burntcookie90 and I think I know what's happening for your popup -- AppCompat's default background drawable for popups has internal paddings. They cause a gap to be present between your popup's last item and the popup's bottom edge. I'm fairly sure it's also causing the arrow to be visible for a frame when the submenu has fully entered in.

Can you try setting a custom background to your popup without internal paddings? 

val cascadeStyler = CascadePopupMenu.Styler(
  background = {
    PaintDrawable(popupColor).also { it.setCornerRadius(8f.dip) }
  }
)
val cascade = CascadePopupMenu(context, anchorView, styler = cascadeStyler)

I wrongly assumed that https://github.com/saket/cascade/commit/79ace480f33bc7cd2726db5022c099deeb54d9c4 would be sufficient in working around this issue, but looks like I need to also add a default background for cascade popups that doesn't have internal paddings.

saket commented 3 years ago

Update: This should be fixed by https://github.com/saket/cascade/commit/667ffd242a5992cd1b9187818a11cbd64bba1aab. Can you try out 1.3.0-SNAPSHOT?

cmt218 commented 3 years ago

Confirmed fixed in 1.3.0 thanks for the help!