Custom Progress Bar in Android?

Question

I havent got a clue to how to do this. My progress bar should be the shape of cloud. Can someone direct me to a book, tutorial or just give the right step by step method?

Thank you for your time.

Solution 1

As shown here you can use image views to get custom scroll bar like effect.

The layout XML for custom progress bar in that example is:

<RelativeLayout android:id="@+id/RelativeLayout01"
    android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center" android:layout_height="wrap_content"
    android:paddingLeft="30sp" android:paddingRight="30sp">
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:src="@drawable/progress_1"
        android:id="@+id/imgOne" android:tag="1"></ImageView>
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:src="@drawable/progress_2"
        android:id="@+id/imgTwo" android:layout_toRightOf="@id/imgOne"
        android:tag="2"></ImageView>
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:src="@drawable/progress_3"
        android:id="@+id/imgThree" android:layout_toRightOf="@id/imgTwo"
        android:tag="3"></ImageView>
    <TextView android:id="@+id/TextView01" android:layout_height="wrap_content"
        android:layout_toRightOf="@id/imgThree" android:layout_width="wrap_content"
        android:layout_alignTop="@id/imgThree" android:layout_alignBottom="@id/imgThree"
        android:gravity="bottom" android:text="Please Wait..."></TextView>
</RelativeLayout>

And then he creates a list of images in class file as:

/**
 * Loads the layout and sets the initial set of images
 */
private void prepareLayout() {
    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.myprogressbar, null);
    addView(view);

    imageHolders = new ArrayList<ImageView>();
    imageHolders.add((ImageView) view.findViewById(R.id.imgOne));
    imageHolders.add((ImageView) view.findViewById(R.id.imgTwo));
    imageHolders.add((ImageView) view.findViewById(R.id.imgThree));

    // Prepare an array list of images to be animated
    images = new ArrayList<String>();

    images.add("progress_1");
    images.add("progress_2");
    images.add("progress_3");
    images.add("progress_4");
    images.add("progress_5");
    images.add("progress_6");
    images.add("progress_7");
    images.add("progress_8");
    images.add("progress_9");
}

Then he starts a Thread that sleeps for 0.3 seconds and calls the handler with handler.sendEmptyMessage(0); and finally in Handler he do the rest of the work of images:

@Override
public void handleMessage(Message msg) {
    int currentImage = 0;
    int nextImage = 0;
    // Logic to change the images
    for (ImageView imageView : imageHolders) {
        currentImage = Integer.parseInt(imageView.getTag().toString());
        if (currentImage < 9) {
            nextImage = currentImage + 1;
        } else {
            nextImage = 1;
        }
        imageView.setTag("" + nextImage);
        imageView.setImageResource(getResources().getIdentifier(
                images.get(nextImage - 1), "drawable",
                "com.beanie.example"));
    }
    super.handleMessage(msg);
}

Also take a look at here and here.

Solution 2

I ended up using the Custom Progress Bar with Round Corners as a foundation to mine that Harry Joy recommended. However, if you want the same functionality that android's SDK version, such has intermediate from the ProgressBar class I had to make some changes. The changes I have made enable an intermediate drawable to be defined and animated.

Make sure you follow the instructions here, but replace the RoundProgress class with this:

public class RoundProgress extends RelativeLayout {
private ImageView progressDrawableImageView;
private ImageView trackDrawableImageView;
private ImageView backGroundImageView;
private double max = 100;
private AttributeSet attrs2 ;
private Transformation mTransformation;
private AlphaAnimation mAnimation;
private int mBehavior;
private int mDuration;
private Interpolator mInterpolator;
private static Context ctx;
private int bgResource;

public int getMax() {
    Double d = new Double(max);
    return d.intValue();
}

public double getMaxDouble() {
    return max;
}

public void setMax(int max) {
    Integer maxInt = new Integer(max);
    maxInt.doubleValue();
    this.max = max;
}

public void setMax(double max) {
    this.max = max;
}

public RoundProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.round_progress, this);
    setup(context, attrs);
}

protected void setup(Context context, AttributeSet attrs)
{
    attrs2 = attrs;
    ctx = context;
    TypedArray a = context.obtainStyledAttributes(attrs,
        R.styleable.RoundProgress);
    //setBackgroundResource(R.drawable.custom_loading_bg);
    backGroundImageView = (ImageView) findViewById(R.id.background_image_view);
    backGroundImageView.setBackgroundResource(R.drawable.custom_loading_bg);


    final String xmlns="http://schemas.android.com/apk/res/com.digiphd.prospec";
   bgResource = attrs.getAttributeResourceValue(xmlns,
            "progressDrawable", 0);
    progressDrawableImageView = (ImageView) findViewById(
            R.id.progress_drawable_image_view);

    progressDrawableImageView.setBackgroundResource(bgResource);

    int trackResource = attrs.getAttributeResourceValue(xmlns, "track", 0);
    trackDrawableImageView = (ImageView) findViewById(R.id.track_image_view);
    trackDrawableImageView.setBackgroundResource(trackResource);

    int progress = attrs.getAttributeIntValue(xmlns, "progress", 0);
    setProgress(progress);
    int max = attrs.getAttributeIntValue(xmlns, "max", 100);
    setMax(max);

    int numTicks = attrs.getAttributeIntValue(xmlns, "numTicks", 0);

    a.recycle();

    ProgressBarOutline outline = new ProgressBarOutline(context);
    //addView(outline);


}

public void setProgress(Integer value)
{
    setProgress((double) value);
}

public void setProgress(double value) {
    ClipDrawable drawable = (ClipDrawable)
            progressDrawableImageView.getBackground();
    double percent = (double) value/ (double)max;
    int level = (int)Math.floor(percent*10000);

    drawable.setLevel(level);
}

public void setIntermediate(boolean t)
{
   if(t){
       progressDrawableImageView.setBackgroundResource(R.drawable.custom_intermediate_bg);
       startAnimation();
   }else{
       progressDrawableImageView.clearAnimation();
       progressDrawableImageView.setBackgroundResource(bgResource);

   }
}

/**
 * <p>Start the indeterminate progress animation.</p>
 */
void startAnimation() {
    int visibility = getVisibility();
    if (visibility != VISIBLE) {
        return;
    }
    Log.d("INTERMEDIATE","ANIMATION START!");
    mDuration = 1000;

        if (mInterpolator == null) {
            mInterpolator = new LinearInterpolator();
        }

        mTransformation = new Transformation();
        mAnimation = new AlphaAnimation(0.0f, 1.0f);
        mAnimation.setRepeatMode(Animation.REVERSE);
        mAnimation.setRepeatCount(Animation.INFINITE);
        mAnimation.setDuration(mDuration);
        mAnimation.setInterpolator(mInterpolator);
        mAnimation.setStartTime(Animation.START_ON_FIRST_FRAME);
        progressDrawableImageView.startAnimation(mAnimation);


}
}

Now in your activity, you can just call .setIntermediate(true or false) when required.

Comments

[JehandadK]

You made my day. Exactly what I needed.