problem in table layout

Question

popup: the area betwwen Close button and the border line is not wide enough in Portrait Mode.

Having tested handset in Portrait Mode. Send SMS or MMS to the tested handset. Observe the popup in the area between Close button and the border line.

Actual result: the area betwwen Close button and the border line is not wide enough. View atached screen shots Expected result: the area betwwen Close button and the border line should similar to Reply button to the border line.

Cannot re-produce in the case of Landscape Mode..

<ScrollView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="#00000000">
<RelativeLayout 
            android:layout_height="wrap_content"
            android:layout_width="300dp">   
<LinearLayout
  android:layout_width="300dp"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:layout_gravity="center">
   <TextView
            android:id="@+id/unread_messges_text" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:padding="5dp" />
    <View
         android:layout_height="1dp" 
         android:layout_width="fill_parent"
         android:background="@color/background_light"
      />
    <RelativeLayout 
            android:layout_height="wrap_content" 
            android:layout_width="fill_parent"
            android:layout_margin="5dp"
            >
            <ImageView
                    android:id="@+id/contact_photo"
                    android:scaleType="centerCrop" 
                android:layout_width="70dp" 
                android:layout_height="70dp"
                />
            <TextView
                android:id="@+id/sender_name_number" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/contact_photo"
                android:textSize="20dp"
                android:singleLine="true"
                android:layout_marginLeft="5dp"
                />
            <TextView
                android:id="@+id/message_subject" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/contact_photo"
                android:layout_below="@+id/sender_name_number"
                android:textSize="15dp"
                android:singleLine="true"
                android:layout_marginLeft="5dp"
                />    
            <TextView
                android:id="@+id/message_received_time" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/contact_photo"
                android:layout_below="@+id/message_subject"
                android:text="@string/message_received_time"
                android:layout_marginLeft="5dp"
                />
    </RelativeLayout>
    <View
         android:layout_height="1dp" 
         android:layout_width="fill_parent"
         android:background="@color/background_light"
      />
     <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/message_body_textpart"
        android:layout_margin="5dp"
       >
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/message_body_imagepart"
        android:layout_marginLeft="5dp"
        android:layout_marginBottom="4dp"
        android:layout_marginRight="5dp"
       >
    </RelativeLayout>

   <TableLayout
          android:layout_width="fill_parent" 
          android:layout_height="fill_parent"
          android:background="@color/background_light"
          android:stretchColumns="*">
       <TableRow
          android:layout_gravity="center_horizontal"
          android:layout_marginTop="3dp"
          >  
       <Button 
             android:text="@string/reply_button_text" 
             android:id="@+id/reply_button" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content"/>
       <Button 
             android:id="@+id/next_button" 
             android:text="@string/next_button_text" 
             android:layout_height="wrap_content" 
             android:layout_width="wrap_content"/>
       <Button 
             android:text="@string/close_button_text" 
             android:id="@+id/close_button" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content"
             />
       </TableRow>  
   </TableLayout>

</LinearLayout>
</RelativeLayout>
</ScrollView>

Answer 1

I would try a horizontal LinearLayout rather than the table view for the 3 buttons on the bottom. Set the width for each button to 0dip and the layout_weight to 1.

<LinearLayout
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent"
      android:background="@color/background_light">
   <Button 
         android:text="@string/reply_button_text" 
         android:id="@+id/reply_button" 
         android:layout_width="0dip" 
         android:layout_height="wrap_content"
         android:layout_weight="1"/>
   <Button 
         android:id="@+id/next_button" 
         android:text="@string/next_button_text" 
         android:layout_height="wrap_content" 
         android:layout_width="0dip"
         android:layout_weight="1"/>
   <Button 
         android:text="@string/close_button_text" 
         android:id="@+id/close_button" 
         android:layout_width="0dip"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         />
</LinearLayout>

Answer 2

Change android:layout_marginTop="3dp" from TableRow of buttons to android:padding="3dp"

padding is for padding space between layout and its child

margin is for padding space between layout and its parent