ProgressBar - Customizable Segmented ProgressBar, height, margin, and color

[Joejsanz]

Segmented ProgressBar
Configure a progress bar divided into multiple segments,
each with customizable height, margin, and color.

---

InitializeSegmentedProgressBar

Initializes a segmented progress bar within a HorizontalArrangement.

Use true to use gradient colors.

---

SetSegmentHeight

Changes the height of the segments.

---

SetIndividualSegmentHeight

Change the heights of multiple specific segments and allow you to set the position (bottom, top, or centered).

---

SetSegmentMargin

Changes the margin between segments in the progress bar.

---

TopBottomMargins

Updates the top and bottom margins.

---

SetSegmentColor

Changes the color of one or more specific segments and a list of segment indices

---

SetSegmentCornerRadii

---

ResetTotalProgress

Resets the total progress to 0.

---

SetTotalProgress

Sets the total progress in percentage (0 to 100).

---

GetTotalProgress

Gets the total progress.

---

TotalProgressComplete

Triggered when the total progress of the segmented progress bar reaches 100%.

---

Update v1.4 Mar 13, 2025.

• The index started at 0; now it starts at 1.
• A margin was applied to the end of the last segment, which caused it to be uncentered in the arrangement. The margin to the right of the last segment has been removed.
• The SetSegmentProgressImage function has been removed, as that function is better implemented in another extension I made.
  • 
• Support for AI2 color blocks has been added; hexadecimal color blocks are still available.
• Helper blocks have been added for shapeType in the InitializeSegmentedProgressBar function.
• Two functions called SetIndividualSegmentHeight and TopBottomMargins have been added.

---

aiaProject:
ProgressBar.aia (23.5 KB)

Extension v1.4
joejsanz.joedevprogressbar.aix (17.4 KB)

---

minSdk: 21
maxSdk: 34
JDK: 11

Built using: FAST-CLI v2.6.0

---

Thanks.

[husnain]

Thanks for your contribution.

[Joejsanz]

Thank you so much @husnain

[Gabriel_Egea]

Thanks for sharing this extension, I'm going to try it!

[Joejsanz]

Thank you very much @Gabriel_Egea , I have some extra features for the next update, I hope you like this extension, any questions, let me know.

[Joejsanz]

Update
Version 1.1

[TIMAI2]

Very good

Can it be done with a background image? See here

[Joejsanz]

Thank you so much @TIMAI2
I don't know how to do it yet, but I'll look into it.

[Joejsanz]

Update...

@Joejsanz

Update, version 1.2

You can set radius to the bar segments
(Does not apply to the 1-segment bar).

---

Set an image as progress in the selected index.
You can select the image from gallery or the best option, upload it to the app assets and select it from there.

screenshots

[Gabriel_Egea]

Great update, thanks a lot for this extension. It's great.

[Gabriel_Egea]

Do you think it is also possible to configure a gradient in the block that configures the .SetSegmentColor? Thanks again

[Joejsanz]

Thank you so much @Gabriel_Egea

I think so, as soon as I have that done I will upload the update.

[Joejsanz]

Update
Version 1.3

@Joejsanz

Update Version 1.3

The SetSegmentColor function now accepts a list of colors and applies a gradient if useGradient is set to true.

screenshots

@Gabriel_Egea

[Gabriel_Egea]

Wow super fast, thanks a lot for this change!

[Gabriel_Egea]

I was trying the extension there and it seems that there is an error, the segmentIndex value stopped accepting the lists, it would not let me make a list with the segments. Is this the case now? Should I make a block for each segment? Thanks

[Joejsanz]

It's true, it's a single index, in a few more hours I will solve that detail, I was doing tests and I missed it.

[Gabriel_Egea]

Thank you very much, it is not a serious problem because you can use one block for each segment, it is more uncomfortable but it could be used that way. Thanks again for your work.

[Joejsanz]

@Gabriel_Egea

I have updated the Version 1.3 extension so that the SetSegmentColor function accepts a list of indices.

@Joejsanz

Update Version 1.3

[Gabriel_Egea]

@Joejsanz, again thank you very much

[Gabriel_Egea]

@Joejsanz Query, how are you getting the gradient to pass through the segments?

In my case, the gradients are generated within the segment individually. What configuration should I use for the gradient to be generated as in the attached gif?

This is how my gradient looks with the following configuration

But if you look at the gradient it is generated in each segment individually