Giters

saket / cascade

Nested popup menus with smooth height animations for Android

Home Page:https://saket.github.io/cascade

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Arrows briefly left hanging on transition to a smaller menu

cmt218 opened this issue · comments

commented

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!

commented

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:

cascade.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):

cascade_5x.mp4
commented

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 79ace48 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.

commented

Update: This should be fixed by 667ffd2. Can you try out 1.3.0-SNAPSHOT?

commented

Confirmed fixed in 1.3.0 thanks for the help!