Skip to content Skip to sidebar Skip to footer

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:

Solution 1:

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

Solution 2:

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

Solution 3:

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

Solution 4:

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" />

Post a Comment for "On A Button, Text And Drawable Are Too Far Away When Centered"