Translate an androidlayout to another position

I want to generate the following layout(s):

In the first step, there are two layouts, layout 1 and layout 2, layout 1 and layout 2 have 50%-width/height of the display.

If i click on Layout 1, this layout should overlay the layout 2 with a small animation and at the place of layout 1 a sublayout should be shown. The sublayout is a gridview 2x2.

Has anyone a solution how to setup the layout?

I have tried the following way:

• I have used a LinearLayout for the left and the right layout, that means i have two container
• One Layout has two possible sublayouts. If i start, the sublayout 1 is shown. If i click on the layout, the sublayout2 is shown. In this case, i set the size of the sublayout1 to 0,0 and now it no longer hides the sublayout2. This works.
• Now i want to translate the sublayout1 to hide the other conatiner. I have made a开发者_JS百科 small translation, but the sublayout1 does for example not overlay the other container. At this point i have asked me, if i have used the right approach to solve the whole problem.

fesp

---

use percentage layout which is available in app compact support library to create layout in percentage.