Customized Progress Bar

Actually, I'm just refer this site from this link.

Interface: Custom Progress Bar

Today we will customize element Spinning Wheel. This article will be covered three ways to change the element.

Practice

For one of the methods of customization require resources. Create an xml file for the color. These resources will set the gradient for our spinning wheel.

Source code (colors.xml)

<resources>

    <color name="color_preloader_start">#000000</color>

    <color name="color_preloader_center">#000000</color>

    <color name="color_preloader_end">#ff56a9c7</color>

</resources>

• First way. Using Shape

Create forms for the rotation is limited only by your imagination. This article will be examined only two forms: oval and ring.

1. Oval

Source code (loader_0_1.xml)

<rotatexmlns:android="http://schemas.android.com/apk/res/android"

    android:fromDegrees="0"

    android:pivotX="50%"

    android:pivotY="50%"

    android:toDegrees="360" >

    <shape android:shape="oval" >

        <gradient

           android:centerColor="@color/color_preloader_center"

            android:centerY="0.50"

            android:endColor="@color/color_preloader_end"

           android:startColor="@color/color_preloader_start"

            android:type="sweep" />

    </shape>

</rotate>

rotate allows our form to rotate from 0 to 360 degrees with a pivot point at the center of the figure. Our figure is filled sweep gradient. The gradient is given by three colors and starts in the center of the figure is painted over.

2. Ring

Source code (loader_0.xml)

<rotatexmlns: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="@color/color_preloader_center"

            android:centerY="0.50"

            android:endColor="@color/color_preloader_end"

           android:startColor="@color/color_preloader_start"

            android:type="sweep"

            android:useLevel="false" />

    </shape>

</rotate>

For the ring you must set the following parameters:

android:innerRadiusRatio – inner radius of the ring

android:thicknessRatio – thickness of the ring

android:useLevel="false" – Indicates whether the drawable's level affects the way the gradient is drawn.

• Second way: Rotating an image

This method uses a pre-built image to rotate.

Example images (download):

Source code (loader_1.xml)

<animated-rotatexmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/preloader"

    android:pivotX="50%"

    android:pivotY="50%" />

• Third way: frame animation

Example images (download):

In that case, when our spinning wheel can not be animated by a rotation, you can use frame animation.

Note: The size of the element must be equal to or greater than used images.

Source code (loader_2.xml)

<animation-listxmlns:android="http://schemas.android.com/apk/res/android" >

    <item

        android:drawable="@drawable/progress_1"

        android:duration="200"/>

    <item

        android:drawable="@drawable/progress_2"

        android:duration="200"/>

    <item

        android:drawable="@drawable/progress_3"

        android:duration="200"/>

    <item

        android:drawable="@drawable/progress_4"

        android:duration="200"/>

    <item

        android:drawable="@drawable/progress_5"

        android:duration="200"/>

</animation-list>

android:duration – time display the current frame.

Now we will place all our items on the screen. To customize the ProgressBar, you must use the attribute android:indeterminateDrawable.

Source code (main.xml)

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <ProgressBar

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:indeterminateDrawable="@drawable/loader_0" />

    <ProgressBar

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:indeterminateDrawable="@drawable/loader_0_1" />

    <ProgressBar

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:indeterminateDrawable="@drawable/loader_1" />

    <ProgressBar

        android:layout_width="119dp"

        android:layout_height="119dp"

        android:indeterminateDrawable="@drawable/loader_2" />

</LinearLayout>

That's it. Enjoy and happy coding...