Android Dynamic Custom View is Easy

Published in

AndroidPub

3 min readDec 3, 2018

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 Canvas.withTranslation extension:

Animate everything

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.

We use the BounceInterpolator created by Evgenii Neumerzhitckii, it suits us well. In this article, Evgenii explains how it works.

In the Android KTX addUpdateListener extension we update a progress value that trigger invalidate and our view redraw itself.

The 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).

We use postInvalidateOnAnimation() instead of postIvalidate() because we need smooth animation and the first method has an advantage, read more here.

The 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!