I can think of 2 ways:
- each bar is a simple separate widget (9-slice border (check out the Setting Image States part) if you want the preserve the nice curved corners while stretching the bars)
- create 3 horizontal boxes inside another horizontal box
- widgets have a Size Fill property that dictates how much space (in percent) they take within a container - this will allow you to evenly stretch each of the 3 horizontal boxes which, in turn, can automatically stretch the bars inside them
- you will need a bit of math that produce the correct values
The second method is very similar to the first one but instead of separate widget for each bar, you’d use 1 bar for each of the 3 sections (health, armour, shield) but use a tileable, parametrised material instead.
I’d say the first method is most likely preferable as it would be easier to preserve the shape of the bar if you want them slanted and with nice curved corners. The 2nd one should be somewhat easier to implement but not by much.
Let me know if any of the above makes any sense whatsoever. UMG can be truly daunting.