Related to: https://www.b4x.com/android/forum/t...g-or-collapsing-xcustomlistview-items.106148/
[Explanation created by Copilot]
1. Description of the visual defect
The original CLVExpandable implementation produced a noticeable visual glitch during expand/collapse animations. The issue appeared only when the combined height of all item headers above the expanding item was smaller than the expanded panel height.
During the expand/collapse animation, the items above the expanding one visibly moved downward, but the expanded panel underneath them was already fully drawn. This created a double‑layer effect where the upper items appeared to slide over a panel that was already expanded.
This created a “scrolling overlay” effect where the upper items appeared to move or float over the animated item, breaking the visual continuity of the list.
The root cause was that the animation temporarily removed the item’s content from the CLV structure and animated a separate panel, causing the CustomListView to lose synchronization between:
2. Technical fix (new approach)
The fix replaces the entire expand/collapse mechanism with a simpler and fully synchronized animation model.
Key changes:
[Explanation created by Copilot]
1. Description of the visual defect
The original CLVExpandable implementation produced a noticeable visual glitch during expand/collapse animations. The issue appeared only when the combined height of all item headers above the expanding item was smaller than the expanded panel height.
During the expand/collapse animation, the items above the expanding one visibly moved downward, but the expanded panel underneath them was already fully drawn. This created a double‑layer effect where the upper items appeared to slide over a panel that was already expanded.
This created a “scrolling overlay” effect where the upper items appeared to move or float over the animated item, breaking the visual continuity of the list.
The root cause was that the animation temporarily removed the item’s content from the CLV structure and animated a separate panel, causing the CustomListView to lose synchronization between:
- the animated panel
- the actual CLV item height
- the scroll offset
- the internal layout of the list
2. Technical fix (new approach)
The fix replaces the entire expand/collapse mechanism with a simpler and fully synchronized animation model.
Original approach (problematic)
The original class:- created a temporary panel
- moved all child views into it
- animated that temporary panel
- waited for the animation to finish
- moved the views back into the original panel
- flickering
- layout jumps
- incorrect scroll offsets
- CLV not updating item layout during the animation
- the “headers sliding over the expanding item” effect
New approach (stable and correct)
The fixed version removes the temporary panel entirely and animates the real item panel in place.Key changes:
✔ No more panel swapping
All child views remain inside the original item panel. Nothing is moved in or out of the CLV structure.✔ Parallel animation of both heights
The animation updates:- the CLV item height (ResizeItem)
- the inner panel height (SetLayoutAnimated)
✔ Correct order for expand vs collapse
To avoid clipping:- collapse: shrink inner panel first, then CLV item
- expand: enlarge CLV item first, then inner panel
✔ No Sleep, no ScrollViewInnerPanel manipulation
The animation is now deterministic and free of timing issues.Result
The new implementation:- keeps the CLV layout consistent at all times
- prevents headers from visually sliding over the expanding item
- eliminates flicker and jumps
- produces a smooth, stable expand/collapse animation
- is simpler, safer, and easier to port to B4A and B4i
Last edited:
