Revision history [back]

One effective method for designing an Android view that resembles a progress bar but allows for dispersed progress placement is by using a custom view that extends the View class. Here are the steps:

1. Define a custom attribute for the view that specifies where the progress should be placed (e.g., start, middle, end).

2. Override the onDraw() method to draw the progress bar and the progress indicator in the desired position based on the custom attribute.

3. Provide methods for setting the progress value and updating the view.

4. Add any additional customization options as needed (e.g., color, size, animation).

5. Test the view thoroughly to ensure it works as expected.

Here is an example of how the code might look:

public class CustomProgressBar extends View {
    private int mProgressBarColor;
    private int mProgressIndicatorColor;
    private int mProgressValue;
    private String mProgressPosition;

    public CustomProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, 
          R.styleable.CustomProgressBar, 0, 0);
        try {
            mProgressBarColor = a.getColor(R.styleable.CustomProgressBar_progressBarColor, 
              Color.BLUE);
            mProgressIndicatorColor = a.getColor(R.styleable.CustomProgressBar_progressIndicatorColor,
              Color.RED);
            mProgressValue = a.getInt(R.styleable.CustomProgressBar_progressValue, 0);
            mProgressPosition = a.getString(R.styleable.CustomProgressBar_progressPosition);
        } finally {
            a.recycle();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        Paint progressBarPaint = new Paint();
        Paint progressIndicatorPaint = new Paint();

        progressBarPaint.setColor(mProgressBarColor);
        progressIndicatorPaint.setColor(mProgressIndicatorColor);

        float progressIndicatorPosition = calculateProgressIndicatorPosition(width);

        canvas.drawRect(0, height/2, width, height/2 + 10, progressBarPaint);
        canvas.drawCircle(progressIndicatorPosition, height/2, 10, progressIndicatorPaint);
    }

    private float calculateProgressIndicatorPosition(int width) {
        if (mProgressPosition.equals("start")) {
            return 0 + 10; // left side of the view
        } else if (mProgressPosition.equals("middle")) {
            return width/2; // middle of the view
        } else {
            return width - 10; // right side of the view
        }
    }

    public void setProgressValue(int progressValue) {
        mProgressValue = progressValue;
        invalidate();
    }

    public void setProgressIndicatorColor(int color) {
        mProgressIndicatorColor = color;
        invalidate();
    }

    // add more customization methods as needed

}