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)

<rotate xmlns: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)

<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="@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-rotate xmlns: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-list xmlns: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)

<LinearLayout xmlns: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>

Links

• The source codes of this project can be downloaded here: zip