Question

I’m working on the controls for a game, and require part of the control panel (gray in the figure below) to change dynamically, either showing a single canvas (left) or 5 buttons (right). The border between the lower-row views should always be positioned at exactly the same x-position as the border between the buttons on the upper row, as shown. At the same time, all twelve upper buttons should be scaled and distributed evenly.

I’ve considered several approaches, but as of yet none do all of what I want:

• Using two LinearLayouts, one for each row of controls: reliably aligning the borders seems to be impossible, and replacing part of the layout is difficult at best.
• Using a TableLayout: again, replacing a portion of the layout is difficult.
• Using a RelativeLayout: resizing and aligning buttons independently of the screen size doesn’t seem possible

Any suggestions for an alternative method, or on how to make one of the above approaches work? It would also be nice if there were some way to animate the change of views, i.e. sliding in the buttons from the left over the canvas. Thanks!

Answer 1

In order to close this question: I have solved the problem by writing a custom layout class that places and sizes the child views without heeding the measured size of the children. Effectively this gives me the behavior of a linear layout with layout weights, but is more deterministic with border placement.

A ViewAnimator is used to switch between the Canvas and the Buttons.