Develop Reference

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>

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

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.

You can change to "App compat button"
<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"/>

Use android:drawableLeft
android:drawableLeft="#drawable/ic_phone"
android:backgroundTint="#android:color/white"

Can't change background color on MaterialButton without change colorAccent

Android Studio 3.2.1
Here my layout:
<com.google.android.material.button.MaterialButton
android:id="#+id/bittrexJsonViewButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginStart="#dimen/half_default_margin"
android:layout_marginEnd="#dimen/half_default_margin"
android:text="#string/json_view"
app:layout_constraintBottom_toBottomOf="#+id/binanceJsonViewButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/binanceJsonViewButton"
app:layout_constraintTop_toTopOf="#+id/binanceJsonViewButton" />
to change MaterialButton's background I change colorAccent in styles.xml
<item name="colorAccent">#color/colorAccent</item>
Nice. It's work.
But the problem is: I do not want to change colorAccent. I want to use background's color for MaterialButton's different from colorAccent
Attribute:
android:background="#aabbcc"
not help.

1st Solution
You can use app:backgroundTint to change back ground color of MaterialButton
<com.google.android.material.button.MaterialButton
android:id="#+id/bittrexJsonViewButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginStart="#dimen/half_default_margin"
android:layout_marginEnd="#dimen/half_default_margin"
app:backgroundTint="#android:color/holo_orange_dark"
android:text="#string/json_view"
app:layout_constraintBottom_toBottomOf="#+id/binanceJsonViewButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/binanceJsonViewButton"
app:layout_constraintTop_toTopOf="#+id/binanceJsonViewButton" />
2nd Solution
MaterialButton uses colorPrimary as background when button is in active state and colorOnSurface when disabled. So, you can define it in your theme and apply it on material buttons

With the MaterialButton you have 2 options:
Using the backgroundTint attribute as suggest by Zaid Mirza
If you want to override some theme attributes from a default style you can use new materialThemeOverlay attribute. It is the best option in my opinion.
Something like:
<style name="Widget.App.ButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/GreenButtonThemeOverlay</item>
</style>
<style name="GreenButtonThemeOverlay">
<item name="colorPrimary">#color/green</item>
</style>
and then:
<com.google.android.material.button.MaterialButton
style="Widget.App.ButtonStyle"
../>
It requires at least the version 1.1.0 of the library.

If you want to set custom drawable you need to make the app:backgroundTint="#null". For just changing the background colour app:backgroundTint="#color/yourColor"
I'm currently using 1.3.0-alpha01
<com.google.android.material.button.MaterialButton
android:id="#+id/bittrexJsonViewButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginStart="#dimen/half_default_margin"
android:layout_marginEnd="#dimen/half_default_margin"
app:backgroundTint="#null"
android:background="#drawable/your_custom_drawable"
android:text="#string/json_view"
app:layout_constraintBottom_toBottomOf="#+id/binanceJsonViewButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/binanceJsonViewButton"
app:layout_constraintTop_toTopOf="#+id/binanceJsonViewButton" />

You can do it by following the below code.
android:background="#color/black"
app:backgroundTint="#null"

2020: It seems that they just fixed this on April 1st 2020.
It should be released on 1.2.0 beta 1 since the GitHub issue was closed as
"Fixed"

The solution that worked for me is described below:
On Button tag
<Button
android:id="#+id/login_btn"
style="#style/PrimaryButtonStyle"
app:backgroundTint="#null"
android:enabled="true"
android:text="#string/txtBtnLogin" />
#Style/PrimaryButtonStyle
<style name="PrimaryButtonStyle" parent="#style/Widget.MaterialComponents.Button">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginTop">5dp</item>
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:background">#drawable/base_button_style</item>
<item name="textAllCaps">false</item>
<item name="android:textSize">16sp</item>
</style>
Output of this - Button background (light blue) is different than layout background (Comparatively dark blue)

backgroundTint also changed the disabled state color so wasn't good for me
Best solution i could find was to override the primary color for the MaterialButton (only) through overlay style
Add this code to your styles.
Replace ?attr/colorSecondary to whatever color you want
<style name="MyButtonTheme" parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/ButtonStyleTextColor</item>
</style>
<style name="ButtonStyleTextColor">
<item name="colorPrimary">?attr/colorSecondary</item>
</style>
Add the theme to the button
<com.google.android.material.button.MaterialButton
//..
android:theme="#style/MyButtonTheme"/>
Or
If you you using MDC and you want to change the theme for all buttons:
Add this row to your themes.xml
<item name="materialButtonStyle">#style/Button.MyTheme</item>
and add these lines to your type.xml
<style name="Button.MyTheme" parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/ButtonStyleTextColor</item>
</style>
<style name="ButtonStyleTextColor">
<item name="colorPrimary">?attr/colorSecondary</item>
</style>
In that case you don't need to add android:theme="#style/MyButtonTheme" to your MaterialButton
If any mistake please let me know and don't be hurry to downgrade

BackgroundTint Always works on material buttons, but first, do uninstall the app and reinstall it again. Sometimes changes may not reflect until you reinstall the app.
android:backgroundTint is applied over the android:background and
their combination can be controlled by android:backgroundTintMode
do check this answer for difference between android:background, android:backgroundTint and android:backgroundTintMode
https://stackoverflow.com/a/38080463/14289342

Change the backgroundTintMode to add and then your background attribute will be displayed. See example below:
<com.google.android.material.button.MaterialButton
android:id="#+id/bittrexJsonViewButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginStart="#dimen/half_default_margin"
android:layout_marginEnd="#dimen/half_default_margin"
android:text="#string/json_view"
android:background:"#aabbcc"
app:backgroundTintMode="add"
app:layout_constraintBottom_toBottomOf="#+id/binanceJsonViewButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/binanceJsonViewButton"
app:layout_constraintTop_toTopOf="#+id/binanceJsonViewButton" />

Comments asking about disable color using colorOnSurface you need to use theme settings,
Like this:
<style name="MaterialRedButton"
parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/MaterialRedButtonThemeOverlay</item>
</style>
<style name="MaterialRedButtonThemeOverlay">
<item name="colorPrimary">#android:color/holo_red_dark</item>
<item name="colorOnSurface">#color/white</item>
</style>

I had the same problem, and here is what it did:
create a new style with a parent of a style of on of the material button styles and change the background color and background tint in it.. hopefully it will work with you..
<style name="DialogMaterialButtonOkay" parent="Widget.Material3.Button.UnelevatedButton">
<item name="background">#color/button_background_color_main</item>
<item name="backgroundTint">#color/button_background_color_main</item>
</style>

ImageButton background color with appcompat

I've got problems to have a good background from an AppCompatImageButton, just to try I'm comparing this two layouts:
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/imageButtonI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/icolor"
android:tint="#color/accent"
app:srcCompat="#drawable/magnify"/>
<ImageButton
android:id="#+id/imageButtonS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/scolor"
android:tint="#color/accent"
android:src="#drawable/magnify"/>
and the style file:
<style name="AppBaseTheme" parent="android:Theme.Material">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primaryDark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
As you can see from this image however, the background of ImageButton is "normal" while there isn't any background in the appcompat one. How can I have the "normal" background using AppCompatImageButton?

A good way to style the Button is to use the style #style/Widget.AppCompat.Button.Colored.
The Widget.AppCompat.Button.Colored style extends the Widget.AppCompat.Button style and applies automatically the accent color you selected in your app theme.
<Button
style="#style/Widget.AppCompat.Button.Colored"
/>
To customize the background color without changing the accent color in your main theme you can create a custom theme for your Button using the android:theme attribute and extending the ThemeOverlay theme.
<Button
style="#style/Widget.AppCompat.Button.Colored"
android:theme="#style/MyButtonTheme"/>
defining the following theme:
<!-- res/values/themes.xml -->
<style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">#color/my_color</item>
</style>

I am not sure which version of support library are you using, but before there was bug in the library which is reported here,
https://code.google.com/p/android/issues/detail?id=78428
But they have resolved it in the latest update,
Yes, it appears to work now with the introduction of
android.support.v7.widget.AppCompatButton in AppCompat v22.1.0, color
can be controlled at overall theme level with "colorButtonNormal".
http://android-developers.blogspot.com/2015/04/android-support-library-221.html
http://chris.banes.me/2015/04/22/support-libraries-v22-1-0/
for theme
<item name="colorButtonNormal">#color/button_color</item>
for version 21
<item name="android:colorButtonNormal">#color/button_color</item>
Hope this will help you.
Thanks

Material Raised Button with Default Background

I am trying to create a button whose text color is the colorAccent and whose background color is the default background color.
It looks like this:
I have tried default styles, but non of them have worked. Currently I have something like this but doesn't work:
styles.xml :
<style name="AppTheme.ButtonRaised" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#android:color/transparent</item>
<item name="android:textColor">#color/colorAccent</item>
</style>
And layout:
<Button
app:theme="#style/AppTheme.ButtonRaised"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="date" />
And I am getting something like this:
I am not getting any effect of style or theme here. I have also tried with style tag, but it doesn't work.

apply theme with a style like this
<style name="ThemeButtonBlue" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorButtonNormal">#android:color/transparent</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/colorPrimaryDark</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
</style>

I am also struggling to do this effect. I could achieve something similar, but I don't know if its "material design approved".
I set the style to their button borderless colored and the elevation to 2dp because on material design they say that "Raised buttons have a default elevation of 2dp". But they don't give you xml layout examples which is annoying -_-
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
style="#style/Base.Widget.AppCompat.Button.Borderless.Colored"
android:elevation="2dp"
android:text="Button"/>
Keep in mind that the elevation tag does not show a shadow pre Lollipop devices.

Android Button background color not changing

In this android project im creating a default button style.
my styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/ButtonStlye123</item>
</style>
<style name="ButtonStlye123" parent="android:style/Widget.Button">
<item name="android:textSize">19dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">#color/ColorDivider</item>
<item name="android:background">#color/ColorAccent</item>
</style>
my button in a fragment.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnLogin"
android:id="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:theme="#style/ButtonStlye123"
android:onClick="login" />
In the preview in android studio it looks exactly like I want, but when I run the app on my device the background color is gray ("default button color"). If i change the text color in my styles.xml like:
<item name="android:textColor">#color/ColorPrimary</item>
it changes (also on my device) so the custom style is loading, i tryd different colors (that worked for the text) for the button but it wont change.
Why isnt my background color loading?

Try use AppCompactButton
instead of
<Button
use
<androidx.appcompat.widget.AppCompatButton
that will do the trick
Update: 01/06/2021
Found out that the above will not work on earlier Android versions.
For materiel design Button use
app:backgroundTint="#color/green"

Please Use androidx.appcompat.widget.AppCompatButton instead of Button.
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button_id_Login"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="#id/textInnputLayout_editText_id_password"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/Login_screen_button_text"
android:background="#drawable/login_button_style"
android:textAllCaps="false">
</androidx.appcompat.widget.AppCompatButton>

You might be using targetSdkVersion 30 material theme
The solution is change theme.xml style
From
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
To
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
Replace with
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
Changing MaterialComponents to AppCompat works for me..

I think you need to change your attribute from "theme" to "style". These files are intended for different things, so are used differently.
Style is used to assign attributes to individual views or components, and Theme is used to apply attributes to the entire app.
So try this instead:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnLogin"
android:id="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
<!-- This attribute was changed -->
android:style="#style/ButtonStlye123"
android:onClick="login" />
You should also split these different types of XML into the correct files as appropriate (styles.xml and themes.xml - instead of keeping them all in the same file). This is convention, and won't effect the code compilation or execution, but is recommended as a code style.

Use this attribute backgroundTint it will help you. It work for me. Example :
android:backgroundTint="#color/md_orange_800"

if you are using Android Studio Version 4.1 and above (Beta)
check your themes.xml file in values.
<style name="Theme.NavaFlashLightV4" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
change the attribute to #null
<style name="Theme.NavaFlashLightV4" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#null</item> <!-- HERE -->
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
for other old versions of Android Studio
just change this attribute
<item name="colorPrimary">#color/colorPrimary</item>
to
<item name="colorPrimary">#color/#null</item>
finally set the background of the button to the drawable icon you want.
example:
<Button
android:id="#+id/btnSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher_background" /> <!--the drawable you want-->

You only need to change your App Theme from Theme.MaterialComponents.DayNight.DarkActionBar to Theme.AppCompat.Light.NoActionBar inside styles.xml file
example :
from : style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"
To : style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"

your style should be like this....
<style name="ButtonStlye123" >
<item name="android:textSize">19dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">#color/ColorDivider</item>
<item name="android:background">#color/ColorAccent</item>
</style>
and in layout
<Button
android:id="#+id/btn3"
style="#style/ButtonStlye123"
android:layout_width="#dimen/sixzero"
android:layout_height="#dimen/sixzero"
android:text="3" />

I am using targetSdk 30 and compileSdk 32 and I am using Button widget. Android Studio version 2021.1.1
In my case, following change worked,
In AndroidManifest.xml, under "application" tag changing "android:theme" from
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
to
android:theme="#style/Theme.MaterialComponents.DayNight.NoActionBar"
I moved to Theme.AppCompat.Light.NoActionBar to remove the title bar. At first I tried to change "style" to "Theme.AppCompat.Light.NoActionBar" inside themes.xml but it didn't work for me.