Bg image issue - cn1 - codenameone

Question

I'm stuck in a simple animation code which has a no. of components in the container moves from top of the screen to a specific position. I have a bg image set in the UIID "AttempTitle" in the container consisting all the component. The problem is while all the components moves from top, the bg img is not seen until it reaches the specific position and it appears at last. How can I make the bg Image move along with the components.
I got another problem while doing it. I have a bg image in the title container. While the animation is taking place, the green bg image of the title container disappears for a second too. How that happened, I cannot figure out.
I have a video uploaded in the youtube incase you didn't understand the problem have a look at it.
https://youtu.be/6Or26wxnzUY
Code:
setLayout(new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER));
attemptIcon = theme.getImage("attemptIcon.png");
attempt1 = new Label(attemptIcon);
attempt2 = new Label(attemptIcon);
attempt3 = new Label(attemptIcon);
attempt4 = new Label(attemptIcon);
attempt5 = new Label(attemptIcon);
attemptContainer = BoxLayout.encloseX(attempt1, attempt2, attempt3, attempt4, attempt5);
Container titleContainer = new Container(new GridLayout(1));
titleContainer.add(FlowLayout.encloseCenterMiddle(attemptContainer));
add(BorderLayout.NORTH, titleContainer);
attemptContainer.getParent().setUIID("AttempTitle");
attemptContainer.getParent().setPreferredW(screenWidth / 3);
questionAnswerContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
Label a = new Label("questin answer");
questionAnswerContainer.add(a);
titleDialog = new Label("Yuppie!");
body1 = new Label("Let’s celebrate");
body2 = new Label("with another");
body3 = new Label("drink");
Button ok = new Button(theme.getImage("playIcon.png"));
ok.addActionListener(e -> {
new Test(sm).show();
});
dialogContainer = (BoxLayout.encloseY(titleDialog, body1, body2, body3, ok));
dialogContainer.getAllStyles().setBgImage(theme.getImage("yuppieDialog.png"));
add(BorderLayout.CENTER, LayeredLayout.encloseIn(questionAnswerContainer, FlowLayout.encloseCenterMiddle(dialogContainer)));
titleDialog.getAllStyles().setMarginTop((dialogContainer.getPreferredW() / 3) + 30);
dialogContainer.getParent().setVisible(false);//using setHidden(true) gives same issue
Runnable r = new Runnable() {
public void run() {
checkIfCorrect(Test.this);
}
};
if (timer == null) {
timer = new UITimer(r);
}
if (timer != null) {
timer.schedule(5000, false, Test.this); //4 seconds
}
revalidate();
checkIfCorrect method:
public void checkIfCorrect(Form f) {
dialogContainer.getParent().setY(-Display.getInstance().getDisplayHeight());
dialogContainer.getParent().setVisible(true);
f.animateHierarchyAndWait(1200);
f.setTransitionInAnimator(null);
}
toolbar code:
Toolbar toolbar = new Toolbar();
form.setToolbar(toolbar);
Container containerTitle = new Container(new BorderLayout());
toolbar.setTitleComponent(LayeredLayout.encloseIn(containerTitle, FlowLayout.encloseCenter(ruslanLogo)))
//there r 4 buttons inside containerTitle container

Answer 1

You should use animateLayout instead of animateHierarchy start by setting the element you want as visible false then show. Then set it's Y to the right location set it to visible and do the animate layout.
The problem is that the background sizing/position of the Container doesn't work properly as a result of the animation.