How to customize the appearance of ProgressBar under Android

There are a number of progress bars that are often used in Android apps, and these progress bars look very diverse, but most of them are made by ProgressBar. But the Android system's own progress bar style is not very good-looking, today to do is to customize a good-looking progressbar.

Let's take a look at the progress bar that comes with Android:

Our goal today is to customize the look of the progress bar:

It is not difficult to find the gap is quite large, good, nonsense not much to say, into the topic:

We start with the source code, we can open the ADT directory under the Sdk\platforms\android-16\data\res\values folder , due to many Android under the style of the component (style) are defined in this folder in the Styles.xml file, the system default ProgressBar is no exception, so we can open the Styles.xml file here , and find the definition of ProgressBar The Place:

As today we need a horizontal progress bar, so we find Progressbar.horizontaL:

    <style name= "Widget.ProgressBar.Horizontal" >        <item name= "Android:indeterminateonly" >false</ item>        <item name= "android:progressdrawable" > @android:d rawable/progress_horizontal</item>        <item name= "android:indeterminatedrawable" > @android:d rawable/progress_indeterminate_horizontal</ item>        <item name= "android:minheight" >20dip</item>        <item name= "Android:maxheight" > 20dip</item>    </style>

In this case, actually we need to focus on progress_horizontal This file, we can find this sdk\platforms\android-16\data\res\drawable folder found under progress_horizontal.xml:

<layer-list xmlns:android= "Http://schemas.android.com/apk/res/android" > <item android:id= "@android: ID/                    Background "> <shape> <corners android:radius=" 5dip "/> <gradient Android:startcolor= "#ff9d9e9d" android:centercolor= "#ff5a5d5a" android:cent        ery= "0.75" android:endcolor= "#ff747674" android:angle= "/>"            </shape> </item> <item android:id= "@android: id/secondaryprogress" > <clip>                        <shape> <corners android:radius= "5dip"/> <gradient Android:startcolor= "#80ffd300" android:centercolor= "#80ffb600" Android:cen                tery= "0.75" android:endcolor= "#a0ffcb00" android:angle= "270" /> </shape&Gt </clip> </item> <item android:id= "@android: id/progress" > <clip> <sh ape> <corners android:radius= "5dip"/> <gradient android: Startcolor= "#ffffd300" android:centercolor= "#ffffb600" android:centery= "0.75            "Android:endcolor=" #ffffcb00 "android:angle="/> </shape> </clip> </item> </layer-list>

With a look, we can see that there are three item definitions, namely: background、 secondaryprogressAnd Progress, Here's backgroundIs the background of the progress bar, the graph that corresponds to the custom progress bar above us is the gray part, which fills the bottom of the progress bar; ProgressIt is the appearance of the progress bar, corresponding to the green progress bar shown above; secondaryprogressNot in our diagram, this component is similar to watching online video on the internet, the buffer progress shows that the gray progress bar, and watch progress is two different progress, where we do not add.

To further observe the definition of each item, the Android system is directly assigned the color of each item to define what it looks like, and we can use a different background image to define it in a more beautiful way.

At this point, the source part is basically done, the following we need to do is three steps:

1. Add a style entry in the Res/values/styles.xml file of our own engineering catalog, with the name custom, for example, we call My_pb_stylehere, But we need to specify a parent class, which is the ProgressBar style in the Android system we opened above, and we need to rewrite the place where progress_horizontal is set in the parent class, Change the XML file to a custom XML file in our own project, for example, called My_progressbar.xml.

    <style name= "My_pb_style" parent= "@android: Style/widget.progressbar.horizontal" >        <item name= "Android :p rogressdrawable "> @drawable/progressbarcolor</item>    </style>

2, in our project directory under the Res directory, create a new drawable folder in which to build a my_progressbar.xml file, the above open Progress_horizontal.xml the secondaryprogress item in the file is removed, only the background and progress are preserved, and then the shape portion of each item is removed, Instead of our own prepared images, such as the following, where SECURITY_PROGRESS_BG and security_progress are prepared for us to put in the drawble directory of the picture, such as our pictures here are as follows:

<?xml version= "1.0" encoding= "UTF-8"? ><layer-list xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item        android:id=" @android: Id/background "        android:drawable=" @drawable/security_ Progress_bg "/>    <item        android:id=" @android: id/progress "        android:drawable=" @drawable/ Security_progress "/></layer-list>

3. Define the ProgressBar in the layout file we need to ProgressBar, and add the style style we have defined above:

<progressbar                android:id= "@+id/progressbar1"                style= "@style/my_pb_style"                android:layout_width= " Fill_parent "                android:layout_height=" wrap_content "                android:layout_marginleft=" 10DP "                android:layout_ marginright= "10DP"/>

At this point, we can use the ProgressBar for this custom look in the file.

How to customize the appearance of ProgressBar under Android