How to get an icon to show up next to text in Android Material Buttons?

Question

I'm trying to use the Material Button as developed by google. Due to a third party dependency I cannot use the androidx repository, so I'm currently using the android support library (v28.0.0-alpha1, alpha3 did not allow me to use the material button)

I'm trying to achieve this a wide button with centered text + icon next to text:

But all I can get is this, centered text with icon on the edge of the button:

This is the same as the original android button, which suffered from the same problem. The idea was that the Material Button would solve this issue, but it doesn't seem to work for me on 28.0.0-alpha1

There are solutions involving making a textview with compounddrawables and drawing a frame around it, but I'd like to stick to the material button if possible.

Anyone got a clue on how to fix this?

Answer 1

I'm having this issue too. Did a bit of digging around, and found this.

There's an attribute called app:iconGravity which has two options namely start and textStart which doesn't seem to work for me, but maybe try it - that is from the GitHub repo for the Material Button.

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_icon_button"
    style="@style/Widget.MaterialComponents.Button.Icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_button_label_enabled"
    app:icon="@drawable/icon_24px"
    app:iconGravity="textStart"/>

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/MaterialButton.java (search for definition of iconGravity, it's in the beginning of the class)

Answer 2

Anyone got a clue on how to fix this?

Button widget is extended from TextView. So you can use ImageSpan in your case.

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.AppCompat.Button.Colored"
        />

    Button button = findViewById(R.id.button);
    SpannableString ss = new SpannableString("  CART".toUpperCase(Locale.US));
    Drawable d = VectorDrawableCompat.create(getResources(), R.drawable.ic_shopping_cart_white_24dp, getTheme());

    d.setBounds(0, 0, (int) button.getTextSize(), (int) button.getTextSize());    //to make it square
    ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
    ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    button.setTransformationMethod(null);
    button.setText(ss);

Result :