How to customize the circular progress bar

How to customize the circular progress bar, that is, to replace the picture of the progress bar.

First, let's analyze how the system defines the progress bar:

We usually download the layout file to write this:

// Code in the layout file <ProgressBar android: id = "@ + id/progressBar1" style = "? Android: attr/progressBarStyleSmall "android: layout_width =" wrap_content "android: layout_height =" wrap_content "/>

Style = "? Android: attr/progressBarStyleSmall "This references the style

This is the content in the att. xml file <declare-styleable> <attr name = "progressBarStyleSmall" format = "reference"/> </declare-styleable>

This is the content in theme. xml <style name = "Theme"> <item name = "progressBarStyleSmall"> @ android: style/Widget. ProgressBar. Small </item> <style>

It can be seen from the above that the style of the progress bar is placed in the system's theme style as part of the system style.

Let's take a look at how this style file is defined:

// Style of the progress bar // in styles. <style name = "Widget. progressBar. small "> <item name =" android: indeterminateDrawable "> @ android: drawable/progress_small_white </item> <item name =" android: minWidth "> 16dip </item> <item name =" android: maxWidth "> 16dip </item> <item name =" android: minHeight "> 16dip </item> <item name =" android: maxHeight "> 16dip </item> </style>

You can see the referenced image here: <item name = "android: indeterminateDrawable"> @ android: drawable/progress_small_white </item>

// Reference drawble // progress_small_white.xml <? Xml version = "1.0" encoding = "UTF-8"?> // Put it in the drawable folder <animated-rotate xmlns: android = "http://schemas.android.com/apk/res/android" android: drawable = "@ drawable/spinner_white_16" android: Export Tx = "50%" android: required ty = "50%" android: framesCount = "12" android: frameDuration = "100"/> // The image is then spinner_white_16, which is not found in the source code.

Note: spinner_white_16 is not necessarily a pure image. It may be an animation.

From the implementation method below, you can see whether the image of the spinner_white_16 is true or not: it can be an image or another image. See the implementation below.

Definition implementation:

<ProgressBar android:id="@+id/loading_process_dialog_progressBar"android:layout_width="wrap_content" android:layout_height="wrap_content"android:indeterminate="false" android:indeterminateDrawable="@anim/loading" />

Actually

android:indeterminateDrawable="@anim/loading"

Change the resource pointed to by this attribute to what you want.

Three implementation methods:

1. animation implementation method

Pandatv is implemented in this way:

Check the Code:

Create an animation file in the anim folder under the res resource Folder:

The content is as follows: for example, the name is loading. xml.

<?xml version="1.0" encoding="UTF-8"?><animation-list android:oneshot="false"xmlns:android="http://schemas.android.com/apk/res/android"><item android:duration="150" android:drawable="@drawable/loading_01" /><item android:duration="150" android:drawable="@drawable/loading_02" /><item android:duration="150" android:drawable="@drawable/loading_03" /><item android:duration="150" android:drawable="@drawable/loading_04" /><item android:duration="150" android:drawable="@drawable/loading_05" /><item android:duration="150" android:drawable="@drawable/loading_06" /><item android:duration="150" android:drawable="@drawable/loading_07" /></animation-list> 

Each item references an image.

The reference is like this.

android:indeterminateDrawable="@anim/loading"

2. Point to the drawable resource defined by color:

<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:fromDegrees="0"    android:pivotX="50%"    android:pivotY="50%"    android:toDegrees="360" >    <shape        android:innerRadiusRatio="3"        android:shape="ring"        android:thicknessRatio="8"        android:useLevel="false" >        <gradient            android:centerColor="#FFDC35"            android:centerY="0.50"            android:endColor="#CE0000"            android:startColor="#FFFFFF"            android:type="sweep"            android:useLevel="false" />    </shape></rotate>

Drawble is used for reference.

android:indeterminateDrawable="@drawable/style_xml_color"

Of course, this can also be:

<?xml version="1.0" encoding="utf-8"?><animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/spinner_16"    android:pivotX="50%"    android:pivotY="50%"  />

 

3. Reference an image

Drawable file:

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item>        <rotate            android:drawable="@drawable/dialog_progress_round2_res"            android:fromDegrees="0.0"            android:pivotX="50.0%"            android:pivotY="50.0%"            android:toDegrees="360.0" />    </item></layer-list>

Reference an image

android:drawable="@drawable/dialog_progress_round2_res"

In conclusion, there is actually a rotation animation in the reference. If only one image is referenced, it will not rotate. If you are interested, you can give it a try. You can also see how the source code is implemented. Leave a message if you have any suggestions.

Use drawable is the same as the second method.

If you need source code, join this group: 200956440. The source code is shared in the group.