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

Created on 2 Apr 2020  路  8Comments  路  Source: material-components/material-components-android

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

bug question

Most helpful comment

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!

All 8 comments

Also, it is possible that this is related to #599 .

@Andrei-Stakov
You should try it with

implementation 'com.google.android.material:material:1.2.0-alpha05'

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!

@Mika-89 @hunterstich
Oof, thanks guys! I got used to Material themes automatically inflate my buttons to MaterialButton, so I totally forgot about app:icon.

It works for my current needs, but on 1.1.0 (haven't tested it on alpha builds), app:icon doesn't really work well with drawableTop/Bottom/End/Right; it won't shown, except for the one designated in app:icon. Is this intended? Since on normal buttons, using drawableStart/Left added with others allows the button to have multiple drawable attached.

Isn't there a icon gravity xml field for that what you want?

@Mika-89
It's only limited to start, end, textStartand textEnd for now. It fits the Material design direction, but that really makes me wonder if top/bottom option could be a viable option addition in the future.

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

Great progress, thank you all!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sepehr-alipour picture sepehr-alipour  路  3Comments

gabrielemariotti picture gabrielemariotti  路  3Comments

Mirmuhsin picture Mirmuhsin  路  3Comments

Sanusy picture Sanusy  路  3Comments

magnusfernandes picture magnusfernandes  路  3Comments