views:

111

answers:

2

I need to create fixed size sqare buttons with relatively large characters on them for a calculator app. When I increase text size, the character is no more displayed in the center of the button and the button's position gets shifted some pixels to the top (very strange).

http://img9.imageshack.us/i/buttontest.png/

If it's possible I don't want to use images for the buttons.

Update:

I use this xml:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/TableLayout01" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TableRow>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="1" android:textSize="8dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="2" android:textSize="10dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="3" android:textSize="12dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="4" android:textSize="14dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="5" android:textSize="16dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="6" android:textSize="18dp"></Button>
</TableRow><TableRow>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="7" android:textSize="20dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="8" android:textSize="22dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="9" android:textSize="24dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="A" android:textSize="26dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="B" android:textSize="28dp"></Button>
<Button android:layout_width="50dp" android:layout_height="50dp" android:text="C" android:textSize="30dp"></Button>
</TableRow>
<TableRow></TableRow>
</TableLayout>

And get this result:

alt text

how do I get all buttons equallly arranged with centered text?

+1  A: 

Use android:paddingTop="2dp"

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="50dp"  >

  <Button
    android:layout_width="wrap_content"
    android:layout_height ="fill_parent"
    android:text="padding = 1dp"
    android:textSize="30sp"
    android:paddingTop="1dp"  />

  <Button
    android:layout_width="wrap_content"
    android:layout_height ="fill_parent"
    android:textSize="30sp"     
    android:text="padding = 10dp"
    android:paddingTop="10dp"  />          
</LinearLayout>

Result:

alt text

Orsol
that effects layout, but it does not give proper results if buttons are arranged in a table layout. I tried several values for paddingTop even for the buttons with smaller text size.
elsni
<Button android:paddingTop="2dp> affects on position of text in button. If all buttons have predefined text size, use padding to set appropriate position. Or I didn't understand something?
Orsol
The behavior is totally illogical to me. paddingTop affects the positioning of the button itself, not of the text inside it. Seems to me like a bug in the layout system.
elsni
A: 
![<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent">

    <LinearLayout 
        android:layout_width="wrap_content" 
        android:layout_height="50dp" >
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="1" android:textSize="8dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="2" android:textSize="10dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="3" android:textSize="12dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="4" android:textSize="14dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="5" android:textSize="16dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="6" android:textSize="18dp"></Button>
    </LinearLayout>


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_width="wrap_content" 
        android:layout_height="50dp">

        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="7" android:textSize="20dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="8" android:textSize="22dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="9" android:textSize="24dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="A" android:textSize="26dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="B" android:textSize="28dp"></Button>
        <Button android:layout_width="50dp" android:layout_height="fill_parent" android:text="C" android:textSize="30dp"></Button>
    </LinearLayout>

</LinearLayout>]

alt text

Orsol
Thanks, that works. I did figured out another way in the meantime: Setting android:baselineAligned="false" in the TableRow tags works in a similar way.
elsni