I created UI material with segmented progress bar based on what find on the internet.
And it works pretty well in preview. (Change count of segments, stroke width… etc.)
But if i try to fill vertical box with that material (as an image) progress bar will be squeezed. I suppose material has some bounds? How i should properly crop to progress bar borders? (Yes, i try to change image size with no success)
Makes sense. It’s because we need to handle it slightly differently due to the hierarchy (which is more than fine!):
set the 1st image to Auto
set the 2nd image to Fill
set text to Fill
You’ll get a number next to Fill. It’s a percentage ratio of how much space this elements takes up. Eyeballing it:
set the 2nd image to 0.7
set the text to 0.3
You could even to this for all 3 elements. Ideally it should all add to 1 for clarity.
20% for the image
60% for the bar
20% for the text
Adjust as needed, and then add padding.
One more thing - it looks like you copy a lot of elements here:
Perhaps this:
Should be made into one widget, you could then place multiple times. And if you ever need to adjust it, you only need to do it once, rather then 9 times across 5 menus… Consider it.