Rows don't render properly in Android Layout. Buttons seem to be the problem

Question

I am new to Android Development and I am having trouble with my XML Layout... when I inly have rows with text and edittext the layout stays ok, but once I put the row with the buttons the lower rows just disappear below the screen and the rows render way apart from each other... what am I doing wrong?

The iPhone version of my app shows the layout I am trying to achieve...

http://itunes.apple.com/br/app/my-food-calc/id385519343?mt=8

Thank You, very much!

<ImageView 
    android:id="@+id/imageView1" 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:src="@drawable/myfoodcalculatortitle00" 
    android:paddingBottom="15dip"></ImageView>

<TableLayout 
    android:id="@+id/tableLayout1" 
    android:layout_height="wrap_content" 
    android:background="@drawable/backgroundsmallobj" 
    android:layout_width="wrap_content" 
    android:layout_gravity = "center"
    android:layout_span="2"
    android:paddingLeft="25px" 
    android:paddingRight="25px" 
    android:stretchColumns="0" 
    android:layout_marginLeft="10px" 
    android:layout_marginRight="10px" 
    android:layout_marginBottom="10px">

    <TableRow android:paddingTop="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/fatRow">
        <TextView android:layout_weight="1" android:layout_width="0dip" android:layout_height="wrap_content" android:id="@+id/textView1" android:text="Fat" android:gravity="right" android:paddingRight="3dip"></TextView>
        <EditText android:layout_weight="1" android:layout_width="0dip" android:minWidth="80px" android:id="@+id/editText1" android:layout_height="wrap_content" android:maxLines="1" android:hint="Fat" android:inputType="numberDecimal" android:gravity="right"></EditText>
    </TableRow>
    <TableRow  android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/carboRow">
        <TextView android:layout_weight="1" android:layout_width="0dip" android:layout_height="wrap_content" android:id="@+id/TextView01"  android:text="carbo" android:gravity="right" android:paddingRight="3dip"></TextView>
        <EditText android:layout_weight="1" android:layout_width="0dip" android:minWidth="80px" android:id="@+id/EditText01" android:layout_height="wrap_content" android:maxLines="1"  android:hint="carbo" android:inputType="numberDecimal" android:gravity="right"></EditText>
    </TableRow>
    <TableRow android:layout_width="wrap_content" android:id="@+id/fiberRow" android:layout_height="wrap_content">
        <TextView android:layout_weight="1" android:layout_width="0dip"  android:id="@+id/TextView02"  android:text="fiber" android:gravity="right" android:paddingRight="3dip"></TextView>
        <EditText android:layout_weight="1" android:layout_width="0dip" android:minWidth="80px" android:id="@+id/EditText02" android:maxLines="1"  android:hint="fiber" android:inputType="numberDecimal" android:gravity="right"></EditText>
    </TableRow>
    <TableRow android:layout_width="wrap_content" android:id="@+id/proteinRow" android:layout_height="wrap_content">
        <TextView android:layout_weight="1" android:layout_width="0dip"  android:id="@+id/TextView03"  android:text="protein" android:gravity="right" android:paddingRight="3dip"></TextView>
        <EditText android:layout_weight="1" android:layout_width="0dip" android:minWidth="80px" android:id="@+id/EditText03"  android:maxLines="1"  android:hint="protein" android:inputType="numberDecimal" android:gravity="right"></EditText>
    </TableRow>
    <TableRow android:layout_width="wrap_content" android:id="@+id/buttonRow" android:layout_height="wrap_content">
        <ImageButton android:layout_weight="1" android:layout_width="0dip" android:id="@+id/imageButton1" android:src="@drawable/calcbuttonbluesquare"></ImageButton>
        <ImageButton android:layout_weight="1" android:layout_width="0dip" android:id="@+id/imageButton2"  android:src="@drawable/clearbuttonbluesquare"></ImageButton>
    </TableRow>
    <TableRow  android:layout_width="wrap_content" android:id="@+id/totalRow" android:layout_height="wrap_content">
        <TextView android:layout_weight="1" android:layout_height="wrap_content" android:id="@+id/TextView04" android:layout_width="0dip" android:text="TOTAL"></TextView>
        <EditText android:layout_weight="1" android:minWidth="80px" android:id="@+id/EditText04"  android:text="EditText" android:maxLines="1" android:inputType="numberDecimal" android:layout_width="0dip" android:hint="protein"></EditText>
    </TableRow>
</TableLayout>

score 0 · Answer 1 · answered May 30 '11 at 01:00

0

Are you sure that you added the drawables @calbuttonbluesquare and clearbuttonbluesquare to your list? Also, they should be in a supported format? Try just putting each button on it's own view as a test, to make sure it's showing up right first.

answered May 30 '11 at 01:00

PearsonArtPhoto

38,970
17
111
142

I reviewed it as you suggested... they are compatible PNGs, added to the drawables, they already appeared on the Graphic Layout window... but when running on emulator or hardware something just goes wrong... – May 30 '11 at 01:44
@Soleil: Any chance you could post a screenshot of what it looks like? – PearsonArtPhoto May 30 '11 at 03:13
I am fairly new to Android development, so as soon as I find out how to do it I will – May 30 '11 at 13:21
@Soleil: Two ways, either just screenshot the entire emulator, or use the DDMS tab in eclipse (Devices, there's an icon for screen capture at the top) – PearsonArtPhoto May 30 '11 at 13:28
Thanks.... I am redoing everything from scratch, I Run on the device every modification I make, so far, so good... painfully slow... I will post pre and post screenshots, a comparison to the iPhone screenshot and hopefully de difference between the XML that works and the one that doesn't... Thank you to everybody... – May 30 '11 at 13:45

score 0 · Answer 2 · answered May 30 '11 at 03:58

0

I think you either need to

Set your TableLayout's layout_height and layout_width to fill_parent, or
Wrap the TableLayout inside a ScrollView.

I might be wrong since I'm not very familiar with TableLayouts, but these would be my guesses.

answered May 30 '11 at 03:58

dmon

30,048
8
87
96

Redid the whole XML from scratch... Still unsure what was causing the problem, but things that worked were: – Jun 01 '11 at 17:14

score 0 · Accepted Answer · answered Jun 01 '11 at 18:36

I am usure of what made my XML file work properly... however, the use of DIP as mesure instead of pixels was what seemed to make the difference... The modified code for inspection is posted here. I was going to attach an screenshot of the final product, I have no screenshot of the not-working version, but my reputation is not high enough to do it.

Code:

        <TableRow android:layout_height="fill_parent" android:layout_width="wrap_content" android:id="@+id/fatRow" >
            <TextView android:layout_column="0" android:layout_weight="1" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="wrap_content" android:text="fat" android:layout_gravity="center_vertical|right" android:gravity="right" android:layout_marginRight="5dip" android:textColor="#FFFFFF"></TextView>
            <EditText android:layout_column="1" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="5dip" android:hint="fat" android:gravity="right" android:id="@+id/fatEditText" android:inputType="numberDecimal"></EditText>
        </TableRow>

        <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/carboRow">
            <TextView android:layout_column="0" android:layout_weight="1" android:layout_height="wrap_content" android:id="@+id/textView3" android:layout_width="wrap_content" android:text="carbo" android:layout_gravity="center_vertical|right" android:gravity="right" android:layout_marginRight="5dip" android:textColor="#FFFFFF"></TextView>
            <EditText android:layout_column="1" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="5dip" android:hint="carbo" android:gravity="right" android:id="@+id/carboEditText" android:inputType="numberDecimal"></EditText>
        </TableRow>

        <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/fiberRow">
            <TextView android:layout_column="0" android:layout_weight="1" android:layout_height="wrap_content" android:id="@+id/textView4" android:layout_width="wrap_content" android:text="fiber" android:layout_gravity="center_vertical|right" android:gravity="right" android:layout_marginRight="5dip" android:textColor="#FFFFFF"></TextView>
            <EditText android:layout_column="1" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="5dip" android:hint="fiber" android:gravity="right" android:id="@+id/fiberEditText" android:inputType="numberDecimal"></EditText>
        </TableRow>

        <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/proteinRow">
            <TextView android:layout_column="0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView5" android:layout_weight="1" android:text="protein" android:layout_gravity="center_vertical|right" android:gravity="right" android:layout_marginRight="5dip" android:textColor="#FFFFFF"></TextView>
            <EditText android:layout_column="1" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="5dip" android:hint="protein" android:gravity="right" android:id="@+id/proteinEditText" android:inputType="numberDecimal" android:imeOptions="actionDone"></EditText>
        </TableRow>

        <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/buttonRow" android:layout_margin="8dip">
            <ImageButton android:layout_column="0" android:background="@null" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/calcbuttonbluesquare" android:id="@+id/calcButton"></ImageButton>
            <ImageButton android:layout_column="1" android:background="@null" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/clearbuttonbluesquare" android:id="@+id/clearButton"></ImageButton>
        </TableRow>

        <TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/totalRow">
            <TextView android:layout_column="0" android:layout_weight="1" android:layout_height="wrap_content" android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_gravity="center_vertical|right" android:gravity="right" android:text="TOTAL" android:layout_marginRight="5dip" android:textColor="#FFFFFF"></TextView>
            <TextView android:layout_column="1" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="5dip" android:background="@null" android:gravity="left|right" android:textColor="#FFFFFF" android:clickable="false" android:inputType="none|numberDecimal" android:id="@+id/totalTextView"></TextView>
        </TableRow>

    </TableLayout>
    </LinearLayout>

Rows don't render properly in Android Layout. Buttons seem to be the problem

3 Answers3

Linked