Create custom bar with 5 different colors

Question

I want to create custom view for displaying 5 different colors as attached image:

Does anyone know how to implement above view?

Thanks.

Answer 1

You can do this by using custom Seekbar by setting custom Drawable to it. Refer this example for that.

ProgressItem.java

public class ProgressItem {

   public int color;
   public float progressItemPercentage;
}

CustomSeekBar.java

int progressBarWidth = getWidth();
int progressBarHeight = getHeight();
int thumboffset = getThumbOffset();
int lastProgressX = 0;
int progressItemWidth, progressItemRight;
for (int i = 0; i < mProgressItemsList.size(); i++) {
    ProgressItem progressItem = mProgressItemsList.get(i);
    Paint progressPaint = new Paint();
    progressPaint.setColor(getResources().getColor(progressItem.color));

    progressItemWidth = (int) (progressItem.progressItemPercentage
            * progressBarWidth / 100);

    progressItemRight = lastProgressX + progressItemWidth;

    // for last item give right of the progress item to width of the
    // progress bar
    if (i == mProgressItemsList.size() - 1
            && progressItemRight != progressBarWidth) {
        progressItemRight = progressBarWidth;
    }
    Rect progressRect = new Rect();
    progressRect.set(lastProgressX, thumboffset / 2, progressItemRight,
            progressBarHeight - thumboffset / 2);
    canvas.drawRect(progressRect, progressPaint);
    lastProgressX = progressItemRight;
}
super.onDraw(canvas);
}

activity_main.xml

<yourpackagename.CustomSeekBar
    android:id="@+id/customSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="0"
    android:progressDrawable="@android:color/transparent"
    android:thumb="@drawable/seek_thumb_normal"
    android:thumbOffset="12dp" />

MainActivity.java

private CustomSeekBar seekbar;
private float totalSpan = 1500;
private float redSpan = 200;
private float blueSpan = 300;
private float greenSpan = 400;
private float yellowSpan = 150;
private float darkGreySpan;
private ArrayList<ProgressItem> progressItemList;
private ProgressItem mProgressItem;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
seekbar = ((CustomSeekBar) findViewById(R.id.customSeekBar));
initDataToSeekbar();
}

private void initDataToSeekbar() {
progressItemList = new ArrayList<ProgressItem>();
// red span
mProgressItem = new ProgressItem();
mProgressItem.progressItemPercentage = ((redSpan / totalSpan) * 100);
mProgressItem.color = R.color.red;
progressItemList.add(mProgressItem);
// blue span
mProgressItem = new ProgressItem();
mProgressItem.progressItemPercentage = (blueSpan / totalSpan) * 100;
mProgressItem.color = R.color.blue;
progressItemList.add(mProgressItem);
// green span
mProgressItem = new ProgressItem();
mProgressItem.progressItemPercentage = (greenSpan / totalSpan) * 100;
mProgressItem.color = R.color.green;
progressItemList.add(mProgressItem);
// yellow span
mProgressItem = new ProgressItem();
mProgressItem.progressItemPercentage = (yellowSpan / totalSpan) * 100;
mProgressItem.color = R.color.yellow;
progressItemList.add(mProgressItem);
// greyspan
mProgressItem = new ProgressItem();
mProgressItem.progressItemPercentage = (darkGreySpan / totalSpan) * 100;
mProgressItem.color = R.color.grey;
progressItemList.add(mProgressItem);

seekbar.initData(progressItemList);
seekbar.invalidate();
}