6 Mar
2011

ImageView with ProgressDialog Android Example

It is difficult to put a default Progress dialog as a place holder for the image when a Image is Requested from the server.

Start with a custom view
Write a class
public class RemoteImageView extends ImageView

Overide the onDraw() method

@Override
	protected void onDraw(android.graphics.Canvas canvas) {
		canvas.setViewport(getMeasuredWidth(), getMeasuredHeight());
		if (bitmap == null && (bitmapId == 0)) {
			if (loadingImageIndex >= 24) {
				loadingImageIndex = 0;
			} else {
				loadingImageIndex++;
			}
			if (spinner == null) {
				spinner = new ImageSpinner(context, getMeasuredHeight(),
						getMeasuredWidth());
				imageHeight = getMeasuredHeight();
				imageWidth = getMeasuredWidth();
			}
			if ((drawLoadingImage == true)) {
			//	 System.out.println("in draw of RemoteImageView - arc index-"+loadingImageIndex);
				spinner.drawSpinner(canvas, paint, loadingImageIndex);
				drawLoadingImage = false;
			}
		} else if (bitmapId != 0&&bitmap==null) {
			BitmapFactory.Options op = new BitmapFactory.Options();
			op.outHeight = getMeasuredHeight();
			op.outHeight = getMeasuredWidth();
			canvas.drawBitmap(BitmapFactory.decodeResource(
					context.getResources(), bitmapId,op), null, new Rect(
					0 , 0 ,
					(int) getMeasuredWidth(),
					(int) getMeasuredHeight()), null);

		} else {
			canvas.drawBitmap(bitmap, null, new Rect(0,
					0 , (int) getMeasuredWidth()
							, (int) getMeasuredHeight()
							), null);
		}
};

Here is how the Progress Dialog Implemented

public class ImageSpinner {
	private Context mContext = null;
	private int imageHeight = 30 ;
	private int imageWidth = 30 ;
	private float outerPadding = 5 ;
	private float circleThickness = 5f;
	private float circleCenterX =0;
	private float circleCenterY =0;
	private float outerCircleRadius = 0;
	private int backgroundColor = 0;
	private int circleColor = 0;
	private int circleArcColor = 0;
	private int circleArcColorDark = 0;
	float tempPadding =0;
	public ImageSpinner(Context context,int height,int width) {
		mContext = context;
		if(imageHeight>0)
		imageHeight = height;
		if(imageWidth>0)
		imageWidth = width;

		setup();
	}
	public void setColors(int backgroudColorId,int circleColorId,int circleDarkColorId ){
		if(backgroudColorId!=0){
			this.backgroundColor = mContext.getResources().getColor(backgroudColorId);
		}
		if(backgroudColorId!=0){
			this.circleColor = mContext.getResources().getColor(circleColorId);
		}
		if(backgroudColorId!=0){
			this.circleArcColor = mContext.getResources().getColor(circleDarkColorId);
		}
	}
	private void setup(){
		circleCenterX = imageWidth / 2; // also bigger
		circleCenterY = imageHeight / 2; // also bigger
		System.out.println("width = "+imageWidth+ " height="+imageHeight);
		// circle
		// radius
		outerCircleRadius = 15.0f; //default value
		if(imageHeight>=imageWidth){
			outerPadding = (imageWidth/6);
			tempPadding=0;
			outerCircleRadius= imageWidth / 2 -outerPadding;
		}else{
			outerPadding = (imageHeight/6);
			tempPadding = 0;
			outerCircleRadius= imageHeight / 2 -outerPadding;
		}

		circleThickness=outerPadding*2/3;
		backgroundColor = mContext.getResources().getColor(
				R.color.backgroundColorDark);
		circleColor = mContext.getResources().getColor(
				R.color.spinnerBackground);
		circleArcColor =  mContext.getResources().getColor(
				R.color.spinnerLightGrey);
		circleArcColorDark =  mContext.getResources().getColor(
				R.color.spinnerDarkGrey);
	}
	public void drawSpinner(Canvas canvas,Paint paint,int loadingImageIndex) {

		//System.out.println("imagewidth = "+imageWidth+ " imageHeight="+imageHeight);
		paint.setColor(backgroundColor);
		canvas.drawRect(new Rect(0, 0, imageWidth, imageHeight), paint);
		paint.setColor(circleColor);
		canvas.drawCircle(circleCenterX, circleCenterY, outerCircleRadius, paint);
		paint.setColor(backgroundColor);

		canvas.drawCircle(circleCenterX, circleCenterY,
				(outerCircleRadius - circleThickness), paint);
		paint.setStrokeWidth(4);

		canvas.drawLine(0, 0, imageWidth, imageHeight, paint);

		canvas.drawLine(0, circleCenterY, imageWidth, circleCenterY, paint);

		canvas.drawLine(0, imageHeight, imageWidth, 0, paint);

		canvas.drawLine(circleCenterX, 0, circleCenterX, imageHeight, paint);

		paint.setColor(circleArcColor);

		canvas.drawArc(new RectF(outerPadding, circleCenterY-outerCircleRadius, imageHeight-outerPadding, circleCenterY+outerCircleRadius),
				15 * loadingImageIndex, 60, true, paint);
		paint.setColor(circleArcColorDark);
		canvas.drawArc(new RectF(outerPadding+tempPadding, circleCenterY-outerCircleRadius, imageHeight-outerPadding, circleCenterY+outerCircleRadius),
				(15 * loadingImageIndex)+40, 20, true, paint);
		paint.setColor(backgroundColor);
		canvas.drawArc(new RectF(outerPadding+circleThickness, circleCenterY-outerCircleRadius+circleThickness, imageHeight+tempPadding-outerPadding-circleThickness, circleCenterY+outerCircleRadius-circleThickness),
				15 * loadingImageIndex, 60, true, paint);
	}
}

Follow Me!

Follow Me! Follow Me! Follow Me! Follow Me!