androidandroid-layoutandroid-buttonmaterial-componentsmaterial-components-android

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


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:

match parent width button

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.

    enter image description here

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

    enter image description here