I need to line buttons up horizontally, however, my buttons are appearing vertically. They are all stacked up on top of each other.. do you know how I can do this horizontally?
<TableLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableLayout>
Using Linear layout you can easily represent your button in horizontally.
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</LinearLayout>
You have not identified a TableRow for your TableLayout. Imagine how a table is created, row's go horizontally and columns go vertically.
Fixing your code would look something like this
<TableLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableRow>
</TableLayout>
Alternatively, to make things easier, I would recommend using a LinearLayout with the orientation set to horizontal.
Use a linearlayout as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#646464"
android:gravity="center|center_vertical"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/inner_artist_profile"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="Profile"
android:textColor="#AEAEAE"
android:background="#drawable/sub_nav_left" />
<Button
android:id="#+id/inner_artist_news"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="News"
android:textColor="#AEAEAE"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_profile"
android:background="#drawable/sub_nav_middle" />
<Button
android:id="#+id/inner_artist_events"
android:layout_width="60dp"
android:layout_height="25dp"
android:text="Events"
android:textColor="#AEAEAE"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_news"
android:background="#drawable/sub_nav_middle" />
<Button
android:id="#+id/inner_artist_videos"
android:layout_width="60dp"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_events"
android:background="#drawable/sub_nav_middle"
android:text="Videos"
android:textColor="#AEAEAE" />
<Button
android:id="#+id/inner_artist_albums"
android:layout_width="60dp"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/inner_artist_videos"
android:background="#drawable/sub_nav_right"
android:text="Albums"
android:textColor="#AEAEAE" />
</RelativeLayout>
this is from a working project modify id's according to need
Instead of a TableLayout, I think you should use a LinearLayout with a WeightSum. To distribute the widths of the 4 buttons evenly, set their widths to 0 and their weight to 1. Then set the weight sum of the LinearLayout to 4 (the number of buttons). Like this:
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>
There are many ways to do this.Please check following is one of the way
<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:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
Add TableRow to TableLayout and here is the working code
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="88dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal" >
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
<Button android:layout_weight="1" />
</TableRow>
</TableLayout>
Or encapsulate the Button objects within a TableRow tag e.g
<TableRow>
<Button></Button>
</TableRow>
Related
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>
I want to do something like this:
Button 1 centered in the top left part of the screen
Button 2 in the top right
Button 3 in the bottom left
and three or four buttons in the bottom right.
I'm new so I can't post a picture.
I tried different layouts but zero results.
Thanks for the help.
What you want is a RelativeLayout: http://developer.android.com/reference/android/widget/RelativeLayout.html
Something along the lines of:
<RelativeLayout>
<Button android:layout_alignParentTop="true" android:layout_alignParentLeft="true" />
<Button android:layout_alignParentTop="true" android:layout_alignParentRight="true" />
<Button android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" />
</RelativeLayout>
From that you should be able to figure out the rest. I suggest reading up on RelativeLayout and its alignment parameters
EDIT- After you explained in the comments, try something like:
<LinearLayout android:orientation="vertical">
<LinearLayout android:orientation="horizontal" android:layout_weight=".5">
<LinearLayout android:layout_weight=".5">
<Button android:layout_gravity="center" />
</LinearLayout>
<LinearLayout android:layout_weight=".5">
<Button android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:layout_weight=".5">
<LinearLayout android:layout_weight=".5">
<Button android:layout_gravity="center" />
</LinearLayout>
<LinearLayout android:layout_weight=".5">
<Button android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
That will fill your screen with 4 equally-sized 'blocks' and have a button positioned directly in the center of each one.
After some work I made it with a TableLayout and some LinearLayouts.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/TableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4" />
</LinearLayout>
</TableRow>
There was a question posted like 5 min ago about this.
How to properly distribute 4 buttons on an android layout
I don't want to be rude, but you should try harder.
I want to create a neat two-columns input form like this:
My xml layout code so far:
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblTitle" />
<EditText
android:id="#+id/txtTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblAuthor" />
<EditText
android:id="#+id/txtAuthor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblPublisher" />
<EditText
android:id="#+id/txtPublisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblIsbn" />
<EditText
android:id="#+id/txtIsbn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.375"
android:text="#string/submit" />
<Button
android:id="#+id/btnCancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.375"
android:text="#string/cancel" />
</LinearLayout>
</LinearLayout>
You can see that I used LinearLayout utilizing layout_weight & layout_width="0dp" trick to make the two columns division looks neat. In HTML code, we can use with % width size. But in android xml layout, there is no %-value for layout_width. I want to avoid hardcoded dp-values for column width. Is it possible in android?
So far that's the best I can do. Now I want to resize the ISBN textbox to become smaller (50% size less from the current size). But I cannot resize the textbox width since layout_width must be "0dp" for layout_weight to work. I also want to do the same with the Submit and Cancel button size.
I wonder if using LinearLayout is a correct way to create input form neatly in android. Could TableLayout better for this? I heard that you cannot change child view's layout_width in TableLayout.
There are some people here recommend me using RelativeLayout, I tried it but it doesn't support layout_weight.
Alright, I found out the way with LinearLayout. The trick is by wrapping the Views that you want to resize with LinearLayout. Then the width of View itself can be adjusted by using: android:layout_width or android:ems property.
Here is the xml code:
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblTitle" />
<EditText
android:id="#+id/txtTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblAuthor" />
<EditText
android:id="#+id/txtAuthor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblPublisher" />
<EditText
android:id="#+id/txtPublisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="0.25"
android:text="#string/lblIsbn" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:orientation="horizontal" >
<EditText
android:id="#+id/txtIsbn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:orientation="horizontal" >
<Button
android:id="#+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5"
android:text="#string/submit" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5"
android:text="#string/cancel" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
you should also consider the gridLayout , which can be used (by using an android library) on API7+ .
here's a link:
http://android-developers.blogspot.com/2011/11/new-layout-widgets-space-and-gridlayout.html
I'm probably missing something obvious here but I can't seem to figure this out. I am looking for a result like 1, 5, or 6, a single row of 3 evenly distributed buttons that fill the width of the screen. Unfortunately however, each of these methods seem to have something wrong with them. 1 gives me a warning that "This TableRow layout or its TableLayout parent is possibly useless" and 5 and 6 give "Nested weights are bad for performance". So basically I'm wondering what the best way to do this is. Should I ignore the warning on no.1 or can I get them to display properly with just a TableRow or TableLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >
<!-- No.1 -->
<TableLayout android:id="#+id/tableLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="*" >
<TableRow android:id="#+id/tbRow0" android:layout_width="wrap_content" android:layout_height="wrap_content" >
<Button android:id="#+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num3" />
</TableRow>
</TableLayout>
<!-- No.2 -->
<TableRow android:id="#+id/tbRow1" android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num3" />
</TableRow>
<!-- No.3 -->
<TableRow android:id="#+id/tbRow2" android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn7" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn8" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn9" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="#string/num3" />
</TableRow>
<!-- No.4 -->
<TableRow android:id="#+id/tbRow3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="*" >
<Button android:id="#+id/btn10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num3" />
</TableRow>
<!-- No.5 -->
<TableRow android:id="#+id/tbRow4" android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn13" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num1" />
<Button android:id="#+id/btn14" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num2" />
<Button android:id="#+id/btn15" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num3" />
</TableRow>
<!-- No.6 -->
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn16" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num1" />
<Button android:id="#+id/btn17" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num2" />
<Button android:id="#+id/btn18" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num3" />
</LinearLayout>
<!-- No.7 -->
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn19" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num1" />
<Button android:id="#+id/btn20" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num2" />
<Button android:id="#+id/btn21" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/num3" />
</LinearLayout>
</LinearLayout>
I think 5 is the correct one, plus I'm not getting the nested weights warning.
Maybe it's related to what Agarwal pointed.
Edit: sorry I though 5 was using a LinearLayout. What I mean is:
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" >
<Button android:id="#+id/btn13" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num1" />
<Button android:id="#+id/btn14" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num2" />
<Button android:id="#+id/btn15" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="#string/num3" />
</LinearLayout>
In your xml file after first row you are closing tablelayout but even you are using table rows in 2 ,5 rows might be that a problem.
If you need it for only one then then better to have linearlayout because performance not to bad because you have a small xml file which is ok.
I am currently designing a ButtonBar with 5 buttons (they will all be ImageButtons, but for now, only 3 of them are). This is my first android project so I'm learning as I go along. I'm trying to weight each button equally, without scaling them (have equal padding rather than equal width). This is my code so far:
<LinearLayout
android:id="#+id/back"
android:orientation="horizontal"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:background="#000000"
style="#android:style/ButtonBar"
android:weightSum="5"
>
<ImageButton
android:id="#+id/info_button"
android:padding="20dp"
android:background="#drawable/info"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
<Button
android:id="#+id/wishlist_button"
android:text="#string/wish_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:padding="20dp"
android:textSize="15dip"
android:textColor="#b7b7b7"></Button>
<Button
android:id="#+id/buy_button"
android:text="#string/buy_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:padding="20dp"
android:textSize="15dip"
android:textColor="#b7b7b7"/>
<ImageButton
android:id="#+id/dislike_button"
android:padding="20dp"
android:background="#drawable/dislike_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/like_button"
android:padding="20dp"
android:background="#drawable/like_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
/>
This is what it looks like now:
stretched weighted: http://i.imgur.com/MAfjp.png
This is what I want it to look like (closely):
non-stretched equally padded: http://i.imgur.com/vXTEy.png
Thank you for helping. I've been searching for the answer for a while and have tried so much already.
Here it is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/back"
android:orientation="horizontal"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:background="#000000"
style="#android:style/ButtonBar"
android:gravity="center"
>
<ImageButton
android:id="#+id/info_button"
android:background="#null"
android:src="#drawable/info"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
/>
<Button
android:id="#+id/wishlist_button"
android:text="#string/wish_label"
android:background="#null"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textSize="15dip"
android:textColor="#b7b7b7"></Button>
<Button
android:id="#+id/buy_button"
android:text="#string/buy_label"
android:background="#null"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:textSize="15dip"
android:textColor="#b7b7b7"/>
<ImageButton
android:id="#+id/dislike_button"
android:background="#null"
android:src="#drawable/dislike_button"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/like_button"
android:background="#null"
android:src="#drawable/like_button"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
/>
</LinearLayout>
I don't know how style="#android:style/ButtonBar" is set, so if it doesn't show properly try remove it.
You could add a spacer element in between each of the images/buttons and assign the layout_weight to the spacer elements instead of the images/buttons. So it would look something like this:
<LinearLayout
android:id="#+id/back"
android:orientation="horizontal"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:background="#000000"
style="#android:style/ButtonBar"
>
<ImageButton
android:id="#+id/info_button"
android:padding="20dp"
android:background="#drawable/info"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_weight="1" />
/>
<Button
android:id="#+id/wishlist_button"
android:text="#string/wish_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="20dp"
android:textSize="15dip"
android:textColor="#b7b7b7"></Button>
<LinearLayout
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/buy_button"
android:text="#string/buy_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="20dp"
android:textSize="15dip"
android:textColor="#b7b7b7"/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/dislike_button"
android:padding="20dp"
android:background="#drawable/dislike_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="#+id/like_button"
android:padding="20dp"
android:background="#drawable/like_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
</LinearLayout>
This may not be the most elegant solution since it adds several views to your layout, but it's worked for me in the past.
You should consider using only image button with equal size images with equal weight inside your LinearLayout.
Regards,
Stéphane