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)
Here how it works inside, i think here i should make some changes, but i don’t know how.
1 Like
Wouldn’t it be a matter of:
Do tell.
Remove padding? Also ensure to compile.
Yeah, i removed, nothing change
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.
I changed percentage ratio of 3 elements like (0.2,0.6,0.2) but still has an issue with vertical squeez of material