2011-02-09

Application released!

I have finally finished the app, called Hole In One GPS, a combined range finder and scorecard for golf. So if you are a golfer you should check it out!

You can find it on android market, or follow this link to android web market:
Hole In One GPS on Android market

2011-01-22

Fixed header in a TableLayout

As the previous post this will also cover TableLayout. As with borders, there are no attribute for defining a TableRow as a header row. With header row I mean a row that will not scroll with the rest of the data in the TableLayout (providing you have declared the table to be inside a ScrollView).

Well, there is actually a way to work around this using a separate TableLayout for the header row. If you know that the header columns will be wider than the rest of the data in the table it's pretty easy. Some key notes to make this work:


  • Set all Views in the table to android:layout_weight="1"
  • You must NOT set android:stretchColumns="*" as this will override the weight attribute.
  • You must know which row is widest, and use a copy of this as a "dummy" row.
In the layout xml add the header row:
<TableLayout
  android:id="@+id/header"
  android:layout_width="fill_parent"
  android:layout_marginRight="2dp"
  android:layout_marginLeft="2dp"
  android:layout_height="wrap_content"
  android:background="@android:color/black">
  <TableRow>
   <TextView
    android:textColor="@android:color/black"
    android:layout_margin="1dp"
    android:gravity="center_horizontal"
    android:layout_weight="1"
    android:background="#ffcccccc"
    android:text="Col1" />
   <TextView
    android:textColor="@android:color/black"
    android:gravity="center_horizontal"
    android:layout_weight="1"
    android:layout_margin="1dp"
    android:background="@android:color/white"
    android:text="Col2" />
   <TextView
    android:textColor="@android:color/black"
    android:gravity="center_horizontal"
    android:layout_weight="1"
    android:layout_margin="1dp"
    android:background="@android:color/white"
    android:text="Col3" />
   <TextView
    android:textColor="@android:color/black"
    android:gravity="center_horizontal"
    android:layout_weight="1"
    android:layout_margin="1dp"
    android:background="@android:color/white"
    android:text="Col4" />
   <TextView
    android:textColor="@android:color/black"
    android:gravity="center_horizontal"
    android:layout_weight="1"
    android:layout_margin="1dp"
    android:background="@android:color/white"
    android:text="Col5" />
  </TableRow>
 </TableLayout>
Then add the main table inside a ScrollView containing a copy of the header row as a dummy row with a height set to "0dp" making it invisible:
<ScrollView
  android:id="@+id/table_scroll"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_marginRight="2dp"
  android:layout_marginLeft="2dp">
  <TableLayout
   android:id="@+id/maintable"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:background="@android:color/black">
   <TableRow>
    <TextView
     android:layout_height="0dp"
     android:layout_weight="1"
     android:layout_marginRight="1dp"
     android:layout_marginLeft="1dp"
     android:text="Col1" />
    <TextView
     android:layout_height="0dp"
     android:layout_weight="1"
     android:layout_marginLeft="1dp"
     android:layout_marginRight="1dp"
     android:text="Col2" />
    <TextView
     android:layout_height="0dp"
     android:layout_weight="1"
     android:layout_marginLeft="1dp"
     android:layout_marginRight="1dp"
     android:text="Col3" />
    <TextView
     android:layout_height="0dp"
     android:layout_weight="1"
     android:layout_marginLeft="1dp"
     android:layout_marginRight="1dp"
     android:text="Col4" />
    <TextView
     android:layout_height="0dp"
     android:layout_weight="1"
     android:layout_marginLeft="1dp"
     android:layout_marginRight="1dp"
     android:text="Col5" />
   </TableRow>
  </TableLayout>
 </ScrollView>
This is how it is displayed:


Note that this will only work if you know that the header columns is wider than the rest of the data. If any of the rows in the "main" table is wider than the header row the columns will no longer be aligned. However, there is a way to solve this as well. If you can identify the widest row in the "main" table, then just do the same procedure as above, but this time add this as a dummy row to the header table.

2011-01-06

Border in a TableLayout

As specified in the documentation for TableLayout, borders are not supported (there is no attribute android:border or something like that). So you have to be a little creative to accomplish this.

In the root layout, specify a background color (this will be the border color), for instance:
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/black">
Then for each cell in the table specify another background color, and set a margin:
<TextView
    android:id="@+id/tv_col2"
    android:textColor="@android:color/black"
    android:gravity="center_horizontal"
    android:layout_margin="1dp"
    android:background="@android:color/white"
    android:text="Col2" />
This will produce the following layout, depending on the number of rows and columns of course:

2011-01-02

RelativeLayout alignment trick

Have you ever tried to place two buttons next to each other with each button taking up half the screen? Are you using RelativeLayout as well? Finding it hard? There is actually a pretty neat trick for this, using a View layout as a helper object. This will not be visible since the size is 0 pixels, and after centering the View horizontally, the buttons can be aligned to the left/right:
<View
 android:id="@+id/buttons_helper"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:layout_centerHorizontal="true" />
<ImageButton
 android:id="@+id/previous"
 android:src="@drawable/previous_btn"
 android:layout_toLeftOf="@id/buttons_helper"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_margin="3dp"
 android:layout_alignParentBottom="true" />
<ImageButton
 android:id="@+id/next"
 android:src="@drawable/next_btn"
 android:layout_toRightOf="@id/buttons_helper"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_margin="3dp"
 android:layout_alignParentBottom="true" />
Note that I'm using ImageButton above. You will have to reference a valid picture in android:src="@drawable/...", or simply use a Button object instead. This will result in the following layout:


This will be cheaper than having a LinearLayout with weight attributes set. If you know any other way to accomplish this with RelativeLayout, please let me know.