06/05/12

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard

Developers' Blog: iPhone Programming, Developer News, Interviews And Tutorials

Mobile Orchard
Tutorials Reviews Interviews Tools News Giveaways Resources Tips Contact Advertise Marketplace

Search...

The iPhone App

Search

Android App Development Layouts Part Two: Table and Absolute Layouts
by Min a Sa m y on 2 4 . Nov , 2 0 1 0 in A n dr oid, T u t or ia ls

Subscribe to RSS

Table Layout:
Organizing widgets in a table is a famous approach in HTML design where you construct a table of a number of rows and cells and distribute the controls over the cells to achieve a consistent look for your UI. Android provides a similar technique. In android you define the number of rows by your own and android determines the number of cells in each row according to the number of widgets in each row.

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Etryu nm" TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"ne or ae> <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"5p" nri:aothih=wa_otn" <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Sbi" nri:et"umt / > <TBEO> /ALRW <TBEAOT /ALLYU>

You can define a table and add rows and views to it programmatically like this: Tbeaott=e Tbeaotti) alLyu lnw alLyu(hs; Tbeo t=e Tbeo(hs; alRw rnw alRwti) Bto bnnwBto(hs; utn t=e utnti) bnstet"el"; t.eTx(Hlo) t.dVe(t) radiwbn; t.dVe(r; ladiwt) stotnVe(l; eCnetiwt)

Spanning Multiple Columns:

A table cell can span multiple columns like this:

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Etryu nm" TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"ne or ae> <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"5p" nri:aothih=wa_otn" <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Sbi" nri:et"umt

mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/

1/9

06/05/12
/ >

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard
<TBEO> /ALRW <ALRW TBEO> <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Cne" nri:et"acl / > <TBEO> /ALRW <TBEAOT /ALLYU>

<ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Sann Toclms adodlyu_ TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"pnig w oun" nri:aots

Or programmatically like this: Tbeo.aotaastPrm =nwTbeo.aotaas) alRwLyuPrm raas e alRwLyuPrm(; tPrm.pn=5 raassa ; Tbeo tteo =nwTbeo(hs; alRw ilRw e alRwti) TxVe tte=nwTxVe(hs; etiw il e etiwti) ttestaotaastl) il.eLyuPrm(rp; tteo.dVe(il) ilRwadiwtte; Also you can choose which column to put your widget by using android:layout_column property, you define the Zero-based index of the column where you want your widget to be:

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Etryu nm" TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"ne or ae> <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"5p" nri:aothih=wa_otn" <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Sbi" nri:et"umt / > <TBEO> /ALRW

<ALRW TBEO> <ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Sann Toclms adodlyu_ TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"pnig w oun" nri:aots <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Cne" nri:et"acl / > <TBEO> /ALRW <ALRW TBEO> <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Hl" nri:et"ep adodlyu_oun"" nri:aotclm=1 / > <TBEO> /ALRW <TBEAOT /ALLYU>

Note:
mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/ 2/9

06/05/12

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard
if you specify an index greater than the actual cells count, the widget wont appear. For example in the previous example if android:layout_column had a value greater than 2 the widget wouldnt appear.

Using Separators:
Table layout also allows you to put widgets directly under <TableRow> the tag to act as a separator between rows:

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Etryu nm" TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"ne or ae> <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"5p" nri:aothih=wa_otn" <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Sbi" nri:et"umt / > <TBEO> /ALRW <ALRW TBEO> <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Cne" nri:et"acl / > <TBEO> /ALRW <IWadodlyu_egt"p"adodbcgon=#0" VE nri:aothih=5x nri:akrud"f0> <ALRW TBEO> <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Hl" nri:et"ep adodlyu_oun"" nri:aotclm=5 / > <TBEO> /ALRW <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=Sprtr nri:et"eaao" / > <TBEAOT /ALLYU>

<ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Sann Toclms adodlyu_ TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"pnig w oun" nri:aots

Stretching Columns:
In table layout each column occupies space equal to the size of the largest widget in it. But you can set the width of any column to take the largest available space, just like setting the width to 100 % in HTML. This is done by setting the property android:stretchColumns to the index of the column, also you can set multiple columns by separating them with a comma. Look at the layout below:

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Etryu nm" TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"ne or ae> <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"0p" nri:aothih=wa_otn" <TBEO> /ALRW <TBEAOT /ALLYU> Now we gonna to add android:stretchColumns=0 to the table layout and see what its gonna look

mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/

3/9

06/05/12
like:

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Etryu nm" TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"ne or ae> <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"0p" nri:aothih=wa_otn" <TBEO> /ALRW <TBEAOT /ALLYU>

Column 0 occupied the largest available space. You can set this property from code like this: Tbeaott=e Tbeaotti) alLyu lnw alLyu(hs; t.eClmSrthbe0 tu) lstountecal(, re; the setColumnStretchable(ColumnIndex, IsStretchable) method parameters are the column index and a Boolean value to indicate it is going to be stretched.

Shrinking Columns:
Now what if we have a column that have a large content. Android columns by default do not wrap their content. Look at this layout:

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"0p" nri:aothih=wa_otn" <TBEO> /ALRW <TBEAOT /ALLYU>

<ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Pes etryu nm adsm vr v TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"lae ne or ae n oe ey

See column zero occupies large space that column 1 is not visible. We can use android:shrinkColumns property to wrap content of a certain column or for multiple columns by assigning column numbers separeted by commas. When we use the property with column zero it will be like this:

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Pes etryu nm adsm vr v TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"lae ne or ae n oe ey <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"0p" nri:aothih=wa_otn" <TBEO> /ALRW <TBEAOT /ALLYU>

mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/

4/9

06/05/12

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard

Its like using style=white-space:wrap; style in HTML You can set the property from code like this: Tbeaott=e Tbeaotti) alLyu lnw alLyu(hs; t.eClmSrnal(,tu) lstounhikbe0 re; The setColumnShrinkable(columnIndex, isShrinkable) method parameters are the column index and a Boolean to indicate it si going to be shrinked.

Hiding Columns:
Finally if you want to make some columns invisible you can use the property android:collapseColumns the same way we used the last two properties.

<ALLYU xlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"ilp TBEAOT mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl_ <ALRW TBEO> <DTETadodlyu_it=10x adodlyu_egt"rpcnet> EITX nri:aotwdh"0p" nri:aothih=wa_otn" <TBEO> /ALRW <TBEAOT /ALLYU>

<ETIWadodlyu_it=wa_otn"adodlyu_egt"rpcnet adodtx=Pes etryu nm adsm vr v TXVE nri:aotwdh"rpcnet nri:aothih=wa_otn" nri:et"lae ne or ae n oe ey

See that column zero is invisible. You can use this property from code like this: Tbeaott=e Tbeaotti) alLyu lnw alLyu(hs; t.eClmClasd0 tu) lstounolpe(, re; The method setColumnCollapsed(columnIndex, isCollapsed) parameters are the column index and a Boolean to indicate that its going to be collapsed This is just like using the style=display:none; in HTML

Other functions can be called from code:

TableLayout.setShrinkAllColumns(Boolean shrinkAllColumns) : shrinks all colums TableLayout.setStretchAllColumns(Boolean stretchAllColumns): stretches all columns

Absolute layout:
Note:
the absolute layout class is deprecated, you are encouraged to use Frame Layout or Relative layout. The reason of that is that it wont be compatible with all the android phones as they have different screen sizes and resolutions.

mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/

5/9

06/05/12

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard
absolute layout lays widgets by specifying their exact X and Y positions. In android the origin (0,0) coordinate is located at the top left of the screen. you can use Absolute Layout only if your application is targeted for a certain phone type so that you can be sure that it will display properly. absolute layout is defiend in XML as <AbsoluteLayout> by default, if you define any control in absolute layout without defining its x,y coordinates, it will be placed in the origin point at (x,y)=(0,0) if you define x,y values that are too large, the widget will not appear on the screen you can specify the values of x and y by many units as shown:

<BOUEAOTxlsadod"tp/shmsadodcmakrsadod adodlyu_it=fl_aet adodlyu_egt"i ASLTLYU mn:nri=ht:/cea.nri.o/p/e/nri" nri:aotwdh"ilprn" nri:aothih=fl <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=pae a 1010pxl (x" nri:et"lcd t 0,3 ies p) adodlyu_=10x nri:aotx"0p" adodlyu_=10x nri:aoty"3p" / > <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=pae a 010pit (t" nri:et"lcd t ,5 ons p) adodlyu_=0t nri:aotx"p" adodlyu_=10t nri:aoty"5p" / > <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=pae a 0705ice (n" nri:et"lcd t .,. nhs i) adodlyu_=07n nri:aotx".i" adodlyu_=05n nri:aoty".i" / > <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=pae a 33mliees(m" nri:et"lcd t , ilmtr m) adodlyu_=3m nri:aotx"m" adodlyu_=3m nri:aoty"m" / > <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=pae a 020dniyidpnatpxl (p" nri:et"lcd t ,7 est needn ies d) adodlyu_=0p nri:aotx"d" adodlyu_=20p nri:aoty"7d" / > <utn Bto adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodtx=pae a 010saeidpnatpxl (p" nri:et"lcd t ,8 cl needn ies s) adodlyu_=0p nri:aotx"s" adodlyu_=10p nri:aoty"8s" / > <ASLTLYU> /BOUEAOT

To define absolute layout from the code you can use the following code: AsltLyu asa=e AsltLyu(hs; boueaot blynw boueaotti)

mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/

6/9

06/05/12

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard
Bto bnnwBto(hs; utn t=e utnti) bnstet"el"; t.eTx(Hlo) stotnVe(bly; eCnetiwasa) the absolutelayout.layoutparams function has the following constructor: AbsoluteLayout.LayoutParams(width,height,position X,position Y).

asa.dVe(t,nwAsltLyu.aotaasAsltLyu.aotaasWA_OTN,boueaotLyuPrm.RPCNET1 blyadiwbn e boueaotLyuPrm(boueaotLyuPrm.RPCNETAsltLyu.aotaasWA_OTN,0

Similar articles:

Adobe officially launches CS6 suite introduces $30/m onth Creative Cloud

WIN: Top Android Win copies of Top titles from Pearson!!! selling Android books

Developer of CloudSkipper releases hot new android app: HD Widgets, w ith discount

Android App Developm ent Layouts Part Three: Fram e Layout and Scroll View

Tags: Android, Android App Development Dear Diary: A review of Momento App Roundup: Best Games and Time Wasters

3 Responses to Android App Development Layouts Part Two: Table and Absolute Layouts

1. Pete 26. Nov, 2010 at 7:44 am # 123 POP is another great time waster game. Number puzzle brain twister. Video teaser: http://www.youtube.com/watch?v=jPjDSNBa1vw App store link: http://itunes.apple.com/ca/app/123-pop/id400457558?mt=8
Reply

2. mano 02. Sep, 2011 at 2:32 am # Hi can we convert the above padding pixel value into iphone xy coordinates please help me sorry for my naughty english
Reply

Trackbacks/Pingbacks
1. Is there any good book/tutorial on Android layout creation? - Quora - 24. Jan, 2011 [...] Hamel These tutorials will help you get started:http://mobileorchard.com/androidhttp://mobileorchard.com/androidhttp://mobileorchard.com/android Options Insert a dynamic date hereView All 0 [...]

Leave a Reply
Name Mail (will not be published) (Required) Website

mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/

7/9

06/05/12

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard

Submit Comment
SUPPORTERS

POPULAR RIGHT NOW

Tutorial: JSON Over HTTP On The iPhone Android App Development:Threading part 1: Handlers 7 UI Design Resources for iPhone Developers Tutorial: Networking and Bonjour on iPhone 31 iPhone Applications With Source Code App Roundup: The Best iPhone Barcode Scanners Hello There: A CoreLocation Tutorial Finding iPhone Memory Leaks: A Leaks Tool Tutorial

RECENT COMMENTS

ediv on How To Make Your App Stand Out With

The New iOS 5 Appearance API

ediv on How To Make Your App Stand Out With

The New iOS 5 Appearance API

Andrew Yakov lev on iOS Advanced

Programming: The Image picker

D on Using SQLite with iOS

Toki Solutions Broadcast & Technology Solutions Partner Apple encourages developers to sign up for Developer ID ahead of the Mountain Lion release this Summer on Apples Worldwide Developers Conference (WWDC) to kick off June 11

PARTNERS

mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/

8/9

06/05/12
Office Products Website Builder

Android App Development Layouts Part Two: Table and Absolute Layouts | Mobile Orchard

2008-2011 Mobile Orchard and the Bar-Tree Logo are service marks.

mobileorchard.com/android-app-development--layouts-part-two-table-and-absolute-layouts/

9/9