How to make a UI like this one?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By SebSharper

Hey there. I want to make a UI that should look like this one
As you can see, there is a black background , on top, there should be an image of a border that is a different node because it will its color dynamically, but it has to be the same size as the background.
In the center, there is an icon that should always be centered and could be scaled, but has to keep the aspect ratio.
Finally, at the bottom there should be a texture progress bar that always expands its width to match the entire square’s width.

I have really had a bad time trying to understand what nodes to use (Panel, TextureRect, NinePatchRect) and how Size Flags work , so I could really need some help here.

:bust_in_silhouette: Reply From: deaton64

Check out this video, it may help.

I was struggling a lot with UI as nothing seemed to resize properly, line up, or stack in the way it should.
I realised it was because I wasn’t setting the minimum size of any nodes I added. As soon as I did, it all worked as I expected.
I find I use a node that works for me. If I want a touch texture button, I shove it inside a control node and that works just fine.