Search code examples
androidandroid-tablelayout

Alignment issues with TableLayout when adding Buttons


I created a TableLayout for my application. Everything is working fine, but once I add the button image at the bottom of the page the alignment breaks. Here is an image before entering the button image code:

enter image description here

After entering the code for the button images:

enter image description here

My xml layout:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/tableLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:shrinkColumns="*"  
    android:stretchColumns="*"
    android:background="@drawable/authenticinfo">  
    <TableRow  
        android:id="@+id/tableRow1"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:textStyle="bold"  
            android:typeface="serif"  
            android:textSize="18dp"              
            android:gravity="center"  
            android:layout_span="6"></TextView>  
    </TableRow>  
      <TableRow  
        android:id="@+id/tableRow2"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView               
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:textStyle="bold"  
            android:typeface="serif"  
            android:textSize="38dp"              
            android:gravity="center"  
            android:layout_span="6"></TextView>  
    </TableRow>  
        <TableRow  
        android:id="@+id/tableRow3"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:id="@+id/textView2"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:textStyle="bold"  
            android:typeface="serif"  
            android:textSize="38dp"               
            android:gravity="center"  
            android:layout_span="6"></TextView>  
    </TableRow>      
            <TableRow  
        android:id="@+id/tableRow4"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
         <ImageView
            android:id="@+id/imview"            
            android:layout_centerHorizontal="true"          
             android:layout_gravity="center"
            /> 
    </TableRow>  
     <TableRow  
        android:id="@+id/tableRow5"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView              
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:textStyle="bold"  
            android:typeface="serif"  
            android:textSize="20dp"               
            android:gravity="center"  
            ></TextView>  
    </TableRow>     
             <TableRow  
        android:id="@+id/tableRow6"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:id="@+id/ProductID1"  
            android:text="Product ID"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/ProductID2"  
            android:text=":"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/ProductID3"  
            android:text="92173ad0"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>
    </TableRow>     
             <TableRow  
        android:id="@+id/tableRow7"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:id="@+id/ProductID4"  
            android:text="产品编号 "  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/ProductID5"  
            android:text=":"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/ProductID6"  
            android:text="92173ad0"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>
    </TableRow>     
              <TableRow  
        android:id="@+id/tableRow8"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView               
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:textStyle="bold"  
            android:typeface="serif"  
            android:textSize="8dp"               
            android:gravity="center"  
            android:layout_span="6"></TextView>  
    </TableRow> 
<TableRow  
        android:id="@+id/tableRow9"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:id="@+id/Manf1"  
            android:text="生产日期  "  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/Manf2"  
            android:text=":"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/Manf3"  
            android:text="01 Jan 2012"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>
    </TableRow> 
<TableRow  
        android:id="@+id/tableRow10"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:id="@+id/Exp1"  
            android:text="有效日期  "  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/Exp2"  
            android:text=":"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/Exp3"  
            android:text="01 Jan 2015"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>
    </TableRow>
    <TableRow  
        android:id="@+id/tableRow11"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView               
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:textStyle="bold"  
            android:typeface="serif"  
            android:textSize="8dp"               
            android:gravity="center"  
            android:layout_span="6"></TextView>  
    </TableRow>  
    <TableRow  
        android:id="@+id/tableRow12"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:id="@+id/Mas1"  
            android:text="马来西亚出口许可证   "  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/Mas2"  
            android:text=":"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/Mas3"  
            android:text=""  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>
    </TableRow>
     <TableRow  
        android:id="@+id/tableRow13"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:id="@+id/China1"  
            android:text="中国的进口许可证   "  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/China2"  
            android:text=":"  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>  
        <TextView  
            android:id="@+id/China3"  
            android:text=""  
            android:textStyle="bold"  
            android:typeface="serif"></TextView>
    </TableRow>    
      <TableRow  
        android:id="@+id/tableRow14"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent"  
        android:gravity="center_horizontal">  
        <TextView               
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:textStyle="bold"  
            android:typeface="serif"  
            android:textSize="28dp"               
            android:gravity="center"  
            android:layout_span="6"></TextView>  
    </TableRow>  


<TableRow  
        android:id="@+id/tableRow15"  
        >  
       <ImageView
            android:id="@+id/imbutt"            
            android:layout_centerHorizontal="true"          
             android:layout_gravity="center"
             android:background="@+drawable/buttonmainmenuoff"
            /> 
            <ImageView
            android:id="@+id/imbutt"            
            android:layout_centerHorizontal="true"          
             android:layout_gravity="center"
             android:background="@+drawable/buttonmainmenuoff"
            /> 
            <ImageView
            android:id="@+id/imbutt"            
            android:layout_centerHorizontal="true"          
             android:layout_gravity="center"
             android:background="@+drawable/buttonmainmenuoff"
            /> 
    </TableRow>

</TableLayout>

Solution

  • The layout breaks because the ImageViews that you add at the end stretch the columns where they are placed(for example the second ImageView that you add will stretch the TextView that holds the :). You don't say how you want them placed but one simple thing that you could do is to wrap them in another layout, like LinearLayout like this:

     <TableRow android:id="@+id/tableRow15" >
    
            <LinearLayout
                android:layout_span="6"
                android:gravity="center" >
    
                <ImageView
                    android:id="@+id/imbutt1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_launcher" />
    
                <ImageView
                    android:id="@+id/imbutt2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_launcher" />
    
                <ImageView
                    android:id="@+id/imbutt3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_launcher" />
            </LinearLayout>
        </TableRow>
    

    Of course you could spread them if you want, with the layout_weight attribute.

    As a side note, do you really have 6 columns in your layout(you set the layout_span to 6)? Also , do you use those empty singular TextViews or you just use them as dividers(if this is what you want, then you could consider a simple View element outside the TableRows with the desired height)?