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.

Answer 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.