Custom Progress Bar in Android? [closed]

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.

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.

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.