Thursday, July 2, 2015

How to create "Indeterminate Circular Progress Bar" like "Material Design Progress Bar".

In indeterminate mode, the progress bar shows a cyclic animation without an indication of progress. This mode is used by applications when the length of the task is unknown. The indeterminate progress bar can be either a spinning wheel or a horizontal bar.

Here, I will show you how create spinning wheel progress bar.

This is what you will achieve at the end of this tutorial




What are the steps the steps to achieve this:
Step 1: Copy Java class responsible for creating circular animation i.e. "CircularProgressWheel.java"
Step 2: Copy attrs.xml file in your values folder i.e. res/values/attrs.xml 
Step 3: Use "CircularProgressWheel.java" with fully qualified package name in your xml layout.

That's all you have to do to achieve this:


STEP 1:
You can get the code of "CircularProgressWheel.java" class by Clicking Here

STEP 2:
You can get the code of "attrs.xml" by Clicking Here.

STEP 3:
How to use CircularProgressWheel Class to get it into the action.
Just define in the layout xml files where you want to use it.


For Example:  res/layout/splashscreen.xml

 <LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:wheel="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/fragmentContainer"
    android:gravity="center"
    android:background="#ffe4fcff">
<TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textSize="18sp"
     android:textColor="#5588FF"
     android:text="Loading Please Wait..."/>
 <packageName.CircularProgressWheel
     android:id="@+id/progress_wheel"
     android:layout_width="75dp" 
     android:layout_height="75dp"
     wheel:matProg_barColor="#4CAF50"
     android:layout_marginTop="20dp"
     wheel:matProg_progressIndeterminate="true" />
 </LinearLayout>


Note: You need to replace "packageName"  with your app's "PackageName".


That's All you need to do.

1 comment:

  1. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.|Android Training institute in chennai with placement | Best Android Training in velachery

    ReplyDelete