How to center drawableTop and text vertically on the Button in Android?

20,782

Solution 1

New answer

Apparently I misunderstood the question. The answer is to use:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    style="@android:style/Widget.Button">

...and enclose an ImageView and a TextView inside.


Old answer

Here's a thought: wrap your button in a FrameLayout. Soemthing like:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:foreground="@drawable/ico"
    android:foregroundGravity="center">
    <Button
        android:gravity="center_vertical"
        android:id="@+id/StartButton2x2"
        android:text="@string/Widget2x2StartBtnLabel"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1" 
        android:background="@drawable/widgetbtn_bg" />
</FrameLayout>

Btw, what's up with android:layout_width="0dip"? Doesn't seem right.

Solution 2

'android:gravity' seems to work only on text label. It does not affect 'drawableTop' positioning.

Correct.

I was able to center it vertically using 'android:paddingTop' - but that does not seem to be a good idea. I guess it would not work properly on different screen resolution/size.

You might be able to solve this by using dimension resources.

However, other than via padding, you cannot "center drawableTop and text vertically on the Button". The drawable feature of Button is not very configurable.

Share:
20,782
grzaks
Author by

grzaks

Coder, security researcher, entrepreneur. 15 years of experience in IT related subjects. Author of Udemy video course: Wireshark tutorial for beginners. Author of Automatic Selfie App for Mac OSX: every time you open the macbook lid, a photo is captured using facetime/i-sight camera. For fun and profit.

Updated on July 07, 2020

Comments

  • grzaks
    grzaks almost 4 years

    I have the Button defined as follows:

    <Button
     android:drawableTop="@drawable/ico"
     android:gravity="center"
     android:id="@+id/StartButton2x2"
     android:text="@string/Widget2x2StartBtnLabel"
     android:layout_width="0dip" 
     android:layout_height="fill_parent"
     android:layout_weight="1" 
     android:background="@drawable/widgetbtn_bg"
    />
    

    The problem is that 'drawableTop' image is aligned to the top border of the Button view. I would like to center it (together with text label) vertically on the button.

    'android:gravity' seems to work only on text label. It does not affect 'drawableTop' positioning.

    I was able to center it vertically using 'android:paddingTop' - but that does not seem to be a good idea. I guess it would not work properly on different screen resolution/size.