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>
Related
My application is intended to be used in portrait mode. The application itself is locked in landscape mode (in the manifest) because I am working with an OpenCV JavaCameraView.
I would like to position a row of buttons along the bottom edge of the screen (as the user sees it). This is the right-hand side of the screen, as the phone sees it. I've tried using a LinearLayout and playing around with the gravity settings, but this orientates the buttons so that the text is facing according to the landscape orientation; e.g. when the phone is held in portrait mode (as intended), the text is orientated so that the bottom of the text is pointing left (because it has been told it is in landscape mode).
Is there any way I can make the buttons and the LinearLayout ignore the portrait/landscape settings and force them to behave as I would like?
This is my current .xml file for the activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:opencv="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<org.opencv.android.JavaCameraView
android:id="#+id/main_activity_surface_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ImageView
android:id="#+id/recordingIconImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/circle_red"
android:visibility="invisible" />
<TextView
android:id="#+id/movement"
android:rotation="270"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text=""
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#FF0000" />
<LinearLayout
android:id="#+id/button_row_linear_layout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:orientation="vertical" >
<Button
android:id="#+id/button_retry"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Retry" />
<Button
android:id="#+id/button_start"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Start" />
<Button
android:id="#+id/button_next"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Next" />
</LinearLayout>
</RelativeLayout>
***Edit:
Adding images to clarify (as suggested in comments) and have already switched to relative layout on my own, so the .xml is also updated. Image of current state:
As you can see I've got the buttons where I would like them (used android:rotation="270"). Two issues now:
1) The text of the TextView is clipped offscreen. I'm pretty sure this is because the sizing constraints are calculated as if it is not rotated and only after layout occurs is it rotated (this is a guess, but it does appear as if that is what's happening)
2) I can't seem to get the buttons to expand to take up available space inside the linear layout.
Any suggestions would be very welcome!
Cheers.
I have posted the exact layout below. I want to show an image and text vertically centered inside the footer. I have applied:
android:gravity="center_vertical|center"
To both the LinearLayout containing these elements and the TextView inside but nevertheless the whole line image and text appears way too far towards the top of the footer. I want it centered vertically but instead it is in the top 30 % of the footer at all times.
<?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" >
<TextView
android:id="#+id/someMessageMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_margin="10dip"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical|center"
android:paddingBottom="2dip"
android:paddingTop="16dip" >
<ImageView
android:id="#+id/myImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:paddingTop="3dip"
android:src="#drawable/picimg" >
</ImageView>
<TextView
android:id="#+id/myMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:gravity="center_vertical|center"
android:text="This message appears way to close to the top of the footer. It should be along with the image in the center:"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="#+id/myButton"
style="#style/mybuttonstyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="#string/lbl_send"
android:visibility="gone" />
</LinearLayout>
After seeing your layout it seems you haven't given android:paddingTop to your TextView. Thats why its appearing to the top.
Moreover you can also remove android:paddingTop from ImageView if that suits to your layout.
Hope that helps.
How big is the image? I think the problem is in your second LinearLayout. You're setting the height to be "wrap_content" so that means that it will only be as big as the biggest child. If the image and the text are about the same height, then it won't seem as if anything is getting centered. You can test this theory by forcing the height to be something big enough.
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.
I'm new to android development... while making my application layout i want a button to remain at the very bottom of the screen while a scroll view is placed above it. I am unable to do this i was using the size of the scroll view as 430dp so that it works but when i change the orientation of the screen this does not work as 400dp is bigger than the screen.
how do i make it so that the button stays at the bottom irresepective of the screen orientation ?
:/
Set the ScrollView's layout_height to fill_parrent and layout_weight to 1 and the Button's height to wrap_content.
You could go with this
android:gravity="bottom"
This should always push your element to the bottom of its container.
But it'd more helpful if you'd post up your layout XML.
Here's a real world example of precisely what you're asking.
In this layout, I have a header at the top, a list view taking all the space below it and a button to clear (cancelled, failed, finished) elements of the list view, then right at the bottom I have a custom control showing a toolbar.
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:id="#+id/layout" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/browsePeerHeader"
android:layout_width="fill_parent" android:layout_height="70sp"
android:layout_marginBottom="2sp"
android:layout_gravity="top"
android:background="#drawable/background_barbed_wire"
>
<ImageButton
android:id="#+id/frostwire_sphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/icon"
android:layout_gravity="center_vertical"
android:layout_margin="3sp"
android:background="#00000000"/>
<TextView android:id="#+id/browsePeerTitle" android:textSize="30sp"
android:text="Downloads"
android:textColor="#ffffffff" android:textStyle="bold"
android:shadowColor="#ff000000"
android:shadowDx="1.0"
android:shadowDy="1.0"
android:shadowRadius="4.0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10sp"
android:gravity="left|center_vertical"/>
</LinearLayout>
<ListView android:id="#+id/ListViewTransfers"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2sp"
android:layout_marginBottom="2sp"
android:layout_weight="1"></ListView>
<Button android:id="#+id/ButtonClearFinished" margin="2sp"
android:layout_width="fill_parent" android:layout_height="wrap_content"
/>
<com.frostwire.android.views.FrostWireStatusBar
android:id="#+id/FrostWireStatusBar" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" /></LinearLayout>
Here's a screenshot
The trick is basically to have the list view use all the space left in the layout that contains it, you don't even have to tell it to fill_parent, just with android:layout_weight="1 it should work.
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