Thursday, October 2, 2014

Customizing Progressbar in Android


Customizing Progressbar in Android

In default style you change the Progressbar from circular to horizontal. Now in that also you can change the color whatever you like it.

Here is the below code will change the color circular Progressbar. Its looks like this





circular_progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<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" >
        <size
            android:height="76dip"
            android:width="76dip" />

        <gradient
            android:angle="0"
            android:endColor="#
00FF00"
            android:startColor="@android:color/transparent"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

Use this file in your Progressbar  like this way.

<ProgressBar
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:indeterminateDrawable="@drawable/progress_drawable" />

Two main things you need to use i.e. android:indeterminate="true" to allow indeterminate and change the indeterminate drawable android:indeterminateDrawable="@drawable/progress_drawable" with our drawable.

Now for Horizontal progressbar






progress_horizontal_drawable.xml

<?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="5dip" />

            <gradient
                android:angle="270"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:startColor="#ff9d9e9d" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <gradient
                    android:angle="270"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:startColor="#80ffd300" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <gradient
                    android:angle="270"
                    android:endColor="#008000"
                    android:startColor="#33FF33" />
            </shape>
        </clip>
    </item>

</layer-list>

Use this file in Progressbar

<ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:id="@+id/progress"
            android:progress="50"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:indeterminate="false"
            android:progressDrawable="@drawable/progress_drawable" />


No comments:

Post a Comment