Posted on

Android Gooey FAB EASY pt 2


Android Gooey FAB EASY
Designed by Freepik

Hey what’s up, guys? In the previous post we made a basic FAB gooey animation with Animated Vector Drawable. Although it was quick, it had some downfalls. The main problem was that we didn’t have shadows, ripple effects and click event handler. Today we’re going to work on those areas! We going to improve a lot from the previous point we left it. Let’s get started!

First of all let’s recap what we have currently. I added back animation which is just reverse most of them and that what it looks now

Android Gooey FAB EASY

 

Shadows

What FAB is that without a shadow? If you followed the previous blog post, currently I have Android Vector Drawable implementation for gooey background. And we could make a shadow with gradient, but it’s available from API 24, so forget about it. And there’s no need to do that, Android has already an implementation for shadows. We just add elevation tag. It’s really cool and simple, if you’ve used elevation for shapes, then you know how flexible it is. By default it draws a shadow for background. Since we have a complex shape where background in static state takes half of the view and the rest is reserved for animation, we need to set a custom OutLineProvider.

You just define the shape – rectangle, oval etc and its boundaries. That’s the code I have to get my shadow

Which creates this nice shadow after setting elevation in XML. Unfortunately we can’t set multiple outlines, so creating distinct views for shadows in necessary

Android Gooey FAB EASY

Click Events

Since it’s just one view, we have to handle clicks via touch coordinates. By setOnTouchEventListener and getting Y coordinates of touch events we determine which FAB was clicked. Coordinates are relating to the view itself which is great. I won’t put this code, because it’s pretty obvious

Canvas Approach

I decided to try implementing it with Canvas, just the core animation itself. Although there’s a method called drawArc, it work very different from SVG one. With SVG path you determine arc’s base line and Y position of an arc. But Canvas arc is actually a clipped part of an oval. That’s why if you draw a semi-circle it works great, but as soon as you start to scratch the Y position, arc’s base line moves itself. So combining two arcs won’t work here, scratching circle nether, it starts to look like a sausage. But having a circle for background and top part arc for gooey part works, which looks almost like with AVD. That’s the code behind it in onDraw method

Second arc is a static circle on background to keep the circle look, because the first animation makes it too narrow. and mArcTopCurrent is animated value, which is changed via ValueAnimator going from start arc to end and back to start one. And then calling invalidate to draw

Ripple

Finally we came to the trickiest part in here. We all now how to easy make a ripple effect. You set ?attrs/selectableItemBackground foreground XML attribute, set onClickListener and you got yourself a default ripple. But it will be of rectangular shape, for it to match out FAB shape we need to have our outline, which we set before and set clipToOutline flag.

Hurray! we got a circle ripple, but now no canvas animations work. it’s all static. And Android documentation doesn’t recommend to animate clipped views. And the solution I came up with is to create a view for ripple, change GooeyFab view to extend FrameLayout and put ripple view on top of FAB. It Worked. That’s what I got now

Android Gooey FAB EASY

And I do some slight transformation of ripple for it to fir the animating background. Because it will be very noticeable it ripple just takes the circle shape, but background is animated. Fortunately no problem with animating ripple size.

Result

Now we’ve got something! Although it’s still way too hardcoded, it already looks great. Where to go next? Now let’s see how to animate FAB shadow, make it’s more modular so that you can just add it in XML and with few attributes have it for any app. And it should be any desired number of small FAB’s up there. What I think is to make small ones coming one from another. like bottom up appearance. Tell me about your thoughts and ideas about this FAB

I’m pretty happy with the current result. Although it’s very simple animations at its core, they do look gooey and that’s a good start!

 

Alright, thanks for reading. The source code is here. Don’t forget to subscribe, follow me on Facebook, G+, Twitter and share with friends if you think they will benefit from it!