/res/layout/main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- Using table layout to have HTML table like control over layout -->
  3. <TableLayout
  4.         android:id="@+id/TableLayout01"
  5.         android:layout_width="fill_parent"
  6.         android:layout_height="fill_parent"
  7.         android:stretchColumns="1"
  8.         xmlns:android="http://schemas.android.com/apk/res/android">
  9.     <!-- Row 1: Text label placed in column zero,
  10.          text field placed in column two and allowed to
  11.          span two columns. So a total of 4 columns in this row -->
  12.         <TableRow>
  13.         <TextView
  14.                 android:id="@+id/txtLbl1"
  15.                 android:layout_width="wrap_content"
  16.                 android:layout_height="wrap_content"
  17.                 android:layout_column="0"
  18.                 android:text="@string/textLbl1"/>
  19.         <EditText
  20.                 android:id="@+id/txtAmount"
  21.                 android:layout_width="wrap_content"
  22.                 android:layout_height="wrap_content"
  23.                 android:numeric="decimal"
  24.                 android:layout_column="2"
  25.                 android:layout_span="2"
  26.                 />                     
  27.         </TableRow>
  28.     <!-- Row 2: Text label placed in column zero,
  29.          text field placed in column two and allowed to
  30.          span two columns. So a total of 4 columns in this row -->
  31.         <TableRow>
  32.         <TextView
  33.                 android:id="@+id/txtLbl2"
  34.                 android:layout_width="wrap_content"
  35.                 android:layout_height="wrap_content"
  36.                 android:layout_column="0"
  37.                 android:text="@string/textLbl2"/>
  38.         <EditText
  39.                 android:id="@+id/txtPeople"
  40.                 android:layout_width="wrap_content"
  41.                 android:layout_height="wrap_content"
  42.                 android:numeric="integer"
  43.                 android:layout_column="2"
  44.                 android:layout_span="3"/>                      
  45.         </TableRow>
  46.    <!-- Row 3: This has just one text label placed in column zero  -->
  47.         <TableRow>
  48.         <TextView
  49.                 android:id="@+id/txtLbl3"
  50.                 android:layout_width="wrap_content"
  51.                 android:layout_height="wrap_content"
  52.                 android:text="@string/textLbl3"/>
  53.         </TableRow>    
  54.    <!-- Row 4: RadioGroup for RadioButtons placed at column zero
  55.         with column span of three, thus creating one radio button
  56.         per cell of the table row. Last cell number 4 has the
  57.         textfield to enter a custom tip percentage -->
  58.         <TableRow>     
  59.         <RadioGroup
  60.                 android:id="@+id/RadioGroupTips"
  61.                 android:orientation="horizontal"
  62.                 android:layout_width="wrap_content"
  63.                 android:layout_height="wrap_content"
  64.                 android:layout_column="0"
  65.                 android:layout_span="3"
  66.                 android:checkedButton="@+id/radioFifteen">
  67.                 <RadioButton android:id="@+id/radioFifteen"
  68.                         android:layout_width="wrap_content"
  69.                         android:layout_height="wrap_content"
  70.                         android:text="@string/rdoTxt15"
  71.                         android:textSize="15sp" />
  72.                 <RadioButton android:id="@+id/radioTwenty"
  73.                         android:layout_width="wrap_content"
  74.                         android:layout_height="wrap_content"
  75.                         android:text="@string/rdoTxt20"
  76.                         android:textSize="15sp" />
  77.                 <RadioButton android:id="@+id/radioOther"
  78.                         android:layout_width="wrap_content"
  79.                         android:layout_height="wrap_content"
  80.                         android:text="@string/rdoTxtOther"
  81.                         android:textSize="15sp" />
  82.         </RadioGroup>
  83.                 <EditText
  84.                         android:id="@+id/txtTipOther"
  85.                         android:layout_width="fill_parent"
  86.                         android:layout_height="wrap_content"
  87.                         android:numeric="decimal"/>                    
  88.         </TableRow>
  89.    <!--  Row for the Calculate and Rest buttons. The Calculate button
  90.          is placed at column two, and Reset at column three -->         
  91.         <TableRow>
  92.         <Button
  93.                 android:id="@+id/btnReset"
  94.                 android:layout_width="wrap_content"
  95.                 android:layout_height="wrap_content"
  96.                 android:layout_column="2"  
  97.                 android:text="@string/btnReset"/>
  98.         <Button
  99.                 android:id="@+id/btnCalculate"
  100.                 android:layout_width="wrap_content"
  101.                 android:layout_height="wrap_content"
  102.                 android:layout_column="3"
  103.                 android:text="@string/btnCalculate"/>
  104.         </TableRow>    
  105.  
  106.     <!-- TableLayout allows any other views to be inserted between
  107.          the TableRow elements. So inserting a blank view to create a
  108.          line separator. This separator view is used to separate
  109.          the area below the buttons which will display the
  110.          calculation results -->
  111.         <View
  112.                 android:layout_height="2px"
  113.                 android:background="#DDFFDD"
  114.                 android:layout_marginTop="5dip"
  115.                 android:layout_marginBottom="5dip"/>
  116.  
  117.     <!-- Again table row is used to place the result textviews
  118.          at column zero and the result in textviews at column two -->
  119.         <TableRow android:paddingBottom="10dip" android:paddingTop="5dip">
  120.         <TextView
  121.                 android:id="@+id/txtLbl4"
  122.                 android:layout_width="wrap_content"
  123.                 android:layout_height="wrap_content"
  124.                 android:layout_column="0"
  125.                 android:text="@string/textLbl4"/>
  126.         <TextView
  127.                 android:id="@+id/txtTipAmount"
  128.                 android:layout_width="wrap_content"
  129.                 android:layout_height="wrap_content"
  130.                 android:layout_column="2"
  131.                 android:layout_span="2"/>                      
  132.         </TableRow>
  133.        
  134.         <TableRow android:paddingBottom="10dip" android:paddingTop="5dip">
  135.         <TextView
  136.                 android:id="@+id/txtLbl5"
  137.                 android:layout_width="wrap_content"
  138.                 android:layout_height="wrap_content"
  139.                 android:layout_column="0"
  140.                 android:text="@string/textLbl5"/>
  141.         <TextView
  142.                 android:id="@+id/txtTotalToPay"
  143.                 android:layout_width="wrap_content"
  144.                 android:layout_height="wrap_content"
  145.                 android:layout_column="2"
  146.                 android:layout_span="2"/>                      
  147.         </TableRow>
  148.        
  149.         <TableRow android:paddingBottom="10dip" android:paddingTop="5dip">
  150.         <TextView
  151.                 android:id="@+id/txtLbl6"
  152.                 android:layout_width="wrap_content"
  153.                 android:layout_height="wrap_content"
  154.                 android:layout_column="0"
  155.                 android:text="@string/textLbl6"/>
  156.         <TextView
  157.                 android:id="@+id/txtTipPerPerson"
  158.                 android:layout_width="wrap_content"
  159.                 android:layout_height="wrap_content"
  160.                 android:layout_column="2"
  161.                 android:layout_span="2"/>                      
  162.         </TableRow>
  163.     <!--  End of all rows and widgets -->  
  164. </TableLayout>
  165.  
Tutorials