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

Issue

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.

Solution

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.

Answered By - Gabriele Mariotti