I want to make ProgressBar which consists of 5 stars. The background of these stars is gray and with increasing progress these stars should be filled with a golden color. So far I have managed to simply draw 5 stars of the same color.

Now the code looks like this:

 public class StartView extends ViewGroup { private int progress = 0; private Paint paint = new Paint(); private Path path = new Path(); public StartView(Context context) { super(context); init(); } public StartView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public StartView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } public void init() { paint.setColor(Color.WHITE); paint.setAntiAlias(true); paint.setStyle(Paint.Style.STROKE); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { } @Override protected void onDraw(Canvas canvas) { float mid = getWidth() / 2; float min = Math.min(getWidth(), getHeight()); float fat = min / 17; float half = min / 2; float margin = half/2; mid = mid - half; float left = mid - (half+margin); float start = left - (half+margin); float right = mid +(half+margin); float end = right + (half+margin); //mid drawStart(canvas,fat,mid,half); //to left mid drawStart(canvas,fat,left,half); drawStart(canvas,fat,start,half); //to right mid drawStart(canvas,fat,right,half); drawStart(canvas,fat,end,half); super.onDraw(canvas); } private void drawStart(Canvas canvas, float fat, float mid , float half){ paint.setStrokeWidth(fat); paint.setStyle(Paint.Style.FILL); paint.setColor(ContextCompat.getColor(getContext(),R.color.hintIconColorCommon)); // top left path.moveTo(mid + half * 0.5f, half * 0.84f); // top right path.lineTo(mid + half * 1.5f, half * 0.84f); // bottom left path.lineTo(mid + half * 0.68f, half * 1.45f); // top tip path.lineTo(mid + half * 1.0f, half * 0.5f); // bottom right path.lineTo(mid + half * 1.32f, half * 1.45f); // top left path.lineTo(mid + half * 0.5f, half * 0.84f); path.close(); canvas.drawPath(path, paint); } }

and the result is this:

enter image description here

Here is an example of what I need to get:

enter image description here

I have an assumption that you can simply draw the progress (golden color) as a rectangle, and on top of it are transparent stars, I think we should dig somewhere in the direction of the masks, but this is not certain.

In general, the question is how can I implement the functionality I need?

  • and you tried to just put down your drawable for progress? - DeKaNszn
  • I do not fully understand how to realize what you are talking about, considering that the stars can be filled only partially, if you have an idea how to do this, you can issue an answer, in principle, this option suits me, because he is likely to get less costly. - Kirill Stoianov

1 answer 1

A gray background, on top of it is the ProgressBar of gold color, on top of it is an SVG image of white color with cutouts for the stars. All this in FrameLayout (You can read about it here ).

  • uzhos .. easier way? - Kirill Stoianov
  • What is the difficulty? In fact, this is a normal ProgressBar with a gray background and yellow color. - histrionis
  • I do not say that it is difficult, I meant that instead of one component there are three. - Kirill Stoianov