MFXProgressBar offset bar location after indeterminate

[mica-alex]

Hello,

I have noticed a bug that occurs in certain scenarios with the MFXProgressBar:

When the progress bar is set to indeterminate, then changed to a standard progress value, the location of the bar is sometimes not reset and the standard progress is offset as a result. This does not happen if the progress bar is never set to indeterminate.

2021-06-08.09-35-17_Trim.mp4

[palexdev]

I noticed this bug too. But then disappeared, so I hoped to not see it anymore. I don't have any idea on how to solve it honestly because the skin is copied from JFoenix.
I will investigate it further and see what I can discover

[mica-alex]

I took a quick look at the skin code and wasn't too sure where the issue is either.

That being said, I was only using the indeterminate state as a fallback in case my progress manager for some reason did not work. I've just changed to use 0.0 progress now, and I don't see the issue anymore.

[mica-alex]

Hey @palexdev,

It looks like the issue has to do with the scaleX property on the bar1 object in the skin.

I tested locally and was able to see the issue go away by doing one of the following:

Solution 1: Change the 0 index key frame scaleX from 0.7 -> 1.0

MaterialFX/materialfx/src/main/java/io/github/palexdev/materialfx/skins/MFXProgressBarSkin.java

Lines 112 to 116 in 160f7f3

	KeyFrame kf0 = new KeyFrame(Duration.ZERO,
	new KeyValue(bar1.scaleXProperty(), 0.7),
	new KeyValue(bar1.translateXProperty(), -width),
	new KeyValue(bar2.translateXProperty(), -width)
	);

Would become

KeyFrame kf0 = new KeyFrame(Duration.ZERO,
        new KeyValue(bar1.scaleXProperty(), 1.0),
        new KeyValue(bar1.translateXProperty(), -width),
        new KeyValue(bar2.translateXProperty(), -width)
);

Solution 2: Add a call to bar1.setScaleX(1.0); after call to bar1.setTranslateX(0); in else state of MFXProgressBarSkin.java#layoutChildren

MaterialFX/materialfx/src/main/java/io/github/palexdev/materialfx/skins/MFXProgressBarSkin.java

Lines 233 to 234 in 160f7f3

	bar1.setTranslateX(0);
	bar2.setTranslateX(0);

Would become

 bar1.setTranslateX(0);
 bar1.setScaleX(1.0);
 bar2.setTranslateX(0);

[mica-alex]

I did not test the side effects on the animation of intermediate state when using solution 1.

I think the best solution is probably number 2, since that one does not have any change or potential side effect on the existing progress bar animation.

[mica-alex]

I tested this behavior by doing running the following code (messy, I know, but it did what was needed):

and you can see the result initially forces the bug, and then corrects with scaleX=1.0

2021-06-10.11-39-02_Trim.mp4

[palexdev]

Fix is on the way, I'm writing the changelog right now.
I have completely redone the skin, it is much more organized and clear now

[mica-alex]

Awesome, thank you!

[palexdev]

New version released, can you confirm that now everything works properly?

[mica-alex]

Seems good so far -- and the updated progress bar looks good too

[palexdev]

Glad you like it 🙂
I can close the issue then, feel free to reopen it or create new ones if you need anything else