Android Studio Circular Progress Bar

 

 download android studio design animation

Circular Progress Bar Part 1 

progressbar1.xml

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

    <item android:id="@+id/background">
        <shape
                android:shape="ring"
            android:useLevel="false">

            <solid android:color="@color/gray"/>
        </shape>
    </item>
    <item android:id="@+id/progressbar">

        <rotate android:fromDegrees="270"
                android:pivotX="50%"
                android:pivotY="50%"
                android:toDegrees="270">

            <shape android:shape="ring"
                    android:useLevel="true">

                <solid android:color="@color/colorAccent"/>
            </shape>
        </rotate>
    </item>
</layer-list>

Activity_Main.xml

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:background="@drawable/gradientsgreen"
        android:layout_height="match_parent"
        tools:context=".design18part15">

  
        <ProgressBar
                android:id="@+id/progressBar3"
                style="?android:attr/progressBarStyle"
                android:layout_width="match_parent"
                android:layout_marginTop="20dp"
                android:indeterminateDrawable="@drawable/progressbar1"
                android:layout_height="80dp" />
  
</LinearLayout>

download android studio design animation

Circular Progress Bar Part 2

progressbar2.xml

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

    <item android:id="@+id/background">

        <shape
             android:innerRadiusRatio="3"
             android:shape="ring"
             android:useLevel="false">

            <solid android:color="@color/gray"/>

        </shape>

    </item>

    <item android:id="@+id/progressbar">

        <rotate android:fromDegrees="0"
                android:toDegrees="360">

            <shape android:innerRadiusRatio="3"
                    android:shape="ring"
                    android:useLevel="true">

                <solid android:color="@color/colorAccent"/>

            </shape>

        </rotate>
    </item>

</layer-list>

Activity_Main.xml

<LinearLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="match_parent"

        android:orientation="vertical"

        android:background="@drawable/gradientsgreen"

        android:layout_height="match_parent"

        tools:context=".design18part15">

  

        <ProgressBar
                android:id="@+id/progressBar4"
                style="?android:attr/progressBarStyle"
                android:layout_width="match_parent"
                android:indeterminateDrawable="@drawable/progressbar2"
                android:layout_marginTop="20dp"
                android:layout_height="80dp" />

  

</LinearLayout>


download android studio design animation

Circular Progress Bar Part 3

progressbar3.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="-90"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270">

    <shape android:shape="ring"
            android:useLevel="false">

        <gradient
                android:centerColor="@color/colorTransparent"
                android:centerY="0.5"
                android:endColor="#ff0000"
                android:startColor="@color/colorTransparent"
                android:type="sweep"
                android:useLevel="false"/>

    </shape>

</rotate>

Activity_Main.xml

<LinearLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="match_parent"

        android:orientation="vertical"

        android:background="@drawable/gradientsgreen"

        android:layout_height="match_parent"

        tools:context=".design18part15">

  

        <ProgressBar
                android:id="@+id/progressBar5"
                style="?android:attr/progressBarStyle"
                android:layout_width="match_parent"
                android:indeterminateDrawable="@drawable/progressbar3"
                android:indeterminateDuration="@android:integer/config_longAnimTime"
                android:layout_marginTop="20dp"
                android:layout_height="80dp" />

  

</LinearLayout>

download android studio design animation

Circular Progress Bar Part 4 

progressbar4.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="-90"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270">

    <shape  android:shape="ring"
            android:useLevel="false">

        <gradient
                android:centerColor="#00bfff"
                android:centerY="0.5"
                android:endColor="#ff0000"
                android:startColor="#ff0000"
                android:type="sweep"
                android:useLevel="false"/>

    </shape>

</rotate>

Activity_Main.xml

<LinearLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="match_parent"

        android:orientation="vertical"

        android:background="@drawable/gradientsgreen"

        android:layout_height="match_parent"

        tools:context=".design18part15">

  

        <ProgressBar
                android:id="@+id/progressBar6"
                style="?android:attr/progressBarStyle"
                android:layout_width="match_parent"
                android:indeterminateDrawable="@drawable/progressbar4"
                android:layout_marginTop="20dp"
                android:layout_height="80dp" />

  

</LinearLayout>

Subscribe to receive free email updates: