How to implement this type of Progressbar in android using xml file

Question

How to apply glow effect?

I am trying to create this type of horizontal ProgressBar but no idea about the glowing effect for as starting point of progress.

enter image description here

Here is my code for gradient color

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="0dip" />

        <solid android:color="#ff9d9e9d"/>
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

            <gradient
                    android:angle="180"
                    android:startColor="#8872f8fc"
                    android:endColor="#886dc0e3" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <gradient
                    android:angle="180"
                    android:startColor="#31c6f7"
                    android:centerColor="#2ea6d1"
                    android:endColor="#2884a6" />
            </shape>
        </clip>
    </item>

</layer-list>

maybe this will help http://stackoverflow.com/questions/15898185/holo-progressbar-glow-effect — Elior, Apr 14 '13 at 12:58
U should check this out http://stackoverflow.com/questions/2819778/custom-drawable-for-progressbar-progressdialog — Niko, May 14 '13 at 08:31
How did you achieve to add the percentage below to align it correctly with the progress bar? — Abbadon, Apr 06 '15 at 18:57

score 2 · Answer 1 · answered May 27 '13 at 09:27

You can use a png image for glowing head. Use < bitmap> tag inside the layer-list and align it to right. I did a similar thing for a completely different application

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
    <shape>
        <gradient
            android:angle="270"
            android:endColor="#4C4C4C"
            android:startColor="#303030" />

        <stroke
            android:width="0dp"
            android:color="#000000" />

        <corners android:radius="0dp" />

        <padding
            android:bottom="0dp"
            android:left="5dp"
            android:right="0dp"
            android:top="0dp" />
    </shape>
</item>
<item>
    <bitmap
        android:antialias="true"
        android:gravity="right|bottom|fill_vertical"
        android:src="@drawable/spinner_down_arrow" />
</item>

</layer-list>

score 0 · Answer 2 · answered Apr 14 '13 at 20:10

0

The glow effects are png drawables with transparency. Layed on top of the right side of current process.

Create a custom view progress bar.

answered Apr 14 '13 at 20:10

Andreas Rudolph

1,226
19
28

score 0 · Answer 3 · answered Apr 25 '13 at 23:06

Alternatively you can add an ImageView to your layout. Create the drawables for progress bars. Then draw inside the ImageView with 2 layers by code. First layer would be background and the second layer would be the knob. Write redrawing code to the onTouch Listener of imageview to update view as touched.

How to implement this type of Progressbar in android using xml file

3 Answers3