How to create small buttons with large text in Android 2.2?

Question

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:

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

Answer 1

![<?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>]

Answer 2

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:

Answer 3

I found that adding android:includeFontPadding="false" to the view solved the oversize text problem for me.