material-components-android: [MaterialButton] drawableStart doesn't work, both in preview nor in device

Description: [MaterialButton] android:drawableStart doesn’t work, both in preview nor in device. It ended up the same whether you’re using xml drawable or bitmap.

Expected behavior: Drawable expected to be drawn at the start of the MaterialButton.

Resulted behavior: Screenshot_1585826764 From top to bottom: drawableEnd - drawableStart - drawableTop - drawableBottom

Source code:

<?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:gravity="center"
    tools:context=".MainActivity">

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:drawableEnd="@drawable/ic_android_black_24dp"/>

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:drawableStart="@drawable/ic_android_black_24dp"/>

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:drawableTop="@drawable/ic_android_black_24dp"/>

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:drawableBottom="@drawable/ic_android_black_24dp"/>

</LinearLayout>

Android API version: API 22 and above; might have also happened on earlier APIs.

Material Library version: 1.1.0

Device: Android Studio Emulator

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 9
Comments: 17 (4 by maintainers)

Most upvoted comments

Hey there!

Instead of using drawableBottom|Top|Left|... use MaterialButton’s attributes app:icon and app:iconGravity.

Like:

      <Button
          style="@style/Widget.MaterialComponents.Button.OutlinedButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:contentDescription="@string/cat_button_icon_btn_text"
          app:icon="@drawable/ic_dialogs_24px"
          app:iconGravity="textStart"
          app:iconPadding="0dp"/>

The above is from our catalog demo app here: https://github.com/material-components/material-components-android/blob/master/catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml#L140-L141

I’m going to go ahead and close this but if this isn’t what you were asking or doesn’t solve the issue, feel free to reopen!

+33

hunterstich on Apr 3, 2020

I think Material Button should support drawableStart, End, etc. though.

Because there’s a case where we need multiple icons on a button:

+21

risalfajar on Mar 15, 2021

I just merged this PR which adds support for adding an icon above a button’s text - https://github.com/material-components/material-components-android/pull/1129

That should be synced out soon if that helps

hunterstich on Apr 6, 2020

@marklwembe it does somewhat relate, as you are suffering from auto inflation.

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/theme/MaterialComponentsViewInflater.java

This is why the issue is especially frustrating; just by changing the theme, we need to be aware of this and retroactively patch existing buttons.

AllanWang on Apr 22, 2021

Ensure to add iconTint using app:icon

app:icon="@drawable/ic_rubbish" app:iconGravity="textStart" app:iconTint="@android:color/holo_red_light"

dferrandezsanchez on Jul 6, 2021