android - How to build a badminton field layout?

Question

I'm trying to build a badminton field layout for an application of mine.

After some experiments I got a nice looking one, like that (field.xml see below).

I know that it's probably not the best way to create a badminton field layout, but I didn't find a better solution since now. If anyone has a better idea how to build the field I would appreciate any comments.

The main problem is, the fact, that I want to add text to some text fileds. As soon as I add text to the fields, my layout is broken: broken layout.png

When I remove the layout_width attribute: wrap_content from those text elements, the UI editor displays it correctly: wanted layout.png.

But as the layout_width attributes are missing, the application will not load this layout on my device.

Any ideas how to add text to the fields without damaging the layout?

field.xml:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row1"
    style="@style/topborder"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.1"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/field11"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal" />

    <TextView
        android:id="@+id/field12"
        style="@style/rightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:gravity="center"
        android:text="Team 1" />

    <TextView
        android:id="@+id/field13"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field14"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />
</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row2"
    style="@style/bottomborder"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.7"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/field21"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field22"
        style="@style/rightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:gravity="center"
        android:text="21"
        android:textSize="50dp" />

    <TextView
        android:id="@+id/field23"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field24"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />
</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row3"
    style="@style/bottomborder"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.3"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/field31"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field32"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="2"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field33"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />
</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row4"
    style="@style/bottomborder"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.3"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/field41"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field42"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="2"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field43"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />
</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:id="@+id/row5"
    android:layout_height="wrap_content"
    android:layout_weight="0.7"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/field51"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field52"
        style="@style/rightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field53"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:gravity="center"
        android:text="10"
        android:textSize="50dp" />

    <TextView
        android:id="@+id/field54"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />
</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/bottomborder"
    android:id="@+id/row6"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.1"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/field61"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field62"
        style="@style/rightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />

    <TextView
        android:id="@+id/field63"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:gravity="center"
        android:text="Team 2" />

    <TextView
        android:id="@+id/field64"
        style="@style/leftrightborder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="0.3"
        android:background="#000000"
        android:gravity="center_horizontal"
        android:text="" />
</LinearLayout>

Answer 1

As mentioned in this post, I just found, I just had to set layout_width:0dp on each text view. Not it's working fine!

Answer 2

In your layout layout_weight have incorrect values. If one row should use 0.1 of the screen and second row should use 0.9 of the screen. Then you will set the layout_weight of the first row to 0.9 and the layout_weight of the second to 0.1. Here is layout with correct weights:

    <LinearLayout
        android:id="@+id/row1"
        style="@style/topborder"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="2.1"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/field11"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal" />

        <TextView
            android:id="@+id/field12"
            style="@style/rightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.6"
            android:background="#000000"
            android:gravity="center"
            android:text="Team 1" />

        <TextView
            android:id="@+id/field13"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.6"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field14"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/row2"
        style="@style/bottomborder"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1.5"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/field21"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field22"
            style="@style/rightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.6"
            android:background="#000000"
            android:gravity="center"
            android:text="21"
            android:textSize="50dp" />

        <TextView
            android:id="@+id/field23"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field24"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.6"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/row3"
        style="@style/bottomborder"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1.9"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/field31"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field32"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.6"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field33"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/row4"
        style="@style/bottomborder"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1.9"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/field41"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field42"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.6"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field43"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/row5"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1.5"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/field51"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field52"
            style="@style/rightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.6"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field53"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.6"
            android:background="#000000"
            android:gravity="center"
            android:text="10"
            android:textSize="50dp" />

        <TextView
            android:id="@+id/field54"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/row6"
        style="@style/bottomborder"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="2.1"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/field61"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field62"
            style="@style/rightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.6"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />

        <TextView
            android:id="@+id/field63"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.6"
            android:background="#000000"
            android:gravity="center"
            android:text="Team 2" />

        <TextView
            android:id="@+id/field64"
            style="@style/leftrightborder"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.3"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:text="" />
    </LinearLayout>

</LinearLayout>