Evenly spacing views within adjacent layouts

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 ch开发者_如何学Cange of views, i.e. sliding in the buttons from the left over the canvas. Thanks!

Interesting, I've done this several weeks ago. What I did is to make use of this property of View object: "Visibility". So that means at a fixed position, I can set any View to display on to, not depending on any type of Layout, it can be Visibility.GONE, Visibility.VISIBLE or Visibility.INVISIBLE.

In my app, I used RelativeLayout to set relative position to the right side TextView. Give it a try :)

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.