Question

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.

Answer 1

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