Wsrtjtyk

Hello I ran into problem with aligning icon in material button on Android. I have button with match_parent width, text and icon next to text. I want to align icon 8dp left to text and I tried do it by com.google.android.material.button.MaterialButton app:iconGravity. But result was not as expected.

As you can see, with longer text, icon padding is smaller and smaller. I also tried define app:iconPadding (default is 8dp) but with same result.

Is this bug or I'm doing it wrong?

Layout:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:padding="16dp">



    <com.google.android.material.button.MaterialButton

        style="@style/MaterialButton"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:icon="@drawable/ic_launcher"

        app:iconGravity="textStart"

        tools:text="L" />



    <com.google.android.material.button.MaterialButton

        style="@style/MaterialButton"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:icon="@drawable/ic_launcher"

        app:iconGravity="textStart"

        tools:text="Lorem ipsum" />



    <com.google.android.material.button.MaterialButton

        style="@style/MaterialButton"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:icon="@drawable/ic_launcher"

        app:iconGravity="textStart"

        tools:text="Lorem ipsum dolor sit amet" />

</LinearLayout>

Style:

<style name="MaterialButton" parent="Widget.MaterialComponents.Button">

    <item name="android:textColor">@color/white</item>

    <item name="android:textAppearance">@style/TextTitleAllCapsBold</item>

    <item name="android:fontFamily">@font/roboto_condensed_regular</item>

    <item name="android:padding">@dimen/padding_medium</item>

    <item name="backgroundTint">@color/colorPrimary</item>

    <item name="iconSize">32dp</item>

</style>

Using implementation 'com.google.android.material:material:1.0.0'

remove app:iconGravity="textStart"

TL;DR

only use capitalized text and/or monospace fonts for buttons and use textAlignment="center" (the default) when specifying an icon with iconGravity="textStart"

I found reason and workaround how to fix this bug.
It calculates leftPadding of icon badly becouse of attribute android:textAllCaps.

If you have same experience, remove (or set to false) attribute android:textAllCaps and replace it with uppercased text in strings.xml or using .toUpperCase( ) in Java or Kotlin

It is issue that was found on September 2018 and by October is marked as Fixed on Google's issuetracker. But I'm using latest stable version of library and still have the bug. Here is my issue

UPDATE

The bug is now fixed in version 1.1.0-alpha02.