Develop Reference

Buttons in LinearLayout issue

I have a custom dialog which has 3 buttons and sometimes it has one button only. When I have 3 buttons, the LinearLayout fits those buttons well in itself. But when I have just one button, it gives the whole width available to a single button making that button look too big. I want that, if there's only one button, it should only take half the the complete width available or should wrap content (Button image.) See following images for reference-

Refer this XML file which is similar to your requirement. Just visibility to gone to not required button.
<?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="3" 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"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button"/>
</LinearLayout>

In order to have one button take up half the available screen width you need to
set android:weightSum="2" in the parent LinearLayout
set android:layout_weight="1" in the Button

Android button layout - get two buttons side-by-side across entire screen

I have two buttons which I would like to appear side-by-side horizontally, but together they fill the horizontal length of the phone. The height is wrap content, that's fine. My issue right now is that only one button is showing up (stretching across the screen).
Here is my XML code:
<LinearLayout
android:id="#+id/page_buttons"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
<Button
android:id="#+id/prevButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Previous"
/>
<Button
android:id="#+id/nextButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Next"
/>

Change your Buttons XML to include the layout_weight attribute:
<Button android:id="#+id/nextButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Next"/>

Since nobody is explaining why their solutions work, I will give it a go.
The problem lies in the layout of the buttons. The two concerned attributes are layout_width and layout_weight.
In other layout systems, when you indicate that each element of a layout has to fill the parent (layout_width="fill_parent"), they do so by distributing equally the space of the parent between them. So, each of them would have the same size.
Instead, in Android's layout system, if both elements have
layout_width="fill_parent" the first element (in your case, the
Previews button) will be stretched to fill the parent and the second
(or third, or etc.) will not have any space left to distribute, so it
will not be visible.
Now, to make it understand that you want both buttons to show, you set the layout_weight for each button. To make the buttons have the same size, set the same layout weight to both of them.
The layout_weight defines how many "parts" (or segments) of the parent each of the buttons occupy. The parent will be cut into a number of segments equal to the sum of the children's segments. If you want to make one button three times bigger then the other, you have to assign it the number of parts equal to the number of parts of the first button, multiplied by three.
So if you want your Next button to be two times bigger then the
Previews button, you can do this:
for Previews button: layout_weight=1
for Next button: layout_weight=2
In consequence, the parent will be cut in 3 parts, 2 of which will be allocated to the Next button and 1 to the Previews button.
The example taken here is for buttons and horizontal layout, but this will work just fine for any type of object and also for vertical layout parent.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/entry"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/space"/>
<TextView
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"/>
<Button
android:id="#+id/button02"
android:layout_toRightOf="#id/button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/entry"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Seems like you want two equal buttons, not wrapped content. I created a centered spacer using TextView, and relatively aligned to that. Left button to parent left and spacer, Right button to Left Button and parent right.

Parent of your Button is Linear-Layout, and you are setting Button's width as fill parent and hence it is taking the whole space. You hav two options to Implement this...
Give the fixed width for your button(eg 50dip).
Give the width as 0dp and insert one more attribute in both button "weight" and give 0.5dip for each...

The two buttons should be on a linearlayout. The linear layout should be horizontal and each button has a weight of 1. This should give you two buttons with equal size along the screen width. A sample is here
Horizontal orientation: check the 2 Buttons at the end of this xml layout

Your Requirement is
<LinearLayout
android:id="#+id/page_buttons"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/prevButton"
android:layout_width="0dp"
android:weight="0.5"
android:layout_height="wrap_content"
android:text="Previous"
/>
<Button
android:id="#+id/nextButton"
android:layout_width="0dp"
android:weight="0.5"
android:layout_height="wrap_content"
android:text="Next"
/>

<?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="wrap_content"
android:layout_centerHorizontal="true">
<TextView
android:text="#+id/SomeText"
android:id="#+id/TextView01"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:background="#android:drawable/bottom_bar"
android:paddingLeft="4.0dip"
android:paddingTop="5.0dip"
android:paddingRight="4.0dip"
android:paddingBottom="1.0dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_below="#+id/TextView01">
<Button
android:id="#+id/allow"
android:layout_width="0.0dip" android:layout_height="fill_parent"
android:text="Allow"
android:layout_weight="1.0" />
<Button
android:id="#+id/deny"
android:layout_width="0.0dip" android:layout_height="fill_parent"
android:text="Deny"
android:layout_weight="1.0" />
</LinearLayout>
</RelativeLayout>

I found the leading issue for people who still seems to not get what they want.
when using buttons with their conventional (out-of-the-box/default) background, it has a built in margin.
If you try changing the background manually with a single color, you can tell easily that you just need to set a separate background.
other than that when you have the weights put in, it will work.

Scrolling Text Above Buttons, Buttons Fixed At Bottom

I'm having difficulty getting the GUI layout results I want in an Android app.
A brief description of what I want:
The GUI is to include two TextViews and four Buttons.
The four Buttons are to be laid out horizontally, all in the same row, and fixed at the bottom-right of the screen.
The first of the two TextViews is to start at the top of the screen, with text contents varying from one line to many dozens of lines - more than will fit on the screen without scrolling. So, scrolling is sometimes necessary to see all of the contents. Even when scrolling is necessary, the buttons are not to participate in the scrolling: they are to always remain fixed in a single row at the bottom-right of the screen. When scrolling is necessary, the scrolling text is to always be above the buttons - the buttons are not to overlay the text.
The second of the two TextViews is to appear immediately beneath the first TextView, and will normally only add one or two lines to the total length of text. When scrolling is necessary, the second TextView is to scroll with the first TextView, always appearing immediately beneath the first TextView.
Additional constraints include that I want the layout to look decent on all of the following Android devices, in both vertical and horizontal screen layouts:
Android 1.5 API3 QVGA MDPI (320x240) devices
Android 1.5 API3 HVGA MDPI devices
Android 1.6 API4 QVGA LDPI devices
Android 2.3 API10 WVGA800 devices
Everything with screens in between the above devices
I'll worry about tablets another day (like tomorrow).
--
I've tried many different combinations of Layouts, but nothing yet has come very close to the goal.
(With some of the layout combinations I tried, I can fix the buttons at the bottom-left of the screen with RelativeLayout, but everything I try with the scolling text always results with the text scrolling behind the buttons - the buttons overlay the text. I haven't figured out getting the buttons to align to the bottom-right.)
If anyone is up for helping me figure this out, the layout example xml below is a conversation starting point, but it definately fails to achieve the goal result, as demonstrated in the following screen shots, generated using this same layout example xml. (While some of the screen shots demonstrate the same problem, they help to show where I'm at with the different screens.)
<?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="wrap_content">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 1. Text varies from a few lines to many more lines than what fits on the screen. Scrolling is necessary to see it all." />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 2. Short text entry sits below Text View 1." />
</LinearLayout>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 1" />
<Button
android:id="#+id/button_2"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 2" />
<Button
android:id="#+id/button_3"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 3" />
<Button
android:id="#+id/button_4"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 4" />
</LinearLayout>
</LinearLayout>
1.5_API3_HVGA_Horizontal_MDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
1.5_API3_HVGA_Vertical_MDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
1.5_API3_QVGA_240x320_MDPI - short_text:
Issue: 4th Button is smashed. Prefer text on first three buttons to wrap when necessary, leaving enough room to display 4th button.
--
1.5_API3_QVGA_320x240_MDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
1.6_API4_QVGA_Horizontal_LDPI - long_text:
Issue: When the text almost fills the screen, the row of buttons get smashed. The row of buttons should not be smashed, and should be fixed at the bottom-right of the screen. The text should scroll above the buttons.
--
1.6_API4_QVGA_Horizontal_LDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
1.6_API4_QVGA_Horizontal_LDPI - very_long_text, scrollbar at top:
Issue: The buttons are not on the screen. They should be fixed at the bottom-right of the screen.
--
1.6_API4_QVGA_Horizontal_LDPI - very_long_text, scrollbar at bottom:
Issue: The buttons are no where to be found, though the text scrollbar is at the bottom. They should be fixed at the bottom-right of the screen.
--
1.6_API4_QVGA_Vertical_LDPI - short_text:
Issue: The buttons should align with the bottom-right of the screen.
--
Any advice?
--
Additional Info: When I try to use RelativeLayout, and fix the buttons at the bottom of the screen with android:layout_alignParentBottom="true", then my problem is that I don't know how to fix the bottom of the scroll view with the top of the buttons. Using android:layout_alignBottom="#id/buttons" just aligns the bottom of the scroll view with the bottom of the buttons, but then the buttons overlay the text, like this:
--
Update: The problem of fixing the buttons to the bottom-right, with the scrolling text above the buttons is resolved.
Here's the changed layout XML that works so far (paste more text into text view 1 if you want to see the scrolling):<?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">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 1. Text varies from a few lines to many more lines than what fits on the screen. Scrolling is necessary to see it all." />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 2. Short text entry sits below Text View 1." />
</LinearLayout>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right">
<Button
android:id="#+id/button_1"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 1" />
<Button
android:id="#+id/button_2"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 2" />
<Button
android:id="#+id/button_3"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 3" />
<Button
android:id="#+id/button_4"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Button 4" />
</LinearLayout>
</LinearLayout>I have a remaining problem for which I'll post a new question.

Set your ScrollView's layout_height to 0dp and set its layout_weight to 1. That should push the buttons to the bottom of the screen but no further.

Change the layout used to a RelativeLayout, this will help you attach your buttons accross the bottom of the screen.
I also agree with the use of the layout_height="0dip" and layout_weight="1" on the scrollable that can be of varrying length.
EDIT
I just changed the code to this and it worked fine for me on my HTC Desire. It should hopefully work on your test cases. Ended up just using a linear layout, but it seems fine.
<?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">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 1. Text varies from a few lines to many more lines than what fits on the screen. Scrolling is necessary to see it all." />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View 2. Short text entry sits below Text View 1." />
</LinearLayout>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button_2"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button_3"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="Button 3" />
<Button
android:id="#+id/button_4"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:text="Button 4" />
</LinearLayout>
</LinearLayout>

LinearLayout text wrap problem when having two buttons of same size plus one stretched in the center

Looks like there's a plenty of questions about centering, same size etc, but so far I didn't find the exactly my case so I dare to ask :)
What I need is a layout of three buttons like this:
[ previous ][*select*] [ next ]
where [previous] and [next] buttons are of the same size (i.e. in this case, size of the [previous] button as it is bigger), and the [*select*] button should stretch to occupy all of the available width.
Following the hints of making two buttons in LinearLayout same sized, i came up with the following xml file:
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Previous" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Select" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
This almost works :)
Except one thing: instead of making Next button to match the size of Previous button, android makes Previous button to be the size of the Next :)
And because of this the text "Previous" gets wrapped in two lines, like
Previ
ous
Dunno if this is a bug or not, but can you advice me a workaround or some another way to achive the desired layout?
Thank you!

I'd suggest using a RelativeLayout
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false">
<Button
android:id="#+id/previous"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Previous"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/next"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Next"
android:layout_alignParentRight="true"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Select"
android:layout_toRightOf="#id/previous"
android:layout_toLeftOf="#id/next" />
</RelativeLayout>
This should work.

If you are including "android:layout_weight" you should give either "android:layout_width" or "android:layout_height" as "fill_parent"
modify your code like this
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Previous" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:text="Select" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Next" />

In that sort of case I would go for a TableLayout, in which you have one row, and a weight of 1 for EACH button. and the stretchColumn attribute put to column 1. Does this make any difference?

I'm not sure if you can match a size to some other besides by doing this in code. The easiest solution is probably adjusting the previous and next button widths in dp/sp units until they look good and have the select button be the only one with the layout_weight attribute.

Button text appears vertical

My project was working fine, when suddenly the text on my buttons was being displayed vertically. By which I mean instead of map_infobutton displaying
Info
it was displaying
I
n
with the f and o beyond the bounds of the button, even though I have specified height=wrap_content in the TableLayout containing the buttons.
It appears fine in the Layout tab in eclipse, and only appears vertical in the emulator (not tried on target hardware)
getPaddingLeft for one of the buttons returns 11 at various points in the code. Not sure where it gets that from, but the spacing looks bigger than that anyway. I did have three buttons and took one away, but the problem existed with both two and three buttons.
My layout is:
<?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/map_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingTop="8px"
android:paddingBottom="8px"
android:gravity="center"
android:textColor="#color/header_foreground"
android:background="#color/header_background"
android:text="#string/map_header"/>
<TableLayout
android:id="#+id/map_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingTop="4px"
android:paddingLeft="2px"
android:paddingRight="2px"
android:stretchColumns="*"
android:textColor="#color/footer_foreground"
android:background="#color/footer_background">
<TableRow>
<Button
android:id="#+id/map_infobutton"
android:layout_width="0px"
android:layout_weight="1"
android:text="#string/map_infobutton" />
<Button
android:id="#+id/map_selectbutton"
android:layout_width="0px"
android:layout_weight="1"
android:text="#string/map_selectbutton" />
</TableRow>
</TableLayout>
<LinearLayout
android:id="#+id/map_selectiondetails"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/map_footer"
android:orientation="horizontal"
android:gravity="center"
android:textColor="#color/main_foreground"
android:background="#color/main_background" >
<TextView
android:id="#+id/map_selectionname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectiondistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
</LinearLayout>
<SurfaceView
android:id="#+id/map_map"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_above="#id/map_selectiondetails"
android:layout_below="#id/map_header"
android:clickable="true"/>
</RelativeLayout>
Any ideas? Also if you have any comments on how I'm creating the layout, as I'm new to this and it seems like there are a lot of options available, but I'm trying to make it as simple as possible.

I had a similar problem.
I see that you have multiple buttons that you want to have the same width, so you specify the button's width as "0px" and the weight as "1". This is exactly what I did.
When I set the button text within the XML file, things look fine. However, I have one button that changes is text depending on whether a process is running or not. In my case, it is similar to the situation where a button toggles from "Start..." to "Stop..." After the text changes, it prints vertically and only the top one or two letters of each button are shown.
After reading your post, it occurred to me that, perhaps, the text was being set before the button width had been determined, and then not updated once the button width changes according to the "weight".
I modified it such that in each button, it now reads:
android:layout_width="fill_parent" instead of "0px"
In theory, this should have the same effect. However, in practice, the button width is adjusted before the text is updated. The behaviour is now correct.
Rob