How can I achieve this basic layout in android with the proper z-ordering of views

Question

How can I achieve the following layout in Android?

What I would like, is to have the 3 blue boxes top aligned in their view, and then I'd like to have the red box centered underneath the blue boxes, but so that when I animate the red box up, it slides underneath the blue box.

I have tried placing the blue and red boxes in different layouts, but as soon as I animate the red box up, if it goes outside the border of its layout, it disappears (I don't want the red box's layout to clip the red box, I want the red box to slide under the blue box so that the blue box occludes the red box.)

I have also managed to create this layout using a series of nested layouts, but because of the draw order, the red box always appears on top of the blue box. I attempted to use the bringToFront() method, but I found out that this only works on sibling views within the same layout. Unfortunately I can't get this type of layout while keeping all 4 views within the same layout. Any suggestions? (also, if anyone has better suggestions for the title of this question I'm all ears)

Answer 1

Hi, try to use the RelativeLayout. If you know the height of the blue box, you can draw the red box always first and add the blue box later in your layout which will make sure, that the blue box is always on top of the red one.

You could also consider using a SurfaceView where you can order you items easily and without any xml definition...