There is more than one way to implement a progress bar with nodes, but if you want to achieve this effect, it seems that it is not easy at first glance. The progress bar has an irregular shape, a gradient color background, and a tick above the nodes. Here provides a very simple idea, simple are embarrassed to say……

To do this, we need three images, the following three.

You probably already know how to do this. Here are three images:

1. Background of the filled part of the progress bar with a gradient color and a node tick 2. Background of the unfilled part of the progress bar with a solid color 3. The background of the outer frame of the progress bar is a hollow figure with the same color as that outside the progress bar

Note that the three images must be of the same size, and add them together to form our progress bar. For the animation of the progress bar, we just need to implement a property animation for the second layer image:


public void setProgress(float stage) {
    int progressWidth = ivProgress.getWidth();
    ObjectAnimator animator = ObjectAnimator.ofFloat(ivProgress, "translationX", stage * progressWidth);
    animator.setDuration((int) (Math.abs(stage - currentStage) * 1000));
    animator.start();
    currentStage = stage;
}
    
Copy the code

As for how to control which node to reach, you can take a ruler to measure it and try it several times. The stage in the above code is used for this purpose, and it takes the value from here:


// The location of the progress bar at different stages
public static final float STAGE0 = 0f;
public static final float STAGE1 = 0.046 f;
public static final float STAGE2 = 0.285 f;
public static final float STAGE3 = 0.523 f;
public static final float STAGE4 = 0.761 f;
public static final float STAGE5 = 1f;
    
Copy the code

And finally, let’s look at the effect.

Now you have a progress bar that looks a bit complicated, and that’s fine.

The source address