Wednesday, February 13, 2013

Interface: Custom Progress Bar

Customization interface: 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
Customization interface: Progress Bar

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
Customization interface: Progress Bar

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.

Customization interface: Progress Bar
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

Customization interface: Progress Bar

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