CODEWITHSUNDEEP
androidmaterial-design
ahmed osama
ahmed osama

Reputation: 600

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>

Upvotes: 37

Views: 17845

Answers (7)

Sumeet Das
Sumeet Das

Reputation: 9

Using android:drawableLeft is not recommended since it does not support RTL (right-to-left) communication.

Using android:drawableStart works in most cases except for Material Buttons

Using app:icon along with app:iconGravity="start" or app:iconGravity="textStart" works while using Material Buttons

Upvotes: 0

Karan Kumar Rao
Karan Kumar Rao

Reputation: 56

Use android:drawableLeft

<androidx.appcompat.widget.AppCompatButton
                android:id="@+id/continuar_anonimo_button"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_gravity="center"
                app:backgroundTint="@color/greenPrimary"
                android:background="@drawable/corner_boton_outline"
                android:text="Continuar anonimamente"
                android:paddingLeft="15dp"

                **android:drawableLeft="@drawable/ic_phone"
                android:backgroundTint="@android:color/white"**

https://developer.android.com/reference/android/widget/TextView?authuser=2#attr_android:drawableLeft

Upvotes: 3

J-Jamet
J-Jamet

Reputation: 857

With the Material theme, the android:drawableStart or android:drawableLeft attribute must be replaced by app:icon and app:iconGravity="start".

<Button
    style="@style/Widget.Material3.Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_dialogs_24px"
    app:iconGravity="start"
    app:iconPadding="8dp"/>

Upvotes: 1

Kasım &#214;zdemir
Kasım &#214;zdemir

Reputation: 5634

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

Upvotes: 86

Kerelos
Kerelos

Reputation: 103

app:icon="@android:drawable/ic_menu_share"

Is the best solution!

Upvotes: 1

Antony Nicolas Huaman Alikhan
Antony Nicolas Huaman Alikhan

Reputation: 424

You can change to "App compat button"

enter image description here

<androidx.appcompat.widget.AppCompatButton
                android:id="@+id/continuar_anonimo_button"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_gravity="center"
                app:backgroundTint="@color/greenPrimary"
                android:background="@drawable/corner_boton_outline"
                android:text="Continuar anonimamente"
                android:paddingLeft="15dp"
                android:drawableStart="@drawable/ic_google_color"
                style="?android:textAppearanceSmall"/>

Upvotes: 3

Karan Dhillon
Karan Dhillon

Reputation: 1234

Using 

android:drawableLeft

will solve the problem, but will not give you RTL(Right to left) support. If your end user uses a different language which follow RTL, then your Button will not support it.

Are you managing the Button's property in the Activity or Fragment, as technically speaking,

android:drawableStart

should work.

Upvotes: 13

Related Questions