Detailed explanation of customized progress bar in Android

Android native controls only have a horizontal progress bar, and there is no way to change the style, such as the look of the native ROM

It's ugly, isn't it? When great product design requires changing the front background, even vertical, or even circular arc, what should we do, such as:

OK, let's start:

1） Background before transformation

Let's first look at the properties of ProgressBar:

According to style = "? Android: attr / progressbarstylehorizontal", we find style.xml in the source code

See:

When you see Android: id = "@ Android: ID / progress" Mu you and Android: id = "@ Android: ID / secondaryprogress" Mu you copy this file to the drawable under your own project, you can modify the shape properties, gradients, fillets, etc. at will. So how do you put a picture in it? OK, create a new progress_ horizontal1.xml：

Specify the pictures you have handled in Android: drawable, and then return to the layout:

Android: background = "@ drawable / progress_bg" specify the background Android: progressdrawable = "@ drawable / progress_horizontal1" the foreground uses the progress above_ Horizontal1 OK, done

Note that the four corners still have circular chamfering, which seems to be added by the system itself. In short, this chamfering is not done in my picture. 2) vertical progress bar

We still have to start with the source code and look back to progress_ horizontal.xml

Why is there a layer of clip outside the shape? The official document explains that clipdrawable can be copied by itself. Let's see the definition

Android: cliporientation has two attributes, the default is horizontal, and Android: gravity has two attributes, the default is left. Let's try to change it to vertical and bottom to create a new progress_ Vertical.xml, put the source code progress_ Copy the content of horizontal.xml, remove secondaryprogress, modify clip, and change the gradient center of shape from centery to centerx

Android: progressdrawable = "@ drawable / progress_vertical" OK in the layout. It's as simple as this:

3） Arc bar

This may not be a progress bar, and it is not used much. At most, it is used for the dashboard. Otherwise, who will make the progress bar into an arc. Well, this can't be done by changing the source code. Look at the code:

First, there are a bunch of member variables. Two paints are used to draw an arc, a foreground and a background, and a rectf arc is drawn on it. Then there are some control parameters, such as sweep angle, XY coordinates, etc.

Set two brushes, color, width, style, etc. the blurmaskfilter brush is an edge blur effect. There are several, you can try it yourself.

Override the onsizechanged of the parent class view to center it according to the size in the layout

Rewrite OnDraw to redraw canvas drawspeed by calculating msweep = (float) mincspeedvalue / mspeedmax * 180; Then canvas.drawarc (moval, arcpaint); Radians of corresponding length will be drawn according to the change of msweep, and different colors can be set according to the comparison with the threshold: