Hey guys! I have been thinking about making some gooey stuff for a long time. It’s different, it’s cool looking, it’s so amazing! But where to start, how to implement? Obviously, gooey is not in the Google’s Material Design spec yet. Although you can find some shape transformation, as about changing, transforming shapes Google suggests circular reveal as a tool. Otherwise there would be some public API’s for gooey animations, because it is possible to make. And today we’re gonna make some really cool one!Just look at this example of getting an idea of what’s gooey is about. Excited? Let’s go!
First of all, let’s figure out the ways to implement this. I can see three currently. First and the hardest way is with bitmap mesh transformations. It seems to be the most advanced and most customisable. You can basically get any view’s bitmap and animate it in a way you want. Great, though not there yet. I’ll talk about this in the future blog posts. Second is via creating custom View and drawing shape with Canvas#drawPath, because that’s the method from Canvas class that let’s you draw really complex stuff. This is already easier to do, the only thing you need to learn is Path class and how to draw and animate shapes with it.
But can we get even something easier? The answer is Animated Vector Drawable. It provides the best abstraction for us, it’s simpler that creating custom view and animating with canvas. We just provide SVG start/end path data, duration, interpolators and that’s it. The rest of the work Android does for us. That’s the best way I found to learn and get the feeling of gooey. That’s what I got in the result
As you see, there’s no shadows and clickable foreground which make the look better. Let’s just say that we’re focused on shape transformation now. As I said we’re going with the Animated Vector Drawable approach, easiest and fastest way. If you haven’t done AVD path animations, you might want to check this post before. Let’s break down the animation. We have a main FAB which shows multiple actions, currently just one. The logical approach is to create two views, it will be easier handle click events later. But I decided to use one for now. Which means that its size should be of the expanded one so we have room to animate.
If you create a circle vector in Android Studio it will be of two arcs. Those a command arguments are pretty long, let’s see what they mean.
a rx ry x-axis-rotation large-arc-flag sweep-flag x y
First letter is a name of command, using lower case will make all following coordinates relative to the current cursor position. Using capital letter for command name will use absolute coordinates instead. The most important for us are first two arguments, radius x and radius y. That’s the radius y which we animate to scratch up circles. The rest of the arguments we just leave the same. That what it looks like with one arc
I expect you know already how to setup Animated Vector Drawables, so I’ll just put the objectAnimator file
android:valueFrom="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"
android:valueTo="M12,12m-10,0a10,10 0,1 1,20 0a10,16 0,1 1,-20 0"
That’s squeeze animation, as you see there’s radius y animated from 10 to 16 and then there’s one more animator like this in a set for backwards animation with startOffset.
As you’ve already realized that’s the core animation in here, I don’t make some complicated shapes, don’t use bezier curves. The magic is in speed, small size and Android forgiveness of imperfections. While big FAB squeezes, small goes from bottom to top with starting squeezed state to base one and applying some slight scale transformation to give it better look. All of that gives the appearance like small FAB comes from the big one like a spore. The whole animation takes 750 ms which is already long, if we make it 300 – 400 you would hardly notice imperfections, which is great. Looks decent, isn’t it?
One thing is to consider is how to handle click events. If stick with one view then we’ll have to check for position of touch events. Distinct views for small FAB’s solve this problem. One more thing is clickable foreground and shadows. I will them in the future, but as you see, it is relatively simple to make some gooey stuff on Android with Animated Vector Drawables. The only thing you need to learn is all the different SVG commands and you’re golden. The good thing is that it looks in grace with Material Design. You don’t have to make all your views gooey to keep the feeling of one single design style.
Ok, thanks for reading. You can get GitHub source code here. Don’t forget to subscribe, follow me on Facebook, G+, Twitter and share with friends if you think they will benefit from it!
Formerly an Android developer, lately picked up some Flutter. This blog is everything that I find exciting about Android and Flutter development. Stay tuned and hope to see you again!