The extension is based on a template, where one can customize the layout and input fields as required for the current solution. Simply add a the set of input fields, that you require. The only rule is, that the name of the field, must reflect the names from the fe_users table.

When this is done, you can enter a list of mandatory fields, that the front end user must fill out. It is furthermore possible to enter a list of options, which will be set for any new user as default. All this is done from the template configuration for your site.

The feuserreg extension is available from TER as of today. At the moment is has been released without any manual. The options can be viewed from the Template Analyzer and from within the HTML template.

feusereg is available from this address: http://typo3.org/extensions/repository/view/feuserreg/current/.

In some situations it can actually be useful, if the user interface can take it. It’s all up to you.

Shake and attention plugin for jQuery

The shake and attention plugin for jQuery is easy to use and should be available on all selectable elements within jQuery.

This is the first version that gets published, so I would really appreciate all the feedback I can get.

What can it do

It can shake things left and right and right and left.
Shake this as default

  $(".shakethisbutton").shake();

Another shake:

Shake this with more speed

    $(".shakethisbutton1").click( function() {
        $(this).shake({
            shake_speed: 70,
            shake_repeats: 10
            });
    });

Yet another shake

Shake this with random moves

    $(".shakethisbutton2").click( function() {
        $(this).shake({
            shake_random_length: 'yes',
            shake_repeats: 10
            });
    });

Options

The complete list of settings for the Shake and Attention jQuery plugin is:

            shake_random_length: 'no',      // should we shake all the way every time or random shakes. 'yes'/'no'
            shake_random_direction: 'no',   // should the direction be left-right-left etc. or random. 'yes'/'no'
            shake_left: 30,                 // how many pixels can we move to the left
            shake_right: 30,                // how many pixels can we move to the right
            shake_speed: 100,               // how fast to shake
            shake_repeats: 1,               // how many repetition
            shake_easing: 'linear'          // 'linear' or 'swing'

Support this

If you like this plugin please post a comment or perhaps make a small PayPal donation to support further development.

Download

Download shake-0.8.js here – download

Something is missing

Please post a comment if you have any comments for this jQuery plugin.

- Create a new class for the activity
- Add the class to the Android Manifest
- Start the activity

Create a class for the user interface

Lets call this file UI:

import android.app.Activity;

public class UI extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // type your magic code here
    }

}

That it basically it. A class extending the Activity – the onCreate is called when the activity is started.
NB: the super.onCreate is very important – without it the code will fail to run!

Editing the AndroidManifest.xml

The register the intent in the application, we have to edit the AndroidManifest.xml file like this:

...
<application...>
        ...
        <activity android:name=".UI" android:label="@string/app_name">
        </activity>
        ...
</application>

This enables us to access the UI intent created earlier.

Starting the activity

All we have to do now, is to start the new intent. This can be done with the startActivity()-function like this:

...
startActivity(new Intent(this, UI.class));
...

I hope this small guide is helpful to you. If you would like an example with more details, please let me know

The basic databaseHandler

There are properly tons of ways to make a databaseHandler and I will not discuss why and when to use what. Use my examples as you want or if you want to.

The databaseHandler is the class that handles the connection from the application to the database.

This is the most basic database handle class:

package huuah.db;

import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.database.SQLException;

public class databaseHelper extends SQLiteOpenHelper {

  private static final String DBNAME = "myfancydatabase";
  private databaseHelper myDBHelper;
  private SQLiteDatabase myDB; 

  private final Context myContext;

  public databaseHelper(Context context) {
    super(context, DBNAME, null, 2);
    this.myContext = context;
  }

  @Override
  public void onCreate(SQLiteDatabase db) {
  }

  @Override
  public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
  }

  public databaseHelper open() throws SQLException {
     myDBHelper = new databaseHelper(myContext);
     myDB = myDBHelper.getWritableDatabase();
     return this;
  }
}

When the open() function is called, it will activate the constructor and a new database (in this case named ‘myfancydatabase’) will be created inside the database path for your app.

The database path is located in /data/data/YOURPACKAGENAME/databases/.

To run the code add something like this to your application:

...
import huuah.db.databaseHelper;
...
databaseHelper dbCon = new databaseHelper(this);
dbCon.open();
...

Use the DDMS in Eclipse or the ADB tool to check if the database is created correctly.

Copying from assets to database path

What if we would like to distribute the application with a default database? Almost as simple as creating a new. Copy your SQLite database to the assets folder of your project. From here we will copy it to the correct database folder on the phone.

...
  public void createDatabase() throws IOException {

    InputStream assetsDB = myContext.getAssets().open("localdb");
    OutputStream dbOut = new FileOutputStream("/data/data/huuah.db/database/myfancydatabase");

    byte[] buffer = new byte[1024];
    int length;
    while ((length = assetsDB.read(buffer))>0){
      dbOut.write(buffer, 0, length);
    }

    dbOut.flush();
    dbOut.close();
    assetsDB.close();
}
...

This will copy the database ‘localdb’ found in the assets folder and copy it to the database folder of my huuah.db package and naming it myfancydatabase. All done.

Using DDMS or the ADB tool

Sometimes it is a good idea to check if your files and databases are created properly. This can be done with the DDMS in the Eclipse IDE or with the ADB tool.

Eclipse DDMS

Go to the Window-menu, select Open Perspective and click the “Other” option. Select the DDMS option and click OK. This will open up a File Explorer and some other windows. The File Explorer can be used to view, delete and copy to and from the emulator by pulling or pushing files.

ADB tool

The adb-tool can, among many things, be used for file exploring. Open a adb shell and list the content of the database folder like this:

$ adb shell
# cd data/data/huuah.db/databases
# ls
myfancydatabase
#

Creating a SQLite database with a Firefox plugin

If your are using Firefox, there is a great simple plugin that lets your create and edit SQLite database. It can be found here. When downloaded and installed, goto the tools menu in Firefox and select the SQLite manager and your are ready.

There is only one thing you must remember, when creating the databases from scratch like this, is to manually create the android structure. This is done by running these to SQL commands:

CREATE TABLE "android_metadata" ("locale" TEXT DEFAULT 'en_US');
INSERT INTO "android_metadata" VALUES ('en_US');

Close and save the database, and copy the file to your assets folder.

Where I got stuck

I ran into quite a few obstacles when making the database connection for the very first time. I did find some answers as well:

Problem: public type databaseHelper must be definded

Solution: Well, I wasn’t thinking when creating my databaseHelper, so I just wrote it in the same file as my main function. Don’t do this. Bad idea. New classes must be placed in its own .java file.

Problem: I was getting loads of “database failure 14″

Solution: Don’t manually create the /data/data/PACKAGENAME/databases directory. User rights on the databases folder will be wrong and your are not allowed to write to the directory from your Android App. Remove the directory and let the Android software create it for you.

The end

I hope your found my post useful. Please post any comments you may have.

How to float it

Well – it can sometimes be quite difficult to understand how the float universe works. I will try to give some basic pointers and examples on the float left and float right technique and how it reacts in the layout.

The basic of id and classes

There are two ways to access HTML elements from CSS. You can either use id’s or class’es. Almost every HTML tag, if not all, allows the assignment of an id or class name. When element has an id or class, it can be accessed from CSS by using . or #.

ID are accessed with # (hash). Lets say we have a <div>-tag with the id set to mydiv:

<div id="mydiv">some content here</div>

The mydiv can then be access like this from CSS

#mydiv {
  width: 100px;
  height: 100px;
}

If we are using a class instead of an id, the code would lookup like this:

<div class="mydiv">some content here</div>

And

.mydiv {
  width: 100px;
  height: 100px;
}

id’s and class’es will not be covered in more details here.

Starting point

This article will use the following HTML as a starting point. It holds a simple div-”container” with contains another 3 divs.

<div class="container">
  <div class="class1">This is the first class</div>
  <div class="class2">This is the second class</div>
  <div class="class3">This is the third class</div>
</div>

Without any CSS it would look like this:

Not really that pretty and nice as we would like it to be, right?

Basic styling

Lets do some basic styling of the above code, to better see what’s going on.

.class1 {
  width: 200px;
  background-color: light-grey;
}
.class2 {
  width: 300px;
  background-color: white;
}
.class3 {
  width: 500px;
  background-color: grey;
}

This outputs:

Okay – now we can better see the difference between the 3 divs.

Lets float it

When floating left, the selected element will be placed along the left side of the next element.
When floating right, the selected element will be placed along the right side of the next element.

Left floating the first class:

.class1 {
  width: 200px;
  background-color: light-grey;
  float: left;
}

Okay, that went kinda like expected. Although – the class2 has a width set to 300px, so why does it wrap like that, when it should have enough space – the class1 is 200px and the class3 is 500px, so class1 and class2 should will up the exact same space as class3 below.

This is one of those questions I used to ask a friend of mine over at spiced2.com and he always answered “when in doubt, float left”. Ok then. Lets float class2 left as well:

.class1 {
          width: 200px;
          background-color: #DEDEDE;
          float: left;
}
.class2 {
          width: 300px;
          background-color: #006699;
          float: left;
}
.class3 {
          width: 500px;
          background-color: #009900;
}

Now it’s a lot better, but what will happen if we try to float right?

The first class is now floating right, and is therefor aligned to the right side of class2:

.class1 {
          width: 200px;
          background-color: #DEDEDE;
          float: right;
}
.class2 {
          width: 300px;
          background-color: #006699;
}
class3 {
          width: 500px;
          background-color: #009900;
}

The next step

Lets try a bit more advanced setup, where we will wrap some text around another element. To do this we have to place one element inside another like this:

<div class="container">
  <div class="class1"> <span class="class2">This is the second class</span>This is the first class This is the first class This is the first class This is the first class This is the first class This is the first class </div>
  <div class="class3">This is the third class</div>
</div>

To get the text in class wrapped around the class2 element, we have to set a float right on the class2. This makes it right aligned, and the text in class1 will then wrapped around it.

The CSS looks as follows:

.class1 {
          width: 500px;
          background-color: #DEDEDE;
          float: left;
}
.class2 {
          width: 200px;
          background-color: #006699;
          float: right;
}
.class3 {
          width: 500px;
          background-color: #009900;
}

Last words

That it. A very small and basic intro tutorial on the mysterious left and right floating. Enjoy.

A progress bar is quit easy to make, which I have described here is the Dialog Boxes post here and I will therefor not go into details with this.

Simple test layout

I have created a simple test layout like this:

XML layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<TextView android:id="@+id/TextView02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Maximum value"></TextView>

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="100" android:id="@+id/maximum"></EditText>

<TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Increment by"></TextView>

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5" android:id="@+id/increment"></EditText>

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Start" android:id="@+id/startbtn"></Button>

</LinearLayout>

There are two text fields. One to set the maximum value of the progress bar and one to set the increment value. When pushing the Start button a progress bar is displayed and in this example it will just update the progress bar every half a second (500ms) to demonstrate the result.

Updating the progress bar

To update the progress bar in the background, while something else is running the application has to use threads. I will be setting up a thread when the Start button is clicked. The thread will then execute some code, in this case just a simple handler that will update the progress bar, and when finished the thread will terminate itself.

When the Start button is activated the application will display a progress bar – I have set a maximum value of 200 and a increment value of 14:

Complete Java code

The complete java code looks like this. I have added comments in the code, so it should be self explanatory – if not just post a comment last on this page.

package huuah.progressthread;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.app.ProgressDialog;

public class progressthread extends Activity implements OnClickListener {
    ProgressDialog dialog;
    int increment;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Button startbtn = (Button) findViewById(R.id.startbtn);
        startbtn.setOnClickListener(this);
    }

    public void onClick(View view) { 

        // get the increment value from the text box
        EditText et = (EditText) findViewById(R.id.increment);
        // convert the text value to a integer
        increment = Integer.parseInt(et.getText().toString());

        dialog = new ProgressDialog(this);
        dialog.setCancelable(true);
        dialog.setMessage("Loading...");
        // set the progress to be horizontal
        dialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
        // reset the bar to the default value of 0
        dialog.setProgress(0);

        // get the maximum value
        EditText max = (EditText) findViewById(R.id.maximum);
        // convert the text value to a integer
        int maximum = Integer.parseInt(max.getText().toString());
        // set the maximum value
        dialog.setMax(maximum);
        // display the progressbar
        dialog.show();

        // create a thread for updating the progress bar
        Thread background = new Thread (new Runnable() {
           public void run() {
               try {
                   // enter the code to be run while displaying the progressbar.
                   //
                   // This example is just going to increment the progress bar:
                   // So keep running until the progress value reaches maximum value
                   while (dialog.getProgress()<= dialog.getMax()) {
                       // wait 500ms between each update
                       Thread.sleep(500);

                       // active the update handler
                       progressHandler.sendMessage(progressHandler.obtainMessage());
                   }
               } catch (java.lang.InterruptedException e) {
                   // if something fails do something smart
               }
           }
        });

        // start the background thread
        background.start();

    }

    // handler for the background updating
    Handler progressHandler = new Handler() {
        public void handleMessage(Message msg) {
            dialog.incrementProgressBy(increment);
        }
    };
}

Dialog boxes

Showing dialog boxes from an android application can be usefull.

This article will be using a layout like this – 4 buttons with their own function (complete code id listed last in this article):

Info boxes

An info box is called a Toast on the Android OS. A toast message is a small window that appear in the button half on the device screen. It should only be used as an information service to the user. The window disappears by itself, so as a developer you can not be sure that the user actually sees the message displayed. If you want to user to take action on the popup window, you should use an alert dialog instead – this is covered later on.

The Toast message is very easy to create. The most simple way to display a toast is by calling the maketext()-method like this:

...
Toast.makeText(this, "This is the Toast message", Toast.LENGTH_LONG).show();
...

This will display a box like this:

Alert boxes

The Alert box should be use when you want to make sure, that the user reads and takes action on the information window. To display the alert window, can be done like this:

...
            // prepare the alert box
            AlertDialog.Builder alertbox = new AlertDialog.Builder(this);

            // set the message to display
            alertbox.setMessage("This is the alertbox!");

            // add a neutral button to the alert box and assign a click listener
            alertbox.setNeutralButton("Ok", new DialogInterface.OnClickListener() {

                // click listener on the alert box
                public void onClick(DialogInterface arg0, int arg1) {
                    // the button was clicked
                    Toast.makeText(getApplicationContext(), "OK button clicked", Toast.LENGTH_LONG).show();
                }
            });

            // show it
            alertbox.show();
...

This will popup a window like this:

When is OK button is clicked, it will – in this example – show a toast message like this:

Yes/no boxes

If one button on the alert dialog isn’t enough we can use the setPositiveButton() and setNegativeButton() on the AlertDialog Builder like this:

...
            // prepare the alert box
            AlertDialog.Builder alertbox = new AlertDialog.Builder(this);

            // set the message to display
            alertbox.setMessage("This is the alertbox!");

            // set a positive/yes button and create a listener
            alertbox.setPositiveButton("Yes", new DialogInterface.OnClickListener() {

                // do something when the button is clicked
                public void onClick(DialogInterface arg0, int arg1) {
                    Toast.makeText(getApplicationContext(), "'Yes' button clicked", Toast.LENGTH_SHORT).show();
                }
            });

            // set a negative/no button and create a listener
            alertbox.setNegativeButton("No", new DialogInterface.OnClickListener() {

                // do something when the button is clicked
                public void onClick(DialogInterface arg0, int arg1) {
                    Toast.makeText(getApplicationContext(), "'No' button clicked", Toast.LENGTH_SHORT).show();
                }
            });

            // display box
            alertbox.show();
...

This will show a window like this:

When either of the buttons is clicked it will run the assigned listener. Here we have clicked the yes button:

Loading box

If you want to display a loading window or some kind of progress alert it can be done with the ProgressDialog like this:

...
            // prepare the dialog box
            ProgressDialog dialog = new ProgressDialog(this);

            // make the progress bar cancelable
            dialog.setCancelable(true);

            // set a message text
            dialog.setMessage("Loading...");

            // show it
            dialog.show();
...

This will popup a progress window like this:

This window will not close by itself. You have to make it complete, by running a code that increment the internal counter on the ProgressDialog, so that the progressdialog can calculate the percentage by itself. For this we should use a thread-based application, that runs some code in the background and from there set the progress bar at the given value. This is not covered in this article though.

Complete code

The small code samples above are shown here in the complete formation, including the main.xml layout.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Toast" android:id="@+id/toastbtn"></Button>
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Alert" android:id="@+id/alertbtn"></Button>
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Yes/No" android:id="@+id/yesnobtn"></Button>
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Progress" android:id="@+id/progressbtn"></Button>
</LinearLayout>

dialogboxes.java

package huuah.dialogboxes;

import android.app.Activity;
import android.os.Bundle;
import android.view.View.OnClickListener;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.app.ProgressDialog;

public class dialogboxes extends Activity implements OnClickListener {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // set a click listener on the toast button
        Button toast = (Button) findViewById(R.id.toastbtn);
        toast.setOnClickListener(this);

        // set a click listener on the alert button
        Button alert = (Button) findViewById(R.id.alertbtn);
        alert.setOnClickListener(this);

        // set a click listener on the yesno button
        Button yesno = (Button) findViewById(R.id.yesnobtn);
        yesno.setOnClickListener(this);

        // set a click listener on the progress button
        Button progress = (Button) findViewById(R.id.progressbtn);
        progress.setOnClickListener(this);
    }

    public void onClick(View view) {
        // which button is clicked?

        // the Toast button
        if (view == findViewById(R.id.toastbtn)) {
            // display the toast popup window
            Toast.makeText(this, "This is the Toast message", Toast.LENGTH_LONG).show();
        }

        // the Alert button the activated
        if (view == findViewById(R.id.alertbtn)) {

            // prepare the alert box
            AlertDialog.Builder alertbox = new AlertDialog.Builder(this);

            // set the message to display
            alertbox.setMessage("This is the alertbox!");

            // add a neutral button to the alert box and assign a click listener
            alertbox.setNeutralButton("Ok", new DialogInterface.OnClickListener() {

                // click listener on the alert box
                public void onClick(DialogInterface arg0, int arg1) {
                    // the button was clicked
                    Toast.makeText(getApplicationContext(), "OK button clicked", Toast.LENGTH_LONG).show();
                }
            });

            // show it
            alertbox.show();
        }

        // the yesno button is clicked
        if (view == findViewById(R.id.yesnobtn)) {
            // prepare the alert box
            AlertDialog.Builder alertbox = new AlertDialog.Builder(this);

            // set the message to display
            alertbox.setMessage("This is the alertbox!");

            // set a positive/yes button and create a listener
            alertbox.setPositiveButton("Yes", new DialogInterface.OnClickListener() {

                // do something when the button is clicked
                public void onClick(DialogInterface arg0, int arg1) {
                    Toast.makeText(getApplicationContext(), "'Yes' button clicked", Toast.LENGTH_SHORT).show();
                }
            });

            // set a negative/no button and create a listener
            alertbox.setNegativeButton("No", new DialogInterface.OnClickListener() {

                // do something when the button is clicked
                public void onClick(DialogInterface arg0, int arg1) {
                    Toast.makeText(getApplicationContext(), "'No' button clicked", Toast.LENGTH_SHORT).show();
                }
            });

            // display box
            alertbox.show();
        }

        // progress button clicked
        if (view == findViewById(R.id.progressbtn)) {
            // prepare the dialog box
            ProgressDialog dialog = new ProgressDialog(this);

            // make the progress bar cancelable
            dialog.setCancelable(true);

            // set a message text
            dialog.setMessage("Loading...");

            // show it
            dialog.show();
        }

    }
}

I hope this will the useful. If you want to read more on this subject, then take a look at some of the Android books out there

How to read and write files in you Android Application

When coding an application for the Android system, you will eventually need to store some data on the phones for later use. There are generally two ways of doing this – either in files or by using a SQLlite database.

Write to file

So your sitting there with your fancy newly developed application, but all your settings are going back to default values when the program starts. Why not just write the settings to a file and then read the file content when the application starts up.

To do this we need the OutputStream and OutputStreamReader, so lets import them like this:

import java.io.OutputStream;
import java.io.OutputStreamWriter;

Lets say the application has a save button somewhere and when this is clicked the onClick(View) is called. We can then add some code, to handle the file writing:

...
public void onClick(View view) {
...
// try to write the content
try {
  // open myfilename.txt for writing
  OutputStreamWriter out = new OutputStreamWriter(openFileOutput("myfilename.txt",0));
  // write the contents on mySettings to the file
  out.write(mySettings);
  // close the file
  out.close();
} catch (java.io.IOException e) {
  //do something if an IOException occurs.
}

There you go. The content from the mySettings variable should now be writting to the file myfilename.txt. How the settings come from the application to the mySettings variable is another subject and is not covered here.

Reading lines from a file

Now we have some data information writting to the myfilename.txt-file, that now exits on the Android device.

To read the information from the file, we need to the InputReader, InputReaderStream and BufferedReader, so just import them like this:

import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.BufferedReader;

All we have to do now, is open the myfilename.txt for reading. This could be done like this:

...
  // try opening the myfilename.txt
  try {
    // open the file for reading
    InputStream instream = openFileInput("myfilename.txt");

    // if file the available for reading
    if (instream) {
      // prepare the file for reading
      InputStreamReader inputreader = new InputStreamReader(instream);
      BufferedReader buffreader = new BufferedReader(inputreader);

      String line;

      // read every line of the file into the line-variable, on line at the time
      while (( line = buffreader.readLine())) {
        // do something with the settings from the file
      }

    }

    // close the file again
    instream.close();
  } catch (java.io.FileNotFoundException e) {
    // do something if the myfilename.txt does not exits
  }
...

We have now read the content of the myfilename.txt and made it available for the application.

To read more about this Android check out these books: here

Version 1.4 is now available here or at http://wordpress.org/extend/plugins/easyjscss/

Please post any comments regarding version 1.4 is this post.

My development setup is:

IDE: Eclipse IDE (setup guide here).
Phone: HTC Hero
Android version: 1.5 HTC Rom

I will be using the standard Android Project Skeleton in Eclipse as my base setup. This auto creates all the basic files needed, so these will not be covered here.

TableLayout on Android

The TableLayout is built using the TableLayout and the TableRow commands. There is no TableCols like the <td> tag in HTML. To align your view in columns you have to set the width of the elements and manually control the layout.

XML Layout

To make a basic layout with 2 rows and 4 textview I have a main.xml with this content:

<TableLayout android:id="@+id/TableLayout01" android:layout_width="wrap_content" android:layout_height="wrap_content">

  <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content">

    <TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 1-1"></TextView>
    <TextView android:id="@+id/TextView02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 1-2"></TextView>

  </TableRow>

  <TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" android:layout_height="wrap_content">

    <TextView android:id="@+id/TextView03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 2-1"></TextView>
    <TextView android:id="@+id/TextView04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 2-2"></TextView>

  </TableRow>

</TableLayout>

This creates a layout like this:

So we have now displayed a simple TableLayout.

Right aligning checkboxes

Many apps have a nice clean setup where the checkboxes is right aligned to the screen and this is actually very easy to achieve. You just have to set the width of the textview so it will push the checkbox to the right.

First step is to change the TextView02 to a Checkbox like this:

...
    <TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 1-1"></TextView>
    <CheckBox android:id="@+id/CheckBox01" android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>

This will output somethings like this:

Now we just have to align the checkbox.

We can do this by setting the width of the previous textfield like this:

<TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content"><TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 1-1" android:width="250px"></TextView>

Notice the width=”250px” in the end there. This results in:

But what is the screen size changes? The checkbox will then be placed 250px from the left because the width is hardcoded. Not that great – but yet very easy to adjust.

On the LayoutTable we can adjust stretching across columns, similar to the colspan tag in HTML.

...
<TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content"  android:stretchColumns="0">
...

This will make the first (“0″) column stretch as most as needed and allowed by the other elements.:

And with the screen flipped:

Complete XML layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content"  android:stretchColumns="0">

  <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content">
    <TextView android:id="@+id/TextView01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="textfield 1-1"></TextView>

    <CheckBox android:id="@+id/CheckBox01" android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>
  </TableRow>

  <TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" android:layout_height="wrap_content">
    <TextView android:id="@+id/TextView03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 2-1"></TextView>
    <TextView android:id="@+id/TextView04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="textfield 2-2"></TextView>

  </TableRow>

</TableLayout>
</LinearLayout>

Appending rows dynamically

Lets say you want to add rows to the TableLayout on depend during your app. No problem.

Add a button at the top of your application like this:

  <Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Add row"></Button>

  <ScrollView android:id="@+id/ScrollView01" android:layout_width="wrap_content" android:layout_height="wrap_content">

    <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="0">

      <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content">
        <TextView android:id="@+id/TextView01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="textfield 1-1"></TextView>

        <CheckBox android:id="@+id/CheckBox01" android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>
      </TableRow>

    </TableLayout>
  </ScrollView>

There is now a button available for handling clicks from the user and the TableLayout has been wrapped in a ScrollView which enables the scroll functionality.

Now for some Java code

package huuah.tablelayout;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TableLayout;
import android.widget.TextView;
import android.view.View;

import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.TableRow;
import android.widget.TableRow.LayoutParams;

public class tablelayout extends Activity implements OnClickListener {
    /** Called when the activity is first created. */

    //initialize a button and a counter
    Button btn;
    int counter = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // setup the layout
        setContentView(R.layout.main);

        // add a click-listener on the button
        btn = (Button) findViewById(R.id.Button01);
        btn.setOnClickListener(this);        

    }

    // run when the button is clicked
    public void onClick(View view) {

        // get a reference for the TableLayout
        TableLayout table = (TableLayout) findViewById(R.id.TableLayout01);

        // create a new TableRow
        TableRow row = new TableRow(this);

        // count the counter up by one
        counter++;

        // create a new TextView
        TextView t = new TextView(this);
        // set the text to "text xx"
        t.setText("text " + counter);

        // create a CheckBox
        CheckBox c = new CheckBox(this);

        // add the TextView and the CheckBox to the new TableRow
        row.addView(t);
        row.addView(c);

        // add the TableRow to the TableLayout
        table.addView(row,new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    }
}

So whenever the button is clicked, it adds a new row to the TableLayout and notice the Scrollbar from the ScrollView.

If you want more information and TableLayout and placement techniques I can recommend reading:

Thats it for now. Enjoy coding and please post some comments.