RSS

Gmail like progress bar in Android

16 Jan

progress_bar

Progress bar is pretty simple to implement like what you see in Gmail application.
Follow simple steps below to get it done.

Step 1:
Find progress bar images such as progressbar_indeterminate_holo inside Android Setup\android-sdks\platforms\android-16\data\res\drawable-hdpi and put it inside drawable-hdpi folder

Step 2:
Create progress_bar.xml which includes all sequence images of progressbar_indeterminate_holo.
Example

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myprogress"
    android:oneshot="false" >

    <item
        android:drawable="@drawable/progressbar_indeterminate_holo1"
        android:duration="50"/>
    <item
        android:drawable="@drawable/progressbar_indeterminate_holo2"
        android:duration="50"/>
    <item
        android:drawable="@drawable/progressbar_indeterminate_holo3"
        android:duration="50"/>
    <item
        android:drawable="@drawable/progressbar_indeterminate_holo4"
        android:duration="50"/>
    <item
        android:drawable="@drawable/progressbar_indeterminate_holo5"
        android:duration="50"/>
    <item
        android:drawable="@drawable/progressbar_indeterminate_holo6"
        android:duration="50"/>
    <item
        android:drawable="@drawable/progressbar_indeterminate_holo7"
        android:duration="50"/>
    <item
        android:drawable="@drawable/progressbar_indeterminate_holo8"
        android:duration="50"/>

</animation-list>

Step 3:
Create main.xml layout and set android:src=”@drawable/progress_bar” to ImageView
Example

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/white" >

    <ImageView
        android:id="@+id/imgProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:src="@drawable/progress_bar" />

</LinearLayout>

Step 4:
Create ProgressActivity class and initialize above layout
Example

package com.example.progress;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class ProgressActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		try {
			setContentView(R.layout.main);
			ImageView progress = (ImageView)findViewById(R.id.imgProgress);
			AnimationDrawable frameAnimation = (AnimationDrawable)progress.getDrawable();
			frameAnimation.setCallback(progress);
			frameAnimation.setVisible(true, true);
		} catch (Exception e) {
			e.toString();
		}
	}
}

 

Advertisements
 
3 Comments

Posted by on January 16, 2014 in Android Source Code

 

3 responses to “Gmail like progress bar in Android

  1. Mateusz

    June 12, 2014 at 9:50 AM

    Like a charm πŸ™‚ I have edited images of progress bar that them aren’t having margins now so Progress bar is under Action Bar (it looks like integrated with it :))

     
    • Mateusz

      June 12, 2014 at 10:57 AM

      I modified code:
      try {
      progress = (ImageView) rootView.findViewById(R.id.imgProgress);
      frameAnimation = (AnimationDrawable) progress.getDrawable();
      frameAnimation.setCallback(progress);
      frameAnimation.setVisible(true, true);

      progress.post(new Runnable() {
      public void run() {
      frameAnimation.start();
      }
      });
      } catch (Exception e) {
      e.toString();
      }
      so it works on Android >=2.2 πŸ™‚

       
      • ali

        October 12, 2014 at 6:12 PM

        guide me too how you did that πŸ™‚

         

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: