Best way to create segmented Progress Bar?

Question

I am building an Android application and I want to create a progress bar very much like what is seen at the bottom of the MIUI File Explorer

There is no completely obvious solution as far as I can tell. So far what I can think of is

• Layering many progress bars with transparent backgrounds on top of one another
• Extend the Progress bar class to take multiple values and rewrite the onDraw method

I think the first option would be far too slow and inefficient but the second option might be overly complex but is definitely the better solution.

Is there any better way of going about this?

Answer 1

you should make a custom view for it. Example:

final Paint blue = new Paint();
blue.setColor(Color.BLUE);

View progressBar = new View(getActivity()){

        protected void onDraw(android.graphics.Canvas canvas) {

            canvas.drawRect(0,0,getWidth()*progressPecentFirst,getHeight(),blue);
            blue.setColor(Color.RED);
            canvas.drawRect(0,0,getWidth()*progressPecentSecond,getHeight(),blue);
            //Repeat this
        };
    };
parentLayout.addView(progressBar);

Answer 2

One option would be to not make it a traditional progress bar at all. In one of my personal apps I needed a display similar to a circular progress bar that had segments of varying colours.

Might I suggest you start by drawing a filled rectangle from 0B to 14.9GB in the colour for music, from 939MB to 14.9GB in the colour for Videos, from 3.52GB to 14.9GB in the colour for pictures, and so on.

You can then just draw the rounded ends in the background colour as a mask.

This would be pretty quick since you're only drawing graphics primitives and you can extend it as much as you want.

The only slight drawback would be that you'd have to implement much of the logic yourself, but that's a small price to pay in my opinion.

Answer 3

For someone else who can help, I leave an example on my github based on @Zelleriation answer. The progress bar.

This adapts to what I needed, feel free to modify it to yours.

<io.ekrlaz.segmentedprogressbar.view.SegmentProgressBar
            android:id="@+id/progress"
            android:layout_width="match_parent"
            android:layout_height="10dp"
            app:cornerRadius="16dp"
            />

And in your activity.

val binding = ActivityMainBinding.inflate(layoutInflater)

 binding.progress.setMax(100F)
        binding.progress.setPrimaryProgress(40F)
        binding.progress.setSecondaryProgress(10F)
        binding.progress.setThirdProgress(40F)

Link: https://github.com/EKRLAZ/segmented-progressbar