This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

1. Animations - Part II
Layout animations are some of the most important yet easy to use animations in Codename One. They make the application flow feel reactive and responsive.

2. Layout Animation
© Codename One 2017 all rights reserved
✦Layout animations rely on the behavior of Codename
One which doesn’t implicitly “reflow” components
✦Instead of calling revalidate() we can call
animateLayout(int) or equivalent to animate the
components to their final correct place/size
✦This is useful for smooth UI’s where components
should “flow” into place rather than jump into it
At the core of layout animations is the concept of explicit reflow. In Codename One layouts determine the position of components. That means that if you add a new
component it will be positioned by the layout, however there is a big caveat. If you add the component after the form was shown it won’t position itself unless you do
something like rotate the device which implicitly lays out the component. You need to ask for layout explicitly. You can invoke revalidate to force layout, this is valuable for
cases where you can add multiple components. In those cases the layout logic can happen only once and can be much simpler.
Layout animation works by animating the validate effect. It takes the components from their previously invalid or incorrect positions and moves them into their real final
position. Normally when you add a component you won’t set a size or position to it as those will be determined by the layout manager, but with layout animations this
can be useful as you can position a component explicitly and then it will animate from that position.
This allows you to create a flow in the UI so components “settle” into place, this serves to draw attention to changes in the UI in most cases

3. Unlayout Animations
© Codename One 2017 all rights reserved
✦ animateUnlayout() and equivalent methods do the
opposite, they move an element to an “illegal” place from
the valid position thru an animation
✦ This is useful if we want to remove a component, we can
move it offscreen then call animateUnlayoutAndWait() to
animate that process then remove the component
✦ It’s assumed that animateUnlayout will be followed by code
to correct the UI after it completes
Animate unlayout is the exact opposite or evil twin of the animate layout method. Animate layout takes layout in an invalid state and returns it to normal layout with an
animation. Animate unlayout takes layout in an invalid state, returns it to normal instantly then animates it into the invalid state.
So if we want to move a component out of the form with an animation we can set its X position to the screen width. If we call animate layout we will get an effect of the
component sliding into the screen from right to left. If we invoke animate unlayout we get the effect of the component sliding out of the screen.
When we run animateLayout we do something that’s effectively the equivalent of revalidate() so the UI is valid once we finished. With animate unlayout the situation is the
exact opposite. The UI becomes invalid when we are done which means a typical animateUnlayout will be followed by an animate layout or revalidate. The purpose of
animateUnlayout is strictly as a visual effect unlike the its animateLayout counterpart

4. Variations
© Codename One 2017 all rights reserved
✦ There are several variations of both animate layout &
unlayout
✦ AndWait versions use invokeAndBlock, they are useful for
chaining effects e.g. unlayout and wait followed by layout
✦ Fade versions of the method also add a fade in or fade out
effect respectively
✦ Hierarchy animates a full hierarchy, this is a complicated
proposition and should normally be avoided
There are a few varieties and a bit of noise but layout animations generally fall into the two categories I mentioned
AndWait versions of the methods use invoke and block to help you serialize calls to layout and unlayout. This is useful when you want to create an elaborate effect with
one piece relying on the completion of the next piece
Fade versions of the layout methods can fade components in or out. For unlayout components are faded out and for layout they are faded in. This allows components to
materialize or dematerialize gracefully
The hierarchy related animate methods such as animateHierarchy are very problematic. They recurse into a hierarchy and try to layout all of the elements within but this is
tricky as you can run into a lot of edge cases such as a component that moves from outside the clipping bounds of its parent container.

5. © Codename One 2017 all rights reserved
In this video I activated slow motion mode which is very useful for debugging animations but for some reason the unlayout effect wasn’t slowed down so you can only
see the deletion briefly and then the animate layout that follows is slow. Lets go over the code that creates this animation

6. CheckoutForm
quantityButton.addActionListener(e -> {
String sel = quantityButton.getSelectedString();
if(sel == null) {
return;
}
if(sel.equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayoutAndWait(200);
Restaurant.getInstance().cart.get().
dishQuantity.remove(di);
updatePrice();
});
} else {
This entire animation is done in 5 lines of code. Lets go over them one by one. First we set the deleted dish container to the display width which pushes it out of the
visible range with a setX call.

7. CheckoutForm
quantityButton.addActionListener(e -> {
String sel = quantityButton.getSelectedString();
if(sel == null) {
return;
}
if(sel.equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayoutAndWait(200);
Restaurant.getInstance().cart.get().
dishQuantity.remove(di);
updatePrice();
});
} else {
We now perform animate unlayout and wait. We maintain full opacity which corresponds to the second argument. This animates the removal of the dish from the screen
by sliding it to the right.

8. CheckoutForm
quantityButton.addActionListener(e -> {
String sel = quantityButton.getSelectedString();
if(sel == null) {
return;
}
if(sel.equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayoutAndWait(200);
Restaurant.getInstance().cart.get().
dishQuantity.remove(di);
updatePrice();
});
} else {
We next remove the component that we animated out. This is important as we are currently in an invalid state but the component is still in the hierarchy.

9. CheckoutForm
quantityButton.addActionListener(e -> {
String sel = quantityButton.getSelectedString();
if(sel == null) {
return;
}
if(sel.equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayoutAndWait(200);
Restaurant.getInstance().cart.get().
dishQuantity.remove(di);
updatePrice();
});
} else {
Now we can animate the other element into their new place, since the dish was removed there is more available space and we can use it by shifting everything into the
new location