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.