Recently I wrote an article about implementation of one beautiful design from Dribbble. I have got a lot of positive feedback and for me it is a big motivation. It’s very interesting for me to share my experience and get feedback for that.
In this article we’ll try to step by step implement another beautiful shot created by Oleg Frolov. It’s not about a complex animated UI as in the previous article, it’s about custom widget, but with a very good motion design, as you see on the shot below.
At first glance, it seems that it’s not simple to implement such switch, but I think it’s because the animation is really beautiful. And as you’ll see it’s not difficult to create the same animation. Let’s implement them step by step.
At first, we need a custom view class with 3 overridden methods:
Draw like Picasso
In the default (checked) state, our switch consists of 2 rounded rectangles (green and white).
It’s pretty simple to draw them, we just need to calculate the position of the white rectangle and pass the offset
iconTranslateX to the Android KTX
For animation we will use the
ValueAnimator with its
ofFloat(float... values) method. We need 3 animators:
switcherAnimator— to animate the switcher icon, from a white rectangle to a circle and vice versa;
translateAnimator—to animate the switcher icon transition from left to right and vice versa;
colorAnimator—to animate the color from green (checked) to red and vice versa.
Let’s look at the
switcherAnimator. We pass
0f as its start value and
1f as its end value.
In the Android KTX
addUpdateListener extension we update a progress value that trigger
invalidate and our view redraw itself.
lerp function is a linear interpolator, that is used for calculating
iconOffset, which in turn, is used for calculating the switcher icon’s rounded rectangle coordinates. This icon’s rectangle is animated from a rounded rectangle to a circle (a round rectangle with the bigger corner radius).
postIvalidate()because we need smooth animation and the first method has an advantage, read more here.
translateAnimator works in the same way but it updates x position of the switcher icon.
As you see our white circle is like a bagel. We have 2 ways to make it: crop a circle with a smaller circle or the simplest, just draw another small circle on the top and fill it with the switcher color. I choose the simpler one.
That all, nothing hard! We have a beautiful custom widget with cool animation!
At this point we can everything
Now we can create a custom view with any kind of animation. And we can slightly change our code to create another widget, also designed by Oleg Frolov. Just update view outline from a rounded rectangle to a circle and disable the translate animation. And viola!
No more words, just code
Fell free to grab the source code on GitHub, check out my other implementations and don’t forget to experiment and have fun!
Android implementation of switch animation https://dribbble.com/shots/5429846-Switcher-XLIV from Oleg Frolov…
Thank you for reading and Happy Coding!
Don’t forget 👏