Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to deal with Table Layout in Android

In this tutorial we will explore the aspects of Android Table Layout and show you how it all fits together.

Table Layout? Tell me more!

Table Layout does exactly what it says on the tin, it arranges items into rows and columns just like a regular table layout in HTML for example. See this link for further information.

Table Layout

Figure 1: Table Layout

Step 1:

Create a new Android Project in Eclipse and name it Application8. Name the main activity ApplicationActivity8. (Note I’m using build target 2.3.3 to run my app on)

Step 2:

Copy and paste this code into your string.xml file:

Listing 1: string.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Application8 - Table Layout</string>

</resources>

Step 3:

Copy and paste this code into your Application8Activity (i.e. your main activity). Remember not to copy over your package name at the top of your file.

Listing 2: Application8Activity

import android.app.Activity;
import android.os.Bundle;

public class Application8Activity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Step4:

Copy and paste this code into your main.xml file:

Listing 3: main.xml file.

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

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:padding="10dip"
             >
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Row 1"
		        android:gravity="center"
		        android:textSize="24sp"
		        android:layout_span="3"
		        android:background="#FF260A" />
		            
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:padding="5dip">
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Row 2, Column 1"
		        android:gravity="center"
		        android:textSize="15sp"
		        android:background="#1DA43F" />
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Row 2, Column 2"
		        android:gravity="center"
		        android:textSize="15sp"
		        android:background="#F03D19" />
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Row 2, Column 3"
		        android:gravity="center"
		        android:textSize="15sp"
		        android:background="#0A2BE9" />
                                   
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:padding="5dip" >
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Row 3"
		        android:gravity="center"
		        android:textSize="15sp" />
            
        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dip" >
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="100dp"
		        android:text="Row 4, Column 1 spanning 2 columns"
		        android:gravity="center"
		        android:textSize="15sp"
		        android:layout_span="2"
		        android:background="#81726F" />
            
             <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Row 4, Column 2"
		        android:gravity="center"
		        android:textSize="15sp" />
            
        </TableRow>
        
        <TableRow
            android:id="@+id/tableRow5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:padding="5dip" >
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Image:"
		        android:gravity="center"
		        android:textSize="15sp"
		        android:textColor="#000000"
		        android:background="#F0E031" />
            
          <ImageView
	        android:id="@+id/imageView1"
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content"
	        android:src="@drawable/ic_launcher"
	        android:background="#31F0E7"
	        android:gravity="center"/>
          
           <ImageView
	        android:id="@+id/imageView2"
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content"
	        android:src="@drawable/ic_launcher"
	        android:background="#CE0AFF"
	        android:gravity="center"/>
                      
        </TableRow>
        
    </TableLayout>
    
<TextView
        android:id="@+id/space1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="" />
    
<TableLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="*"
        android:stretchColumns="*"
        android:orientation="vertical" >
        
    <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Table 2"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_span="4"
		        android:background="#FFFFFF"
		        android:layout_margin="1dp" />
		            
        </TableRow>
        
           
    <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="A"
		        android:textColor="#000000"
		        android:layout_margin="1dp"
		        android:gravity="center"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="B"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="C"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="D"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
		            
        </TableRow>
        
     <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="E"
		        android:textColor="#000000"
		        android:layout_margin="1dp"
		        android:gravity="center"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="F"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="G"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="H"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
		            
        </TableRow>
        
      <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="I"
		        android:textColor="#000000"
		        android:layout_margin="1dp"
		        android:gravity="center"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="J"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="K"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
            
            <TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="L"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_margin="1dp"
		        android:background="#FFFFFF"/>
		            
        </TableRow>
       
    </TableLayout>
    
</LinearLayout>

When you have copied and pasted all the code with no errors, you will get this when the application is run:

Experimenting with Table Layout.

Figure 2: Experimenting with Table Layout.

Examining the code

Ok now examine the code in our main.xml file as the string.xml and Application8 Activity.java are pretty straightforward. Firstly I’ll point out that I have put two Table Layouts within a Linear Layout. Notice that we set the width of all the children of the TableLayout to "match_parent". The width is always "match_parent". However we can set the height of the children of Table Layout. The default value is "wrap_content". However if the child is a Table Row the height is always "wrap_content". Also note that Table Layout does not put lines in between rows and columns. In this tutorial I use padding and android:layout_margin to achieve the desired look and feel. I will point this out again later.

I use android:shrinkColumns="*" and android:stretchColumns="*" so all the columns can stretch and shrink. Looking at the first row, we have a textfield with a red background android:background="#FF260A". Notice width is "match_parent", gravity is "center" and span is equal to 3. android:layout_span="3" means that this textview covers 3 columns as clearly seen by comparing to row 2.

Looking at Row 2, we can see that there are 3 columns. android:padding="5dip we use a padding of 5dip on the Row. Take note of gravity, text, width and height etc. Onto Row 3, we can see it’s pretty straight forward. We just have a textview in the row. The textview’s width is set to "match_parent", height is "wrap_content", gravity is set to center etc.

Now when we come to observing Row 4, we can see that the first column spans 2 columns android:layout_span="2" as we can see by comparing it to row 2 and the second column on row 4 takes up one column in width. Also note how I set the height attribute of column 1 row 4 to 100dp android:layout_height="100dp". Row 4 column 2 then stretches to the same height as column 1 in the same Row.

I gave Row 5 a white background android:background="#FFFFFF" and set the padding to 5dip android:padding="5dip". In this row I have a textview and 2 imageviews. Here I have some fun with the background colors. Note what the attributes of each item are set to. We can see how the padding works as we can see some white above the items and to the left side of the textview and the right side of the last imageview.

Now we have a look at the second table layout where I show you how to show a table in what you’d expect to see while displaying information such as numbers or letters. I placed a textview in-between the table layouts just for spacing.

For the first row we just insert a textview to represent a heading for the table. We give it a white background and set the attributes like so:


<TextView
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:text="Table 2"
		        android:textColor="#000000"
		        android:gravity="center"
		        android:layout_span="4"
		        android:background="#FFFFFF"
		 android:layout_margin="1dp" /> 

So we can see the text colour is black, background is white, gravity is center and the layout margin is 1dp. The margin is used here so that we can have lines between each row. We also use it to give an impression of a line in-between columns (we can see the background color i.e. black to give the impression of a line). The rest of the table is created by putting 4 textviews into each row and by setting the text attribute to the required letter, setting the background to white, text color to black, gravity center and margin again to 1dip.

Conclusion

After following this tutorial you should have a good idea of how the table layout is used in android development. Feel free to experiment with the attributes a little and see how it all works. Tables are a great way to display information to the user. With the help of this tutorial you can now display useful information to the user and you have also another option when deciding what layout to use. I hope you learned something from this tutorial and that you enjoyed it. See you next time.

See also



Has designed and developed several android applications from scratch which are available on Google Play.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login