MaterialButton with icon doesn't center text

Question

I'm trying to use a Material Button where I want an icon to the very left, and then some text in the center. But when I put in the icon on the left for instance, I can clearly see the text being pushed to the right. Is there any way to avoid this? I want the text to be centered, and would like to avoid doing a hacky solution for it..

<com.google.android.material.button.MaterialButton
        android:id="@+id/testButton"
        style="@style/RevertedColorDefaultButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TEST"
        android:textAlignment="center"
        app:icon="@drawable/some_icon"
        app:iconGravity="start"´
        app:iconTint="@color/colorPrimary"
        app:layout_constraintBottom_toTopOf="@id/someOtherButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.94" />

For info, I tried the same thing with a regular button, same issue:

<androidx.appcompat.widget.AppCompatButton
        android:id="@+id/test2Button"
        style="@style/RevertedColorDefaultButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/some_icon"
        android:drawableTint="@color/colorPrimary"
        android:text="TEST"
        app:layout_constraintBottom_toTopOf="@id/someOtherButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.94" />

Edit: Image added

Discourtesy

Try using app:iconGravity with text gravity .. – Liverish

Same issue sadly. I had tried that as well :/ – Discourtesy

I do not understand the issue here. You should add an image to expected output and current output.. – Liverish

Just added the image – Discourtesy

That looks fine to me. Just think that the icon now have it's own bounds and the text is centered to the space left for it. – Ivan

Did you find any solution? – Constanceconstancia

My solution https://mcmap.net/q/1411513/-materialbutton-with-icon-doesn-39-t-center-text might help you – Hartzell

Answer 1

To anyone viewing this later I found a way to do this through adding the intrinsic width of the icon as a negative padding to the button

<button>.iconPadding = -(icon?.intrinsicWidth ?: 0)

This is because the text is pushed by exactly the intrinsicWidth of the icon

Hartzell

Exactly what I needed. Or in the layout xml: app:iconPadding="-<intrinsic width>dp" e.g. app:iconPadding="-24dp" – Hygrophilous

Answer 2

android:includeFontPadding="false"

This did the trick in my case

Berriman

Yep, Thanks, I found out that downloaded fonts have some predefined padding. – Prefiguration

Answer 3

You can use the iconGravity attribute to change the position of the icon:

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button"
            app:icon="@drawable/ic_add_24px"
            app:iconGravity="textStart"
            android:text="BUTTON"
            />

You can also reduce the padding between the text and the icon with the iconPadding attribute:

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

Sumbawa

hi, any better solution?? – Cr

This one works for me, but have to do some trial and error with iconPadding value to make the text centered within full width – Drubbing

Answer 4

Try android:textAlignment="center".

Sent

Yes I have, first thing I tried. The only thing that actually moved it, was on the materialbutton, setting insetRight to some dp, but that moves the entire button from the right as well, so that's not an option. – Discourtesy

Answer 5

I found a way to do this without having to create a custom view and add lots of custom layout logic. The MaterialButton seems to have icon and an iconGravity attributes. See code and example output below. Note: The custom style in the example code extends Widget.MaterialComponents.Button

<com.google.android.material.button.MaterialButton
    android:id="@+id/signUpButton"
    style="@style/Button.AppTheme.Primary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Sign up with Email"
    app:icon="@drawable/ic_envelope"
    app:iconGravity="textStart"/>

Amarillis

I tried that as well, didn't work for me at the time sadly. – Discourtesy

Just double checking.. in the example code you posted you're using "start" not "textStart" and there is a trailing ' after that line. Have you tried with "textStart"? – Amarillis