Set drawable position inside button

Question

I've got a button and a drawable on the left of the text, but I want the drawable to be closer to the text. So I need to move the drawable.

I've defined android:drawableLeft but the content of the button is not centered.

Here is my code:

<Button
    android:id="@+id/addsubject"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_action_add"
    android:layout_centerHorizontal="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="20dp"
    android:text="@string/addsubject"
    android:textColor="@color/white"
    android:background="@drawable/custombutton1" />

Here is how it looks now:

enter image description here

And here is how I'd like it to be:

enter image description here

Thank you!

See https://stackoverflow.com/questions/3634191/how-to-center-icon-and-text-in-a-android-button-with-width-set-to-fill-parent/. — CoolMind, Feb 28 '18 at 09:30

score 18 · Accepted Answer · answered Aug 29 '14 at 09:04

18

try this

 <Button
    android:id="@+id/addsubject"
    android:layout_width="160dip"
    android:layout_height="60dip"
    android:layout_gravity="center"
    android:drawableLeft="@drawable/ic_action_add"
    android:drawablePadding="2dip"
    android:gravity="center"
    android:paddingLeft="30dip"
    android:paddingRight="26dip"
    android:singleLine="true"
    android:text="@string/addsubject"
    android:textSize="13dip" />

answered Aug 29 '14 at 09:04

Rakesh Rangani

1,039
10
13

1

That's what I was looking for! The trick was to use drawableLeft and drawableRight and adjust them to fit. Thank you! – Isaías Aug 29 '14 at 09:16
1

it is working but it is not a flexible according to device size. – BlackBlind Aug 13 '19 at 10:40

score 18 · Answer 2 · answered Aug 04 '20 at 16:52

18

Use the app:iconGravity="textStart" attribute in the MaterialButton

    <com.google.android.material.button.MaterialButton
        app:icon="@drawable/ic_add_24px"
        app:iconGravity="textStart"
        ../>

If you want to reduce the padding between the icon and the text just use the app:iconPadding attribute:

    <com.google.android.material.button.MaterialButton
        app:icon="@drawable/ic_add_24px"
        app:iconGravity="textStart"
        app:iconPadding="0dp"/>

answered Aug 04 '20 at 16:52

Gabriele Mariotti

320,139
94
887
841

your answer will never work until you apply Material component theme to the button like this android:theme="@style/Theme.MaterialComponents.Light" – Michael Mar 29 '23 at 13:47

score 6 · Answer 3 · answered Oct 02 '16 at 05:29

6

I got this result by simply putting these properties to the button specifically

<Button
    ...
    android:paddingLeft="60dp"
    android:drawablePadding="-50dp"
    android:gravity="center"
    android:drawableLeft="@drawable/your_button_icon"
    />

You can tune in with your own values for your desired results.

Cheers :-)

answered Oct 02 '16 at 05:29

Imtiaz Abir

731
7
12

Thanks, it works. But delete `android:padding` if you have it. In other case an icon will stand left and a text will be centered. Also result depends on a width of a button. – CoolMind Feb 28 '18 at 09:25
The solution is bad as this way the button will look differently on different screen sizes. – dephinera Mar 07 '18 at 14:48
@definera can you please propose a better solution for this view(button) which can adapt different screen sizes? – Imtiaz Abir Mar 08 '18 at 09:26
1

@ImtiazAbir Perhaps using SpannableString with ImageSpan is an option. Haven't tried it yet personally, so I can't give a specific example. – dephinera Mar 08 '18 at 11:36

score 3 · Answer 4 · answered Jan 15 '20 at 13:31

3

I done this simply using paddingLeft and paddingRight. Its works!... android:paddingLeft="25dp" android:paddingRight="25dp"/>

answered Jan 15 '20 at 13:31

seven star

31
1

sergej shafarenka · Answer 5 · 2015-07-23T22:33:12.730

1

The padding between the left border of button and right border of the icon is controlled by android:paddingLeft property. The padding between the icon and the text is defined by android:drawablePadding property.

Add these two properties to you button and set the values you are happy with.

<Button
    ...
    android:paddingLeft="24dp"
    android:drawablePadding="8dp"
    />

edited Jul 23 '15 at 22:33

answered Aug 29 '14 at 09:04

sergej shafarenka

20,071
7
67
86

score 1 · Answer 6 · answered Aug 29 '14 at 09:21

You can use LinearLayout as your button by adding OnClickListener and customize however you want.

<LinearLayout          
    android:layout_width="160dip"
    android:layout_height="60dip"
    android:orientation="horizontal" 
    android:background="@drawable/custombutton1">

    <ImageView android:layout_height="wrap_content"
               android:layout_width="wrap_content"
               android:src="@drawable/ic_action_add"
               android:layout_gravity="center"
               android:layout_weight="1"
               android:scaleType="center">

    </ImageView>

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/addsubject"
              android:layout_gravity="center"
              android:layout_weight="1"/>

</LinearLayout>

score 0 · Answer 7 · answered Mar 26 '20 at 14:19

There's also other possibilities that you want to inflate the drawable/icon programatically, after reading a while and using a lot of combination using XMLs, but still doesn't works,

You might want to fork below library instead, to suits your use-cases, such as, customizing the view, position, etc programatically, see below reference:

Drawable/icon aligned with text, see sample here
Button like facebook sign-in, see sample here
For RadioButton, see full gist code here

P.S: Copyrighted and regards to the author

score 0 · Answer 8 · answered Aug 02 '20 at 10:41

for Materialbutton, you have to use the icon attribute and you can also change its tint with iconTint like this example:

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_cancel"
    app:iconTint="@color/black"
    android:text="text" />

Set drawable position inside button

8 Answers8