Combining SurfaceView with other Views such as TextView and Buttons

Question

I'm totally new to android programming (just did some tutorials/read the dev guides etc.) and as every newbie I want to do a useless game :-).

Currently I'm struggling with the layout of different views. Similar to the example I've made a class which extends a SurfaceView and put that into a FrameLayout. Around this SurfaceView I want to have other View's like Buttons & TextViews. Something like this:

-----------------------------------------------
| TextView | SurfaceView           | TextView |
|          |                       |          |
------------                       ------------
|          |                       | TextView |
|          |                       |          |
|          |                       ------------
|          |                       | TextView |
|          |                       |          |
|          |                       ------------
|          |                       |          |
|          |                       |          |
-----------------------------------------------
| Button                             Button   |
-----------------------------------------------

I've managed to do something like this with a FrameLayout and RelativeLayouts (sticking the TextViews at the edges of the screen) but I'd like to better control the size of the SurfaceView as it should be a multiple in width and height of the object(s) I'll be drawing in it. I've tried setting layout_width and layout_height to some dp values but when I start painting at 0,0 it's still at the very top-left corner (where the TextView is..).

So, what's the best practice to achieve a layout as above? Using what layout? Or should I better draw my text inside the draw() function of my SurfaceView instead?

Answer 1

Layouts are the right way to combine OpengGL content with buttons, labels and other type of view objects. You can combine layouts inside other layouts... so you may build your screen step by step combining Linear Layouts or whatever you prefer.

For example, you can use a Relative layout to setup the buttons (b1, b2) and the rest of the screen:

+-----------+
|  Zone 1   |
+-----+-----+
| b1  | b2  |
+-----+-----+

Then inside Zone 1, you can use a Horizontal Linear Layout for the 3 main columns

+----+----+----+
| c1 | c2 | c3 |
+----+----+----+

Inside of c2 you can place the SurfaceView, and in c1 the text label

Inside c3 will be a new Vertical Linear layout to display the text labels.

+----+
| t1 |
+----+
| t2 |
+----+
| t3 |
+----+