Dr. Ramkumar Lakshminarayanan article published in Tamil Computer Magazine. The content is about creating Layout Object in Android Application

1. ݇†ó£Œ´ ðô õ¬èò£ù «ôܾ†
è¬÷ õ®õ¬ñ‚è õNõ°‚Aø¶.
çŠ«ó‹ «ôܾ† (Frame Layout), hQò˜
«ôܾ† (Linear Layout), «ìHœ «ôܾ†
(Table Layout), K«ô®š «ôܾ† (Relative
Layout) «ð£¡ø¬õ Ü®Šð¬ìò£è ðò¡ð´‹
«ôܾ†è÷£°‹. Þî¬ùˆ îMó «ìŠ «ô
ܾ† (Tab Lay out) ñŸÁ‹ Lv† MÎ (List
view) à¼õ£‚è º®»‹.
çH«ó‹ «ôܾ† :
«ôܾ† ÝŠªü‚†èO™ âO¬ñò£ù¶
çH«ó‹ «ôܾ† Ý°‹. Þ¶ ÝŠªü†´è¬÷
ܬñŠðîŸè£ù ªõŸPìñ£°‹. çH«ó‹
«ôܾ† ðò¡ð´ˆ¶‹«ð£¶ F¬óJ™ ¬õ‚
°‹ ÝŠªü†´èœ
å¡ø¡H¡ å¡ø£è
Þ¼‚°‹.
hQò˜ «ôܾ† :
hQò˜ «ôܾ†
®™ ܬñ‚èŠð´‹
æKò¡«ìê¡ (Orien
tation) ñFŠHŸ° ãŸð
ªõ˜®‚èô£è«õ£(Ver
tical) ý£K꣡ìô£
è«õ£ (Hori zontal)
ܬñ‚èŠð´‹. ðì‹1
™ àœ÷¶ «ð£¡ø
ܬñŠH¬ù hQò˜
«ôܾ† Íô‹ à¼
õ£‚è º®»‹.
1. ¹Fò Hó£ªü‚† å¡P¬ù â‚OŠC™
(Eclipse) à¼õ£‚è º®»‹. Üî¬ìò ªðò˜
Hello Linear Layout âù ¬õˆ¶‚ ªè£œÀƒèœ.
2. res / layout / main.xml(content1.txt) àœ
÷¶ «ð£¡Á à¼õ£‚è «õ‡´‹.
Þ‰î„ ê£¡P™ Í¡Á º¬ø hQò˜ «ô
ܾ† ðò¡ð´ˆîŠð†´œ÷¶. ºî™ hQò˜
«ôܾ† îù¶ æKò¡«ìê¡ ªõ˜®‚è™
ñFŠH¬ù‚ ªè£‡´œ÷¶.
ÞîÂœ Þó‡´ hQò˜ «ôܾ† ðò¡
ð´ˆîŠð†´œ÷¶. ÜõŸÁœ ºî™ hQò˜
«ôܾ†®¡ æKò¡«ìê¡ ý£K꣡ì™
ñFŠH¬ù‚ ªè£‡´œ÷¶, Ü´ˆî hQò˜
«ôܾ†®¡ æKò¡«ìê¡ ªõ˜®‚è™ ñFŠ
H¬ù‚ ªè£‡´œ÷¶.
3. Hello Linear Layout.java â¡ø ¬ðL™
«ôܾ†®¬ù °PŠHì «õ‡´‹. ÜîŸè£è
OnCreate() - ªñˆî´ ðò¡ð´Aø¶.
4. Þî¬ù„ ªêò™ð´ˆFŠ 𣼃èœ.
K«ô®š «ôܾ† :
K«ô®š «ôܾ†
®™ ܬñ‚èŠð´‹
ÝŠü‚†´èœ ªõš
«õÁG¬ôJ™Þ¼‚°
ñ£Á ܬñˆ¶‚
ªè£œ÷ô£‹. ꣡
ø£è, ºî™ ÝŠªü‚†
Þì¶ ð‚èˆFL¼‰¶
Þ¼‚è «õ‡´‹.
Ü´ˆî ÝŠªü‚†
ï´M™ Þ¼‚è «õ‡
´‹. Ü Ü´ˆî
ÝŠªü‚†´èœõô¶
ð‚èˆF™ Þ¼‚è
«õ‡´‹.
Þšõ£Á 嚪õ£¼ ÝŠªü‚†´‹ åš
ªõ£¼ G¬ôJ™ Þ¼‚°ñ£Á ܬñˆ¶‚
«ôܾ†
ÝŠªü‚†
android:layout_below="@id/label"/>
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text="OK" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/
apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Type here:"/>
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/edit
box_background" Gó™-2

2. Ý¡†ó£Œ´ -2
Þ󣋰ñ£˜ ªô†²Iï£ó£òí¡
05
ªè£œ÷ô£‹. ðì‹ 2 ™ àœ÷¶ «ð£¡ø
F¬ó¬ò ܬñˆ¶‚ ªè£œ÷ Gó™ ðò¡ð´
Aø¶.
«ìHœ «ôܾ† :
«ìHœ «ôܾ† Íô‹ îèõ™èœ «ó£
(Row) ñŸÁ‹ è£ô‹ (Column) º¬øJ¬ù
Ü®Šð¬ìò£è‚ ªè£‡´ ܬñ‚èŠð´‹.
<?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">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="red"
android:gravity="center_horizontal"
android:background="#aa0000"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="green"
android:gravity="center_horizontal"
android:background="#00aa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="blue"
android:gravity="center_horizontal"
android:background="#0000aa"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="yellow"
android:gravity="center_horizontal"
android:background="#aaaa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="row one"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row two"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row three"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row four"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
MO‹¹‚ «è£†®¬ù (Bordor
line) ªîK» ñ£Á‹ Ü™ô¶
ªîKò£îõ£Á‹ à¼õ£‚A‚
ªè£œ÷ô£‹.ðì‹3™àœ÷¶
«ð£¡ø F¬ó¬ò ܬñˆ¶‚
ªè£œ÷ (Content 3. txt) Gó™
ðò¡ð´Aø¶.
AK† «ôܾ†:
ðìƒè¬÷õK¬êò£èAK†
(Grid) õ®õˆF™ 裇HŠ
Gó™-1

3. <?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/
apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Import..."
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Export..."
android:padding="3dip" />
<TextView
android:text="Ctrl-E"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:layout_column="1"
android:text="Quit"
android:padding="3dip" />
</TableRow>
</TableLayout>
<?xml version="1.0" encoding="utf-8"?>
<GridView
xmlns:android="http://schemas.android.com/
apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridview = (GridView)
findViewById(R.id.gridview);
gridview.setAdapter(new
ImageAdapter(this));
gridview.setOnItemClickListener(new
OnItemClickListener() {
public void onItemClick(AdapterView<?>
parent, View v, int position, long id) {
Toast.makeText(HelloGridView.this, ""
+ position, Toast.LENGTH_SHORT).show();
}
});
}
Gó™-3
Gó™-4 Gó™-5

4. public class ImageAdapter extends
BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item
referenced by the Adapter
public View getView(int position, View
convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not
recycled, initialize some attributes
imageView = new
ImageView(mContext);
imageView.setLayoutParams(new
GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleTy
pe.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position
]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.sample_2,
R.drawable.sample_3,
R.drawable.sample_4,
R.drawable.sample_5,
R.drawable.sample_6,
R.drawable.sample_7,
R.drawable.sample_0,
R.drawable.sample_1,
R.drawable.sample_2,
R.drawable.sample_3,
R.drawable.sample_4,
R.drawable.sample_5,
R.drawable.sample_6,
R.drawable.sample_7,
R.drawable.sample_0,
R.drawable.sample_1,
R.drawable.sample_2,
R.drawable.sample_3,
R.drawable.sample_4,
R.drawable.sample_5,
R.drawable.sample_6,
R.drawable.sample_7
};
}
Gó™-6
- ªî£ì¼‹
ð ªð¼‹ð£½‹ AK† «ôܾ† (Grid
Layout) ðò¡ð´Aø¶. AK† «ôܾ†
à¼õ£‚°‹ º¬øJ¬ùŠ 𣘊«ð£‹.
1. ¹Fò Hó£ªü‚† å¡P¬ù Hello Grid
View â¡ø ªðòK™ à¼õ£‚°ƒèœ.
2. Sample - images.zip â¡ø ç¬ðL¬ù
www.yourandriod.org â¡ø Þ¬íò î÷ˆ
FL¼‰¶ ðFMø‚A res/drawable/â¡ø ç«ð£™
ìK™ 裊H (Copy) ªêŒò
«õ‡´‹.
3main.xml ç¬ðL™
(content 4 txt) GóL¬ù
à¼õ£‚è«õ‡´‹.ÞF™
AK† MÎ (Grid View)
ðò¡ð´ˆîŠð†´œ÷¶.
4. Ü´ˆîî£è, Hello
Grid View. java ç¬ðL™
OnCreate() method grid
àì¡ Þ¬íŠ¹ ãŸ
ð´ˆF, ðìƒè¬÷ 裇
H‚è (content 5. txt) Gó™ ðò¡ð´Aø¶.
5. Image Adapter J¡ ªêò™èœ å¼ Class
ç¬ðô£è Þ¼‚è «õ‡´‹. Üî¬ìò Gó™
(Content 6. txt) Ý°‹.
getview() method Íô‹ ImageAdapter ™
ªè£´‚èŠð†ì ðìˆFŸè£ù MÎ à¼õ£‚èŠ
ð†´œ÷¶ SetLayoutParams(ViewGroup.Layout
Params) Þ¬õ àòó‹ ñŸÁ‹ ÜèôˆF¬ù‚
°PŠHìŠ ðò¡ð´Aø¶. SetScale Type (Image
View.ScaleType) Þ¬õ ðìƒèœ ¬ñòˆF™
ܬñò «õ‡´‹ â¡ðî¬ù °PŠHìŠ ðò¡
ð´Aø¶.
SetPadding(int,int,int,int) Þ¬õ ðì‹
âšõ£Á Þ¬ìªõO«ò£´, å«ó ñ£FKò£è
ܬñòŠ ªðø «õ‡´‹ â¡ðî¬ù °PŠHì
ðò¡ð´Aø¶.
ThumbIds â‰î ðìˆF¬ù Grid -™ ªè£‡´
õó «õ‡´‹ â¡ðî¬ù °PŠHì ðò¡ð´
Aø¶. Þšõ£Á «ôܾ†®¬ù âO¬ñò£ù
º¬øJ™ ܬñ‚è ݇†ó£Œ´ õNõ°ˆ¶œ
֦.