This image was created with the assistance of DALL·E 2

How to create Glovo-like main screen animation using Jetpack Compose (Part 1)

Motivation

I like cool animations inside the different apps, but there often isn’t much time to work on them unless someone requests it. One of my favorites is the Glovo animation on the main screen, where you can drag items inside the circle and play around for a while before you order something. That’s why I want to recreate this animation by myself.

It won’t be an identical implementation, just a similar idea that will be implemented in an easy way using Jetpack Compose.

Also, I won’t explain the principles of sine and cosine; from my point of view, they’re just something you need to remember without deep knowledge, especially at the start. But I added a useful link in the second part where you can get more knowledge about this topic.

There are many details in the code comments, so please pay attention.

Screen record from the Glovo app

En avante!

Simple circles

Let’s start with a simple part — creating a Composable for our animation. We need the main item (that will be in the center of a component), secondary items with text and path (that will be around main item), circle radius for whole component and radius for our small circles inside, text style for title, onClick callback and modifier.

Next we will draw circles to see something on our screen. For this we need Canvas on which we will draw. It’s easy to draw one circle in the middle using the drawCircle function. One thing to mention, canvas working with pixels, not with Dp (density-independent pixels).

Next step is to add secondary circles. It’s a little bit harder, because we need to count distances and draw them appropriately around the main circle.

Generally, we calculate the equal distance in degrees between each circle. Then calculate the points on our main circle. These points will be the center for secondary items. Then, we draw them using the same function as before for the main circle.

Path icon

Now it looks better. But let’s add some individuality to each of these plain circles. In our case it would be title and icon. As an icon I would use a path. Path is the route or trajectory you want your drawing tool to follow. It’s like giving directions to a pen or brush on where to go on the canvas to create shapes or lines.

We will start with the icon. You can draw Path by yourself or download icons as svg and then save the internals of this file in res/values/strings.xml. I’ve chosen the second option. It should look something like this:

<string name="default_path">M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z</string>

To convert the path-string to a Path object we will use PathParser. I will use only one icon for simplicity, but it wouldn’t be a problem to use another one.

We have our path, but there is a small problem, we need to position it in the center of our circle. If we don’t do that, it will be drawn somewhere in the top left corner. Hopefully, compose gives us this possibility with translation extension.

With a few simple calculations, we positioned our icon in the middle. Also, I added a small space on the bottom. Because we also need to draw titles. But here is another problem — the path is too small. Let’s make it big and “powerful”. In this mission, composition will help us with another extension function — scale. First, add a scale factor to the Composable.

// Scale factor for icon
   iconScale: Float = 3f

And now we used this scale to our translate and scale functions.

This is how it was, and look at it now!

Before

After

Text

Moving on to the last aspect of individuality: text. Firstly, add the TextMeasurer. In simpler terms, the Text Measurer helps you plan and design your user interface by giving you information about the size of text elements before they’re displayed.

After some manipulations with the text measurer and Offset, we set text in the middle of a circle above the path icon.

Now, we’ve successfully added text!

I added all this code to an extension function to reuse it for the main circle and add some simplicity to code.

Change the main circle drawing function to this.

And this is what we get in the end!

The final result for the first part!

Conclusion

In the first part of the article, we took our first steps with Canvas, Path, and text drawing. Also, we used a few calculations that can be useful when you work with Canvas. If you want to see the whole implementation, you can find it in the link below.

In the second part we will discuss how to add draggability and appearance animation.

GitHub - AndreVero/GlovoLikeAnimation