Draw a path with animation

In the project that I’m working on I had to implement a line path with animation on a particular view that starts from a certain point and continues throughout the same view in the same way that the view is drawn, ie also in the corners if they are rounded then the path should also be rounded in the same way, an animation that shows the user a timeline That sometimes we want to do some action at the end of time.

I haven’t seen many apps that used like this animation, but one of them is Waze and Waze’s idea is to allow the user to do what he would normally do by default, so that he concentrates on traveling rather than clicking on the device as shown in the next GIF (note the “Go now” button)

I searched on the web and didn’t find any information, library or any solution, but eventually I managed to solve. I took the information and the code and packed it into the library — Drawer Path.

The library is extremely lightweight, both in terms of weight and intuitively, and I want to present it here and show how to use it.

Let’s start with a sample project that has two uses within library, button and dialog popup.

The idea of the button is, that the button will be enable after a certain time as shown in the gif, in our case 10 seconds, and so, we will display the same timeline with the help of the library.

First we will add dependencies that we can import the library into our project. We will open the gradle file and add

implementation ‘com.bagi: drawerpath: 1.4’

Then we add to the layout where we want the Drawer Path to be, in our example the layout looks like this:

And now we’ll explain how to set it up and what each attribute provides us. Because we want the Drawer Path to be drawn on the button, we set it to 0dp size

android:layout_width=”0dp”

android:layout_height=”0dp”

And the constraints will be set to the button

app:layout_constraintBottom_toBottomOf=”@+id/btnTryIt”

app:layout_constraintEnd_toEndOf=”@+id/btnTryIt”

app:layout_constraintStart_toStartOf=”@+id/btnTryIt”

app:layout_constraintTop_toTopOf=”@+id/btnTryIt”

This is how we make sure that Drawer Path is located right on the button and its size, so that if we increase the button we don’t have to change our Drawer Path, it’s in high coupling and depends on the button.

To change stroke width we will use

app:strokeWidthPath=”8"

The number is in pixels, for example stroke width 8 pixels.

The padding between the Drawer Path and the frame of the view that we wants to run the Drawer Path will be set

app:paddingRectangleFromEdge=”10"

The Drawer Path color can be any color from resource color

app:colorPath=”@color/blue”

To set the radius of the corners

app:roundCornerInDp=”30"

We’ll note that the setting 30 is exactly the definition of the radius of our button. If we look at the shape definition of the button we will see radius 30

<shape xmlns:android=”http://schemas.android.com/apk/res/android"

android:shape=”rectangle” >

<corners

android:radius=”30dp” />

……..

We’ve set Drawer Path to be above the button because an Android button rises above all components on the screen

android:elevation=”3dp”

And the last attribute is how long we want the animation to last at seconds

app:animatorDurationSec=”10"

We’ll note that this is also the amount of time we want to take action after the animation ends as we’ll see below.

Once we have defined the component in layout we’ll move to the code section

First, we’ll initiate animation this way

At this moment the animation starts working on a button according to the settings we have set in the parameters.

In addition, in our example we want to allow the button to be pressed after the animation ends and the duration of the animation we set was 10 seconds and so we’ll perform the function

Let’s move on to a sample popup now, in this example we want to alert the user not to touch the device while driving and so that he doesn’t have to dismiss the popup by clicking we’ll show him an animation that at the end of the popup will automatically disappear

The function that show the pop up

In the above code lines we show the popup and dismiss it after 6 seconds which is basically the animation time.

Drawer Path in popup is set like this

Because Drawer Path needs to be on edge of popup, we are unable to perform constraint, if we do constraint to parent the size of the popup will increase on the entire screen and we may not always want it, so we set the size of Drawer Path at runtime, we listen to the function when the popup is shown.

In the above code we define the size of the Drawer Path and then in the init function, define the size and width of the path the line will draw

So here’s the basics, from here you can use the library as you see fit and do amazing things.

Hope the library helps you stay focused on the tasks of your project and realize the idea of the app without having to implement things that are not related to your idea.