Search code examples
androidmaterial-design

drawable start not working with material button


Here is the button :

    <Button
    android:id="@+id/btn_choose_photo"
    style="@style/Widget.MaterialComponents.Button.TextButton.Dialog"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableStart="@drawable/ic_camera"
    android:drawablePadding="8dp"
    android:text="@string/image_picker_dialog_choose_image"
    android:textAlignment="textStart" />

I am using material themes, so this will be inflated into a material button drawableStart has no effect at all, however drawableEnd, bottom and top work just fine When I make the button tag a text view, drawableStart works It seems like a bug or maybe I am missing something ?

Edit: My app theme is as follows :

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!---colors-->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>
    <item name="colorPrimaryDark">@color/colorPrimaryVariant</item>

    <item name="colorSecondary">@color/colorSecondary</item>
    <item name="colorSecondaryVariant">@color/colorSecondaryVariant</item>
    <item name="colorAccent">@color/colorSecondary</item>

    <!--
    <item name="android:colorBackground">@color/colorBackground</item>
    -->

    <!--components-->
    <item name="textInputStyle">@style/text_input_layout_style</item>
    <item name="bottomSheetDialogTheme">@style/bottom_sheet_dialog_theme</item>

    <item name="spinnerStyle">@style/spinner_style</item>
    <item name="android:spinnerStyle">@style/spinner_style</item>

    <item name="android:toolbarStyle">@style/toolbar_style</item>
    <item name="toolbarStyle">@style/toolbar_style</item>

    <item name="actionOverflowButtonStyle">@style/overflow_button_style</item>
    <item name="android:actionOverflowButtonStyle">@style/overflow_button_style</item>

</style>

Solution

  • You should use app:icon like this:

    In the layout:

    <Button
       ...
       app:icon="@drawable/ic_camera"
       style="@style/Widget.MaterialComponents.Button.TextButton"
    />
    

    It is displayed at the start, before the text label. You can change icon gravity, tint or size.

    For more information