How to customize the appearance of ProgressBar in Android, androidprogressbar

How to customize the appearance of ProgressBar in Android, androidprogressbar

Some progress bars are often used in Android applications. These progress bars vary widely, but most of them come from ProgressBar. However, the progress bar style provided by the Android system is not very nice. What we need to do today is to customize a nice progress bar.

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

Our goal today is to display the custom progress bar:

It is not difficult to find that the gap is still quite large. Well, there is not much nonsense. Let's start with the question:

First, we should start with the source code. We canOpen the sdk \ platforms \ android-16 \ data \ res \ values folder under the ADT directoryBecause many styles. xml files of Android components are defined in this folder, the system's default ProgressBar is no exception, so we canOpen the styles. xml file.And find the definition of ProgressBar:

Because a horizontal progress bar is required today, we can findProgressBar. HorizontaL:

    <style name="Widget.ProgressBar.Horizontal">        <item name="android:indeterminateOnly">false</item>        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>        <item name="android:minHeight">20dip</item>        <item name="android:maxHeight">20dip</item>    </style>

In fact, we need to pay attention to it.Progress_horizontalWe can find this fileSdk \ platforms \ android-16 \ data \ res \ drawableFolderProgress_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:centerY="0.75"                    android:endColor="#ff747674"                    android:angle="270"            />        </shape>    </item>        <item android:id="@android:id/secondaryProgress">        <clip>            <shape>                <corners android:radius="5dip" />                <gradient                        android:startColor="#80ffd300"                        android:centerColor="#80ffb600"                        android:centerY="0.75"                        android:endColor="#a0ffcb00"                        android:angle="270"                />            </shape>        </clip>    </item>        <item android:id="@android:id/progress">        <clip>            <shape>                <corners android:radius="5dip" />                <gradient                        android:startColor="#ffffd300"                        android:centerColor="#ffffb600"                        android:centerY="0.75"                        android:endColor="#ffffcb00"                        android:angle="270"                />            </shape>        </clip>    </item>    </layer-list>

We can see that three items are defined: Background, SecondaryProgressAnd SS, Here BackgroundIt is the background used by the progress bar. The figure corresponding to the custom progress bar above is the gray part, which is filled at the bottom of the progress bar. SSIt is the progress bar, corresponding to the green progress bar shown above; SecondaryProgressNo in our figure. This component is similar to the gray progress bar displayed in the buffer progress when watching online videos on the Internet. It is different from the viewing progress, here we do not add.

Further observe the definition method of each item. The Android system directly specifies the color of each item, here, we can use different background images to make the definition more beautiful.

At this point, the source code is basically done. Next we need to do three steps:

1. Add a style entry in the res/values/styles. xml file of our project directory. The name is customized. For exampleMy_pb_styleBut you need to specify a parent class that is the ProgressBar style in the Android system we opened above. At the same time, we need to override the settings in the parent class.Progress_horizontalChange the xml file to a custom xml file in our project, for example, my_progressbar.xml.

    <style name="my_pb_style" parent="@android:style/Widget.ProgressBar.Horizontal">        <item name="android:progressDrawable">@drawable/progressbarcolor</item>    </style>

2. Create a drawable folder under the res directory under our project directory and createMy_progressbar.xmlIn the preceding progress_horizontal.xml FileSecondaryProgressThe item is removed and only retained.Background andSSThen, we can remove the shape of each item and change it to the image we have prepared, as shown in the following figure. security_progress_bg and security_progress are the images we have prepared in the drawble directory respectively, for example, the image here is 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 of the ProgressBar and add the Style 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" />

Now, we can use the ProgressBar of the custom appearance in the file.

During Android development, I don't know why the ProgressBar style is displayed in a circle no matter how it is set.

Replace "@" in the Code style = "@ android: attr/progressBarStyleHorizontal" with "?" Now.

Hope to help you

How does one implement a custom progressbar? See figure

Don't know. Ask someone else.