Position of the elements in Android XML file

Question

I have a question regarding how to position elements in a XML file for an android activity.

What i need to achieve is the following:

Basically i need: a set of 9 squares (3x3 table) covering 50% of the screen height on the second part of the screen, 3 equally distributed zones with a single textview / button for each.

i created the set of 9 squares using a tableview with this code:

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="386dp"
    android:stretchColumns="*" >

    <TableRow
        android:id="@+id/Row1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <Button
            android:id="@+id/square1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="1"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />

        <Button
            android:id="@+id/square2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="3"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />

        <Button
            android:id="@+id/square3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="3"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />
    </TableRow>

    <TableRow
        android:id="@+id/Row2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <Button
            android:id="@+id/square4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="1"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />

        <Button
            android:id="@+id/square5"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="1"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />

        <Button
            android:id="@+id/square6"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="1"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />
    </TableRow>

    <TableRow
        android:id="@+id/Row3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <Button
            android:id="@+id/square7"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="1"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />

        <Button
            android:id="@+id/square8"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="2"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />

        <Button
            android:id="@+id/square9"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:text="3"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="60sp" />
    </TableRow>
</TableLayout>

This part is included in a relative layout. Now i can't get in any way to set this part to be 50% of the screen, and add a second 50% with the 3 buttons.

Hope you can help me. I searched here for answers but didn't find any relevant topic

Answer 1

Here you go:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TableRow 
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >

    <Button 
        android:text="1" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />
    <Button 
        android:text="2"
        android:layout_height="match_parent" 
        android:layout_width="0dp"
        android:layout_weight="1"
        />
    <Button 
        android:text="3" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />
</TableRow>

<TableRow 
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >

    <Button 
        android:text="4" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />
    <Button 
        android:text="5" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />
    <Button 
        android:text="6" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />
</TableRow>

<TableRow 
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >

    <Button 
        android:text="7" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />
    <Button 
        android:text="8" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />
    <Button 
        android:text="9" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />
</TableRow>

<TableRow 
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >        
    <Button 
        android:text="10" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />        
</TableRow>

<TableRow 
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >        
    <Button 
        android:text="11" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />        
</TableRow>

<TableRow 
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >        
    <Button 
        android:text="12" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        />        
</TableRow>

Answer 2

Use LinearLayout instead of RelativeLayout and use android:weight attribute to achieve 50% screen height as follows...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="2" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_wieght="1" >

        ..............

        ..............

    </TableLayout>


    <!-- Other other layout which will take android:layout_wieght="1" -->

</LinearLayout>

Answer 3

This will be a very simple answer to this question only using LinearLayout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

        </LinearLayout>

        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

        </LinearLayout>

        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

            <Button 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="one part"/>

        </LinearLayout>       


    </LinearLayout>


    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <Button 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="one part"/>

        <Button 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="one part"/>

        <Button 
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="one part"/>

    </LinearLayout>


</LinearLayout>