Android custom progress bar?

Question

I do not know how to do that. My progress bar should be a cloud shape. Can someone direct me to a book, textbook 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 a custom scroll effect.

The XML format for the custom execution string in this example:

<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 it creates a list of images in the 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 it starts Thread, which sleeps for 0.3 seconds and calls the handler using handler.sendEmptyMessage(0); , and finally in Handler it does the rest of the image work:

 @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 consider here and here .

Answer 2

I ended up using the Custom Progress Bar with Round Corners as the basis for mine, which Harry Joy recommended. However, if you want to use the same functionality as the Android SDK version, intermediate from the ProgressBar class I had to make some changes. The changes I made allow you to define an intermediate resource and animate it.

Be sure to follow the instructions here , but replace the RoundProgress class as follows:

 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 simply call .setIntermediate (true or false) when required.