On a button, text and drawable are too far away when centered

Question

when I make a button width match parent, the drawable start and text are too far away, and they don't seem to respect android:drawablePadding setting. I tried as well with android:gravity="center" and android:textAlignment="center" to no avail. Setting some paddingStart/End affect indirectly how close they are to each other. See the result below:

The code for button:

<Button
            style="@style/ActionButton.Primary.Light.Large"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="0dp"
            android:drawableLeft="@drawable/ic_filter_and_sort_white"
            android:drawablePadding="0dp"
            android:textAlignment="center"
            android:text="Apply filters"
            app:layout_constraintBottom_toTopOf="@id/someViewBelow"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/someViewAbove" />

the style defines background, textColor, margins, minDimensions, paddings, radiuses, textSize, textAllCaps, radiuses, stateListAnimator, fontPath - so nothing that should affect what I'm looking for.

Play with `android:drawablePadding=" "`. You may need to set a negative value. — John Joe, Oct 16 '19 at 09:50
Possible duplicate of [how do I minimize space between text and image in button?](https://stackoverflow.com/questions/14156472/how-do-i-minimize-space-between-text-and-image-in-button) — John Joe, Oct 16 '19 at 09:51
@JohnJoe using negative padding is quite unreliable, I would say, for different screen sizes. Also, just the text is altered by `gravity`, so I've no way to have both drawable/icon and text centered — Antek, Oct 17 '19 at 09:43

Gabriele Mariotti · Accepted Answer · 2019-10-16T12:31:40.367

7

Use the MaterialButton with app:iconGravity="start" and defining the padding between the icon and the text with the app:iconPadding attribute.

Something like:

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/...."
        app:iconGravity="start"
        app:iconPadding="..."

This value can be negative.

Otherwise you can use app:iconGravity="textStart".
Here the difference of using start and textStart as iconGravity.

edited Oct 16 '19 at 12:31

answered Oct 16 '19 at 09:59

Gabriele Mariotti

320,139
94
887
841

this almost work. I just need to figure out how to apply selector for background colour and not make the icon disappear, but that's obviously completely different question. – Antek Oct 17 '19 at 09:45
1

@Antek For the backgroundColor use the `app:backgroundTint`or check this [answer](https://stackoverflow.com/questions/58303790/android-materialbutton-override-textcolor-in-style/58304451#58304451). – Gabriele Mariotti Oct 17 '19 at 09:57

raghu · Answer 2 · 2019-10-18T12:38:19.910

You can use the MaterialButton now which lets setting the icon gravity ex:app:iconGravity="textStart".

 <com.google.android.material.button.MaterialButton
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:layout_margin="16dp"
        android:gravity="center"
        android:textAllCaps="true"
        app:backgroundTint="#fc0"
        app:icon="@drawable/ic_filter_and_sort_white"
        app:iconGravity="textStart"
        app:iconPadding="10dp"
        app:iconTint="#f00"
        app:layout_constraintBottom_toTopOf="@id/someViewBelow"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/someViewAbove"
        tools:text="Download Pdf" />

Add dependency implementation 'com.google.android.material:material:1.1.0-alpha10'

Reference

score 0 · Answer 3 · answered Oct 16 '19 at 09:55

0

Did you try to use android:textAlignment="textStart"?

answered Oct 16 '19 at 09:55

Bohdan Samusko

183
2
7

I edited the question. It does help a little bit, but then all elements are towards start edge of the button, and what I'm after is to have both close and centered – Antek Oct 17 '19 at 09:44

score 0 · Answer 4 · answered Oct 16 '19 at 11:03

Try with this, it should work.

<Button
        style="@style/ActionButton.Primary.Light.Large"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:drawableLeft="@drawable/ic_filter_and_sort_white"
        android:drawablePadding="5dp"
        android:textAlignment="textStart"
        android:layout_gravity="start"
        android:text="Apply filters"
        app:layout_constraintBottom_toTopOf="@id/someViewBelow"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/someViewAbove" />

On a button, text and drawable are too far away when centered

4 Answers4

Linked