CODEWITHSUNDEEP
androidandroid-layout
siva636
siva636

Reputation: 16441

Android button text alignment issue

Consider the following XML and the output:

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

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5"
        android:gravity="center_vertical|center_horizontal"
        android:paddingTop="0dp"
        android:text="Button"
        android:textSize="100sp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="30"
        android:text="Button"
        android:textSize="100sp" />

</LinearLayout>

enter image description here

There is enough space for the button at the top to position the text at the middle, but still some portion (at the bottom) is trimmed, why?

When I use the following background, still the text is not centered (see the output bellow)

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
      <shape>
            <gradient
                android:endColor="@android:color/darker_gray"
                android:startColor="@android:color/darker_gray"
                android:angle="270" />
            <stroke
                android:width="0dp"
                android:color="@android:color/darker_gray"/>
            <corners
                android:radius="0dp" />
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
       <shape>
            <gradient
                android:endColor="@android:color/darker_gray"
                android:startColor="@android:color/darker_gray"
                android:angle="270" />
            <stroke
                android:width="0dp"
                android:color="@android:color/darker_gray"/>
            <corners
                android:radius="0dp" />
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="@android:color/darker_gray"
                android:startColor="@android:color/darker_gray"
                android:angle="270" />
            <stroke
                android:width="0dp"
                android:color="@android:color/darker_gray"/>
            <corners
                android:radius="0dp" />
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>
</selector>

enter image description here

(Tested on emulator 10.1" WXGA 1280x800 screen, landscape)

Upvotes: 0

Views: 5181

Answers (2)

David
David

Reputation: 4817

Because it is the way how the View is rendered. The code of the button view applies a minimum top and bottom padding. Only if the height of the button is bigger than the height of the text + the default paddings the renderer starts to center the text vertically. It is like it is by natural design.

Upvotes: 5

Alex Orlov
Alex Orlov

Reputation: 18107

That's probably a font padding. You can disable it by using android:includeFontPadding=false for that button.

Upvotes: 5

Related Questions