Develop Reference

Arranging layout using custom images as buttons

I have images created in my res/drawable directory with appropriate hdpi, mdpi, xhdpi, and xxhdpi sizings, and I would like to use them instead of regular buttons. I've done that part, but I need some help with the layout and formatting. I'll write my questions first, and then I'll post code and two screenshots below. Any advice is appreciated. Thanks!
Details on my device and the images:
Nexus 5 running Lollipop.
hdpi A, B, C, D are 96x96. E is 72x72
mdpi A, B, C, D are 64x64. E is 48x48.
xhdpi A, B, C, D are 128x128. E is 96x96.
xxhdpi A, B, C, D are 192x192. E is 144x144.
Questions:
1) Why has button E on the last row stretched horizontally? Button E is a square with rounded edges, just like all the others, but it is scaled down. Why did it stretch, and how can I fix it?
2) How can I arrange the drawables with space between them that will adjust dynamically based on screen size to keep the proportions the same? (See Picture 2 below)
fragment_main.xml: (See Picture 1 below to see how this looks)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/a_selector"/>
<Button
android:id="#+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/b_selector"/>
</TableRow>
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/c_selector"/>
<Button
android:id="#+id/buttonD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/d_selector"/>
</TableRow>
<TableRow
android:gravity="center|bottom"
android:layout_weight="0">
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/e_selector"/>
</TableRow>
</TableLayout>
</LinearLayout>
Picture 1, the current layout:
Picture 2, the desired layout (but with button E properly shaped):

For E to be shaped properly, try
<TableRow
android:gravity="center"
android:layout_weight="0">
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
</TableRow>
For spacing between images try using margin property.
Below is the complete code with spacing:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:gravity="bottom">
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonA"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
<Button
android:id="#+id/buttonB"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
</TableRow>
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonC"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
<Button
android:id="#+id/buttonD"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
</TableRow>
</TableLayout>
<TableLayout
android:id="#+id/fragmentMainTableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="center">
<TableRow
android:gravity="center"
android:layout_weight="0">
<Button
android:id="#+id/buttonE"
android:layout_margin="15dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/abc_ab_share_pack_holo_dark"/>
</TableRow>
</TableLayout>
</LinearLayout>
Replace the image names

try this. hope it helps u...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<TableRow
android:layout_weight="1"
android:gravity="center|bottom"
android:weightSum="4" >
<Button
android:id="#+id/buttonA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<Button
android:id="#+id/buttonB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
</TableRow>
<TableRow
android:layout_weight="0"
android:gravity="center_horizontal"
android:weightSum="4" >
<Button
android:id="#+id/buttonC"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<Button
android:id="#+id/buttonD"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
</TableRow>
<TableRow
android:layout_weight="1"
android:gravity="center" >
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#drawable/ic_launcher" />
</TableRow>
</TableLayout>
</LinearLayout>
convert ur image like this.

Check with Below layout, i didnt changed much but when i tested it working as per your need.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/a_selector" />
<Button
android:id="#+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/b_selector" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:id="#+id/buttonC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/c_selector" />
<Button
android:id="#+id/buttonD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/d_selector" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/e_selector" />
</TableRow>
</TableLayout>
</LinearLayout>

Try this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TableLayout
android:id="#+id/fragmentMainTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/a_selector"/>
<Button
android:id="#+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/b_selector"/>
</TableRow>
<TableRow
android:gravity="center_horizontal"
android:layout_weight="0">
<Button
android:id="#+id/buttonC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/c_selector"/>
<Button
android:id="#+id/buttonD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/d_selector"/>
</TableRow>
<TableRow
android:layout_marginTop="50dp"
android:gravity="center"
android:layout_weight="0">
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/e_selector"/>
</TableRow>
</TableLayout>
</LinearLayout>

Android TableLayout With Different Column's Width In A Row

I am trying to do my first complex GUI, but now i can't to solve this problem.
The first column of the first two rows only needs to contain the label, while the second column of the first two rows must occupy the remaining space.
In this snapshot the problem that i noticed is that the first column is larger than i would like.
This is the piece of code that implements that piece of layout.
...
...
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/linear_layout_background"
android:stretchColumns="*"
android:shrinkColumns="*">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp" >
<TextView
android:id="#+id/textViewPlateValueLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/plateValue"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/productID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back"
android:ems="5"
android:text="#string/blank"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp" >
<TextView
android:id="#+id/ztlLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ztl"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/ztlShow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back"
android:text="#string/blank"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center" >
<TextView
android:id="#+id/isAllowed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/blank"
android:background="#drawable/back"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
...
...
In addition, since they are really impractical, I would like to ask you some advice on the best approaches to use than this.

You can try using layout_weight like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="horizontal"
tools:context=".MainActivity" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#ff00ff"
android:stretchColumns="*"
android:shrinkColumns="*">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
<TextView
android:id="#+id/textViewPlateValueLabel"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Label1:"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/productID"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#00ff00"
android:ems="5"
android:text="Some Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
<TextView
android:layout_weight="3"
android:id="#+id/ztlLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Label2:"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_weight="7"
android:id="#+id/ztlShow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#00ff00"
android:text="Some Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center" >
<TextView
android:id="#+id/isAllowed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text"
android:background="#0088ff"
android:textAppearance="?android:attr/textAppearanceLarge" />
</TableRow>
</TableLayout>
</LinearLayout>

I wouldn't use TableLayout, if I were you. I'd probably use LinearLayout or RelativeLayout. You can get the same effect with some of the XML attributes. This is akin to using HTML's table attribute vs. using divs to simulate tables.
So, instead of a table, you can have LinearLayout inside of LinearLayout to simulate a table.

Although canDroid, could be sufficient to some of us, it didn't worked for me, I tried all kind of tricks to make the TableLayout to work. I found LinearLayout much easier to use, here is an example of TableLayout "like" layout using LinearLayout, few cells with a thumbnail, and few without.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="94dp"
android:layout_margin="5dp"
android:text="#string/nut1" />
</LinearLayout>
<View
android:layout_width="395dp"
android:layout_height="2dp"
android:background="#color/colorPrimary"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<ImageView
android:layout_width="94dp"
android:layout_height="94dp"
android:adjustViewBounds="false"
android:background="#drawable/one"
android:contentDescription="#string/nut3"
android:cropToPadding="false"
android:saveEnabled="false"
android:scaleType="center" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="94dp"
android:layout_margin="10dp"
android:text="#string/nut3" />
</LinearLayout>
</LinearLayout>

Android fix the image size

In my screen I am having 3 buttons and in next row below those buttons I am having 3 names (name corresponding to those buttons) but my problem is that when ever name changes then size of buttons also changes but I do want to fix the size of buttons here is my code please help me
<TableLayout android:background="#drawable/toptab"
android:layout_width="fill_parent" android:id="#+id/tableLayout"
android:layout_height="wrap_content"
android:stretchColumns="1" android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<TableRow>
<ImageButton android:id="#+id/btnPrev" android:background="#drawable/imgPrev"
android:layout_marginLeft="5dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<ImageButton android:id="#+id/btnRefresh"
android:layout_gravity="center" android:background="#drawable/refreshbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageButton android:id="#+id/btnNext"
android:background="#drawable/imgNext"
android:layout_width="5dp"
android:layout_height="20dp"
android:layout_marginRight="5dp" />
</TableRow>
<TableRow >
<TextView android:id="#+id/prev" android:text="Hk" android:layout_marginLeft="5dp" />
<TextView android:id="#+id/refresh" android:text="Refresh" android:layout_gravity="center" />
<TextView android:id="#+id/next" android:text="RS" android:layout_marginRight="5dp" />
</TableRow>
</TableLayout>

If you want to avoid fixing button size, then I would recommend using different layout than TableLayout, maybe RelativeLayout and TextViews with property alignBaseline or LinearLayout with weight properties could do the trick.

You should use linearlayout instead of table layout and use Weight property for aligning buttons and text view in equal dimensions, so here if you write more text in text view , button size will not increase. Also you can add more buttons in same manner. Below is the XML file and screen shot.
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewTextTextViewTextTextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>

Android Layout Percentage/Proportion Resize

I have 3 layouts. First and third ones are RelativeLayout and the middle one is TableLayout. What I want is the TableLayout should lay over 80% of screen. And 10% for the others. How could I do this? android:layout_weight did not help me. Please could you put a code for this solution?

Ok here are some steps:
set to the relative and table layouts android:layout_width to 0dp
in the parent layout add android:weightSum to 10
in each of the 3 child layouts add android:layout_weight and set the first & third to the value of 1 and the middle table layout to 8.
Here is the code and screenshot:
<?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="horizontal"
android:weightSum="10" >
<RelativeLayout
android:id="#+id/leftPane"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="#336699"
android:layout_weight="1">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10% wide"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="8">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#00FFFF">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="row 1" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#33FFFF" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="row 2" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#66FFFF" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="row 3" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#99FFFF" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="row 4" />
</TableRow>
</TableLayout>
<RelativeLayout
android:id="#+id/rightPane"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="#336699"
android:layout_weight="1">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10% wide"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
</LinearLayout>

insert an image in a tablelayout without stretching it Android

I'm having some trouble getting pictures inside a tablelayout...actually, each I have 2 columns and when i put a picture in a cell of the table, it's completely stretched and disproportionnated...I can't find how to make it stay it's original inside the cell and let the rest of the space filled by white background for instance....
XML is like that:
<TableLayout android:layout_width="fill_parent" android:stretchColumns="*"
android:layout_marginLeft="3dip" android:layout_marginRight="10dip"
android:layout_height="wrap_content">
<TableRow android:layout_marginBottom="10dip">
<TextView android:id="#+id/tv01" android:text="text1"
android:textSize="14sp" android:layout_margin="1dip"
android:layout_height="wrap_content" android:textColor="#color/bleuLink"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#color/background"></TextView>
<Button android:id="#+id/add" android:background="#drawable/addressbook"
android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>
<Button android:id="#+id/call" android:background="#drawable/greenphone"
android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>

Your images are stretching because of this line of code.
<TableLayout android:layout_width="fill_parent" android:stretchColumns="*" />
Because you tell your table to fill its parent and then set stretchable columns to all, your layout forces its children to fill the required space. Remove the stretchable columns attribute or set it to a comma delineated list of indexes for the columns you want to stretch.
<TableLayout android:layout_width="fill_parent"
android:stretchColumns="0, 2" android:layout_marginLeft="3dip"
android:layout_marginRight="10dip" android:layout_height="wrap_content">
<TableRow android:layout_marginBottom="10dip">
<TextView android:id="#+id/tv01" android:text="text1"
android:textSize="14sp" android:layout_margin="1dip"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"></TextView>
<Button android:id="#+id/add" android:background="#drawable/icon"
android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>
<Button android:id="#+id/call" android:background="#drawable/icon"
android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>
</TableRow>
</TableLayout>
Try the code above as an example.

An alternative solution is to add the Button into a Layout and set the layout attribute android:layout_height="wrap_content".
<TableLayout android:layout_width="fill_parent"
android:stretchColumns="*" android:layout_height="wrap_content">
<TableRow>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="center">
<TextView android:id="#+id/tv01" android:text="text1"
android:textSize="14sp" android:layout_margin="1dip"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1">
</TextView>
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="center">
<Button android:id="#+id/add" android:background="#drawable/icon"
android:layout_height="wrap_content" android:layout_width="wrap_content">
</Button>
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="center">
<Button android:id="#+id/call" android:background="#drawable/icon"
android:layout_height="wrap_content" android:layout_width="wrap_content">
</Button>
</LinearLayout>
</TableRow>
</TableLayout>