Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Have a button execute OnClickListener on end of ripple animation(Material theme)

I'm observing a bug with ripple animation on a button in Android. Basically, I have a ViewGroup, call it ButtonContainer that contains 2 buttons, call them OkButton and CancelButton. When the user clicks on CancelButton, I want to hide ButtonContainer by setting it's visibility to GONE. But this is causing a side effect, that the ripple animation on CancelButton is queued, but never played, and it plays the next time ButtonContainer becomes visible. This seems to happen because button's OnClickListener is fired before the ripple animation has a chance to play. This article describes this exact bug and shows how exactly the view behaves: link

The author suggests a workaround, but I'm wondering, is there a way to have the OnClickListener get fired after ripple animation on a button is played?

like image 958
Anton Cherkashyn Avatar asked May 12 '15 21:05

Anton Cherkashyn


1 Answers

The short answer: not really and according to the Material guidelines (AFAIK) you shouldn't delay the onClick execution in such a way. In my opinion it would result in pretty poor UX - I like my buttons snappy and I don't like waiting for fancy animations.

The medium-length semi-answer: you could do a quick hack and wrap the meat of your onClick logic in a .postDelayed(...) call with a good enough delay. With a proper delay, the action would happen after the ripple. It is a hack, it is brittle and I would advise you against this solution.

The long answer: you can actually determine if the Ripple has finished animating, though that path is a bit complicated. Ripple is a Drawable, and as all animating Drawables, it tells its View when to do animation (and when to finish it) with a callback. You could tap into this callback to tell when the animation actually finished.

E.g. you could implement your own callback for this that forwards all calls to the Ripple's hosting ViewGroup and also tell you when the animation has finished so you can do business.

As the bottom line, I think that you should either:

  • Solve this problem as the article does that you linked
  • Just forget about the Ripple effect in this case if that's an option.
like image 66
Zsombor Erdődy-Nagy Avatar answered Nov 14 '22 02:11

Zsombor Erdődy-Nagy