Checkbox resize problem

Hi, i’m having a problem trying to make a small animation for a “Mute toggle button”. Im new at Unreal and I don’t have too much experience with UMG.

I’m trying to make an animation with the “Check box” option that when you hover or click it expands 50px.

Example:

As you can see here, the mouse is off the mute button. So its smaller.


Mouse here is on the button. So it make its bigger. Like a tinny animation.

It may look like I already have it done. But when hovering the checkbox takes size from a corner and not from the middle. So when I put the checkbox in the bottom right corner of the viewport, it pops out. I need to find a way that when the checkbox gets big it is from the middle and not the left corner. I have tried changing the check box to the “toggle button” option but the canvas does not allow me to open it and the animation does not run when I increase 50px.

Example:
image

I would like to know if for this animation I should use the Checkbox or toggle box. Or should I even be using these two.

I think the solution is to extend the green canvas but it sticks to the left in the checkbox and doesn’t expand in the togglebox.

Examples:


I would really appreciate the help, thanks for reading.

Yeah lt seems is because the size is not even similar:

In fact, it happens very very often with icons…

Try to make both exact sizes adding marging:
image

Thank you very much for your answer.

I respectfully want to tell you that it is possible that you have not understood my problem or that I have not explained myself well. However I have checked what you have told me and the dimensions seem to be the same in both icons (512x512). What happens is that when I hover over it, the image seems to zoom in from the left side instead of the middle. For which it almost leaves the screen and looks bad. I want the checkbox to magnify from the middle but for that I think I have to open the checkbox canvas and it won’t let me or I don’t know how.

Animation

PD: The examples of the icons were made with an application to capture screen. So one can be bigger than the other or so I think.

I hope my problem is clearer. Thanks again for reading.

What I’d suggest is that you change the Checkbox’s Alignment to X: 0.5 Y 0.5, so the pivot is at the center of the Checkbox.
I’d use Anchors too, if Alignment is not enough.

3 Likes

Thanks! That worked perfectly! But I don’t understand what the “Alignment” option does and why it fixed it. And why when I used the “Toggle Button” variable, the image was not resizing. If you can help me to understand that I will be really happy.

Thanks for taking the time to reading and solving my problem.

Alignment is the pivot ( like ‘origin’ ) of your control.
( X: 0, Y: 0 ) would be Top-Left. That’s why the image expand to Bottom-Right.
( X: 0.5, Y: 0.5 ) would be Center-Center. So your image would expand proportionally.
( X: 1, Y: 1 ) would be Bottom-Right. So your image would expand to Top-Left.

Toggle Button not resizing, it’s hard to know.
Did you change Hovered Image size? Or you’re using Animation?

2 Likes

Thanks for the explanation.

I didn’t understand what you mean with this. But I “animated” it just changing the resize of the check box with this:

Cheers.

Toggle Button not resizing:
It seems to be Unreal Editor problem! When you use Toggle Button it seems that size does not matter, if you use Size To Content the Widget disappears.
It does not work!

2 Likes

Ohh, so it’s a Unreal Bug? I’m not doing nothing wrong? Should I report it in that case?

Cheers.

It’s a bug!
It’s better to report. Thank you!

https://www.unrealengine.com/en-US/support/report-a-bug

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.