Question

I started writing a super-simple text adventure game a few months ago, and I am just now getting back to it. But after looking at the layout, I now think it’s really ugly.

I’m really new to this whole XML layout format, and I was wondering if someone could take a look at this for me and let me know if there’s a better, more attractive way of writing this layout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">

<TableLayout android:stretchColumns="*" 
     android:layout_height="wrap_content" 
     android:id="@+id/tableLayout1" 
     android:layout_width="fill_parent">

        <TableRow 
            android:layout_height="wrap_content" 
            android:id="@+id/tableRow1" 
            android:layout_weight="1" 
            android:layout_width="fill_parent" 
            android:gravity="center">  

            <TextView android:text="" 
                android:id="@+id/introText" 
                android:layout_height="wrap_content" 
                android:layout_width="wrap_content" 
                android:layout_marginLeft="2dip" 
                android:layout_marginRight="2dip" 
                android:layout_marginTop="2dip" 
                android:layout_marginBottom="2dip">
            </TextView>
        </TableRow>

        <TableRow 
            android:layout_height="wrap_content" 
            android:id="@+id/tableRow1" 
            android:layout_weight="1" 
            android:layout_width="fill_parent" 
            android:gravity="center">

            <TextView android:text="navigationText" 
                android:id="@+id/navigationText" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:layout_margin="2dip"/>

            <TextView android:text="actionText" 
                android:id="@+id/actionText" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:layout_margin="2dip"/>

            <TextView android:text="encounterText" 
                android:id="@+id/encounterText" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:layout_margin="2dip" 
                android:layout_marginBottom="1dip"/>
        </TableRow>
</TableLayout>  

<TableLayout android:stretchColumns="*" 
     android:layout_height="wrap_content" 
     android:id="@+id/tableLayout1" 
     android:layout_width="fill_parent">
    <TableRow 
        android:layout_height="wrap_content" 
        android:id="@+id/tableRow1a" 
        android:layout_weight="1" 
        android:layout_width="fill_parent" 
        android:gravity="left">    

        <TextView android:text="characterInfo" 
            android:id="@+id/charText" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_margin="2dip">
        </TextView>
        <TextView android:text="" android:id="@+id/textView1" 
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView> 

        <Button android:text="North" 
            android:id="@+id/btnNorth" 
            android:layout_height="wrap_content" 
            android:layout_width="fill_parent" android:layout_margin="2dip">
        </Button>
    </TableRow>

    <TableRow 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/tableRow2" 
        android:gravity="left">

        <TextView android:text="statsText" 
            android:id="@+id/statsText" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:maxLines="5"
            android:layout_margin="2dip">
        </TextView> 

        <Button android:text="West" 
            android:id="@+id/btnWest" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_marginLeft="32dip" android:layout_marginRight="2dip"
 android:layout_marginTop="2dip" android:layout_marginBottom="2dip">
        </Button>
        <Button
            android:text="i" 
            android:id="@+id/btnInventory" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" android:layout_marginLeft="10dip" 
android:layout_marginRight="10dip" android:layout_marginTop="2dip" 
android:layout_marginBottom="2dip">
        </Button>
        <Button 
            android:text="East" 
            android:id="@+id/btnEast" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_marginLeft="2dip" android:layout_marginRight="32dip" 
android:layout_marginTop="2dip" android:layout_marginBottom="2dip">
        </Button>
    </TableRow>

    <TableRow 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/tableRow3" 
        android:gravity="left">

        <TextView android:text="itemsText" 
            android:id="@+id/itemsText" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_margin="2dip">
        </TextView>
        <TextView android:text="" android:id="@+id/textView2" 
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>    
        <Button android:text="South" 
            android:id="@+id/btnSouth" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_margin="2dip">
        </Button>
    </TableRow>
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tableRow4"
        android:gravity="center">
        <TextView android:text="" android:id="@+id/textView3" 
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
        <Button android:text="Attack" android:id="@+id/btnFight" 
android:layout_height="wrap_content" android:layout_width="wrap_content" 
android:layout_marginLeft="15dip" android:layout_marginRight="10dip" 
android:layout_marginTop="2dip"></Button>
        <Button android:text="Flee" android:id="@+id/btnRun" 
android:layout_width="wrap_content" android:layout_height="wrap_content" 
android:layout_marginLeft="10dip" android:layout_marginRight="10dip" 
android:layout_marginTop="2dip"></Button>
        <Button android:text="Search" android:id="@+id/btnSearch" 
android:layout_width="wrap_content" android:layout_height="wrap_content" 
android:layout_marginLeft="10dip" android:layout_marginRight="15dip" 
android:layout_marginTop="2dip"></Button>
    </TableRow>

</TableLayout>


</LinearLayout>

Answer 1

If you’re just looking to make your layout more manageable, there are a number of simple solutions I can think of. They mostly require zero to little design change.

• You can add XML comments to separate logical sections, as ugly as they may be
• You could divide your layout into separate included layouts
• You can use fragments (using the Fragment Compatibility Package available through the SDK updater if necessary) to fragment your Activity into separate UI components which would have their own layout files. This is the only solution that would require moving your java code around, but I highly recommend it; it makes UI components highly reusable.