Image + Text to be centre alligned in button

Question

I have a Button with its width as match_parent. And I want a image/icon with a text in its center. I have triedandroid:drawableStart attribute but its of no help. I don't know what I am missing. Is there any one who is also facing the same problem.

Note:This link is not solving my problem. I am attaching my button portion of xml

<Button
    android:background="@drawable/blue_button"
    android:id="@+id/btn_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:drawableStart="@drawable/ic_list"
    android:text="@string/btn_schedule"
    android:textColor="@android:color/white" />

After adding these attribute my text is coming on center but image/icon is still on left side of button. Can any body help!!!

why dont you try android:layout_gravity="center" – Benil Mathew Jul 08 '13 at 06:08 — Benil Mathew, Jul 08 '13 at 06:08

score 1 · Answer 1 · edited May 23 '17 at 12:31

1

You might want to check my answer to this question: Android Button with text and image

Its an ugly solution but it you want the image and text to be centered as a group in the button rather than text center and drawable padded from the side then its the only way I have found.

edited May 23 '17 at 12:31

Community

1
1

answered Jul 08 '13 at 06:14

Corey Scott

2,430
3
28
33

Using that will mend the default behavior, and I kindda do that as my last option available. I want to stick with android default behavior unless I am left with no other option then to create my own widget. – Android Jul 08 '13 at 06:30

Arkadiusz Cieśliński · Answer 2 · 2016-04-07T08:03:44.853

I had the same problem and I hadn't found anywhere clear solution. BUT I got some information which also help me to provide following solutions (I have chosen the second one):

Create image which will contain your image and text

 <Button
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:drawableTop="@drawable/YOUR_IMAGE"
     android:gravity="center_horizontal|center_vertical" />

It is not so clear and you have to add more complicated changes to your layout but it is easier to modify the text later

 <FrameLayout
     android:gravity="center_horizontal"
     android:layout_width="match_parent"
     android:layout_height="wrap_content" >

     <Button
         android:layout_height="50dp"
         android:layout_width="match_parent" /> 

     <TextView
         android:text="sample"
         android:layout_height="50dp"
         android:layout_width="wrap_content"
         android:drawableLeft="@drawable/YOUR_IMAGE"
         android:gravity="center_horizontal|center_vertical" />
 </FrameLayout>

score 0 · Answer 3 · answered Dec 24 '14 at 07:00

100% working

<FrameLayout
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
    style="?android:attr/buttonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@null"
    android:clickable="false"
    android:drawableLeft="@android:drawable/ic_delete"
    android:focusable="false"
    android:gravity="center"
    android:minHeight="0dp"
    android:minWidth="0dp"
    android:text="Button Challenge" />

from here

score 0 · Answer 4 · answered May 15 '15 at 15:15

This works for me. Basically play with the paddingLeft and PaddingRight of the button to get the text and image close together to the center.

Note: Might be an issue with rather long texts.

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="search button"
            android:drawableStart="@drawable/ic_action_search"
            android:paddingLeft="60dp"
            android:paddingRight="60dp"/>
    </LinearLayout>

score -1 · Answer 5 · answered Jul 08 '13 at 08:09

-1

I tried android:drawableTop

The image shown in the center of the button

answered Jul 08 '13 at 08:09

Sieryuu

1,510
2
16
41

2

`android:drawableTop` is for top not for start of text – Android Jul 08 '13 at 08:32

Image + Text to be centre alligned in button

5 Answers5