animateLayout on expanding component is not working - codenameone - codenameone

Question

I went through the ratatouilles-restaurant code in blog. It was great. So I wanted to apply it in my app too but everything works fine except the smooth animation when the component is added. What went wrong in my code? Thankyou in advance.
protected void beforeTeamMemberTry(Form f) {
screenWidth = Display.getInstance().getDisplayWidth();
Container mainContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
f.add(mainContainer);
for (int i = 0; i < 3; i++) {
Container memberContainer = new Container(new BorderLayout());
memberContainer.getAllStyles().setMargin(5, 5, 0, 0);
mainContainer.add(memberContainer);
Label icon = new Label(theme.getImage("loginBg.png").scaledWidth(screenWidth / 9));
icon.setName("memberIcon");
zeroPaddingMargin(icon);
memberContainer.add(BorderLayout.WEST, icon);
Container detailsContainer = new Container(new BorderLayout());
Container innerContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
detailsContainer.add(BorderLayout.CENTER, innerContainer);
innerContainer.setUIID("innerclkvjd");
zeroPaddingMargin(innerContainer);
innerContainer.getAllStyles().setPadding(10, 0, 10, 0);
innerContainer.getAllStyles().setAlignment(Component.CENTER);
detailsContainer.setName("detailsContainer");
zeroPaddingMargin(detailsContainer);
detailsContainer.getAllStyles().setAlignment(Component.CENTER);
memberContainer.add(BorderLayout.CENTER, detailsContainer);
Button email = new Button("bbeck#gmai.com");
email.setName("memberEmail");
zeroPaddingMargin(email);
innerContainer.add(email);
Label position = new Label("Senior member".toUpperCase());
position.setName("memberPosition");
zeroPaddingMargin(position);
position.getAllStyles().setFgColor(0xccccc0);
position.getAllStyles().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_SMALL));
innerContainer.add(position);
Label emblemDown = new Label(">");
emblemDown.setUIID("emblemDown");
memberContainer.add(BorderLayout.EAST, emblemDown);
Label emblemUp = new Label("<");
emblemUp.setUIID("emblemUp");
Container descriptionContainer = new Container();
TextArea descriptionTextArea = new TextArea("slkdjfdlk dslkfdslkf jsdfksdl fksd flksd f;lsdkf sldkf sdlfk s;dl fksdl fksd flsd fkds");
descriptionContainer.add(descriptionTextArea);
descriptionTextArea.setName("memberDescription");
zeroPaddingMargin(descriptionTextArea);
descriptionTextArea.setEditable(false);
descriptionTextArea.setGrowByContent(true);
descriptionTextArea.setGrowLimit(5);
memberContainer.setLeadComponent(email);
email.addActionListener(e -> {
if (emblemDown.getParent() != null) {
memberContainer.add(BorderLayout.EAST, emblemUp);
memberContainer.add(BorderLayout.SOUTH, descriptionContainer);
memberContainer.revalidate();
} else {
memberContainer.removeComponent(emblemUp);
memberContainer.add(BorderLayout.EAST, emblemDown);
memberContainer.removeComponent(descriptionContainer);
memberContainer.revalidate();
}
memberContainer.getParent().animateLayout(300);
});
}
}
Details including phn no. (button) above in descriptionContainer but it cannot be clicked:
Container descriptionContainer = new Container();
TextArea descriptionTextArea = new TextArea("slkdjfdlk dslkfdslkf jsdfksdl fksd flksd f;lsdkf sldkf sdlfk");
descriptionContainer.add(descriptionTextArea);
descriptionTextArea.setGrowByContent(true);
descriptionTextArea.setGrowLimit(2);
Container phnContainer = new Container();
descriptionContainer.add(phnContainer);
Label phnLabel = new Label("Phn: ");
Button phn = new Button("9802921323");
phnContainer.add(phnLabel);
phnContainer.add(phn);
phn.addActionListener(e->{
System.out.println("bibek calls");
});

Answer 1

I have rearranged your code and change your animation code to animateLayoutAndWait(300).
Also you shouldn't call both revalidate() and animateLayout().
I also noticed that your animation was applied to the email button.
Finally, apply the animation to the right container, calling memberContainer.getParent().animateLayout(300); won't animate the emblems but the memberContainer placement.
protected void beforeTeamMemberTry(Form f) {
screenWidth = Display.getInstance().getDisplayWidth();
Container mainContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
f.add(mainContainer);
for (int i = 0; i < 3; i++) {
Container memberContainer = new Container(new BorderLayout());
memberContainer.getAllStyles().setMargin(5, 5, 0, 0);
Label icon = new Label(theme.getImage("loginBg.png").scaledWidth(screenWidth / 9));
icon.setName("memberIcon");
zeroPaddingMargin(icon);
memberContainer.add(BorderLayout.WEST, icon);
Container detailsContainer = new Container(new BorderLayout());
Container innerContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
detailsContainer.add(BorderLayout.CENTER, innerContainer);
innerContainer.setUIID("innerclkvjd");
zeroPaddingMargin(innerContainer);
innerContainer.getAllStyles().setPadding(10, 0, 10, 0);
innerContainer.getAllStyles().setAlignment(Component.CENTER);
detailsContainer.setName("detailsContainer");
zeroPaddingMargin(detailsContainer);
detailsContainer.getAllStyles().setAlignment(Component.CENTER);
memberContainer.add(BorderLayout.CENTER, detailsContainer);
Button email = new Button("bbeck#gmai.com");
email.setName("memberEmail");
zeroPaddingMargin(email);
innerContainer.add(email);
Label position = new Label("Senior member".toUpperCase());
position.setName("memberPosition");
zeroPaddingMargin(position);
position.getAllStyles().setFgColor(0xccccc0);
position.getAllStyles().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_PLAIN, Font.SIZE_SMALL));
innerContainer.add(position);
Label emblemDown = new Label(">");
emblemDown.setUIID("emblemDown");
memberContainer.add(BorderLayout.EAST, emblemDown);
Label emblemUp = new Label("<");
emblemUp.setUIID("emblemUp");
Container descriptionContainer = new Container();
TextArea descriptionTextArea = new TextArea("slkdjfdlk dslkfdslkf jsdfksdl fksd flksd f;lsdkf sldkf sdlfk s;dl fksdl fksd flsd fkds");
descriptionContainer.add(descriptionTextArea);
descriptionTextArea.setName("memberDescription");
zeroPaddingMargin(descriptionTextArea);
descriptionTextArea.setEditable(false);
descriptionTextArea.setGrowByContent(true);
descriptionTextArea.setGrowLimit(5);
memberContainer.setLeadComponent(email);
email.addActionListener(e -> {
if (emblemDown.getParent() != null) {
memberContainer.add(BorderLayout.EAST, emblemUp);
memberContainer.add(BorderLayout.SOUTH, descriptionContainer);
} else {
memberContainer.removeComponent(emblemUp);
memberContainer.add(BorderLayout.EAST, emblemDown);
memberContainer.removeComponent(descriptionContainer);
}
memberContainer.animateLayoutAndWait(300);
});
mainContainer.add(memberContainer);
mainContainer.animateLayoutAndWait(300);
}
}