Develop Reference

Android Material Button - #drawable specs not recognized

New to AS. Trying to use MaterialButton, overriding default background with #drawable, but it's not working.
Environment
Android Studio: 4.0
Dependencies:
implementation "androidx.appcompat:appcompat:$dependency_version_appcompat"
implementation "com.google.android.material:material:$dependency_version_material"
Drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shape="rectangle">
<solid
app:backgroundTint ="?attr/ColorBackgroundAppBar">
</solid>
<stroke
android:width="1px"
android:color="?attr/ColorBorderDark">
</stroke>
</shape>
Layout
<com.google.android.material.button.MaterialButton
android:id="#+id/common_appbar_btn_lang_mode"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background = "#drawable/common_appbar_btn_background"
android:elevation="#dimen/common_elevation_height_btn"
... />
With the above, I just get the default MaterialButton background.
If I set backgroundTint to #null
<com.google.android.material.button.MaterialButton
android:id="#+id/common_appbar_btn_lang_mode"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
app:backgroundTint="#null"
android:background = "#drawable/common_appbar_btn_background"
android:elevation="#dimen/common_elevation_height_btn"
... />
With the above, the drawable specs are recognized, but if I change the theme style, that doesn't work.
These are the only settings that work:
<com.google.android.material.button.MaterialButton
android:id="#+id/common_appbar_btn_lang_mode"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:backgroundTint = "?attr/ColorBackgroundAppBar"
app:strokeColor="?attr/ColorBackgroundAppBar"
app:strokeWidth="0px"
android:elevation="#dimen/common_elevation_height_none"
android:fontFamily="#font/font_family_kaiti"
android:text="简"
android:textAlignment="center"
android:textColor="?attr/ColorTextPrimary"
android:textStyle="normal"
android:textFontWeight="700"
android:textSize="24dp" />
Am I doing sth wrong...or is MaterialButton not quite there yet? I can live with the last solution, but it increases maintenance...

Define you app theme using Theme.MaterialComponents.DayNight:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryVariant">#color/colorPrimaryLight</item>
<item name="colorSecondary">#color/colorSecondary</item>
<!-- .... -->
</style>
Then, if you need, define the colors for the light and dark mode:
Example: res\values\colors.xml:
<color name="colorPrimary">.....</color>
In res\values-night\colors.xml folders define the same color:
<color name="colorPrimary">.....</color>
Finally define a style for your button (you don't need 2 different styles for dark and light mode):
<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#color/....</item>
<item name="strokeColor">#color/....</item>
<item name="strokeWidth">#dimen/....</item>
</style>
Last step assign the style to the Button in the layout.
<com.google.android.material.button.MaterialButton
style="#style/Widget.App.Button"
.../>
or globally in your app theme:
<item name="materialButtonStyle">#style/Widget.App.Button</item>
For your Button since you are not using a gradient you can use the standard attributes provided by the MaterialButton.
If you prefer to use the android:background attribute with a custom drawable you can use:
<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#null</item>
<item name="android:background">#drawable/.....</item>
</style>
Then inside the drawable just use the colors or attributes defined in the app theme and in the res\values\colors.xml and res\values-night\colors.xml folders.

Change Color from material outlined button doesn't work

I want to change the color of the active toggle button. But just the change of the rippleColor makes a difference.
I wish to customize the background color of the active button and the text color.
<style name="ToggleButtonGroupStyle" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="rippleColor">#color/colorAccent</item>
</style>
In the following toggleButtonGroup I used this style from above:
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/priority_btn_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentLeft="true"
app:selectionRequired="true"
app:singleSelection="true"
app:checkedButton="#+id/btn_one"
>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_one"
style="#style/ToggleButtonGroupStyle"
android:layout_width="#dimen/priority_btn_width"
android:layout_height="wrap_content"
android:shadowColor="#color/project_text"
android:text="0" />
<com.google.android.material.button.MaterialButton
style="#style/ToggleButtonGroupStyle"
android:layout_width="#dimen/priority_btn_width"
android:layout_height="wrap_content"
android:text="!" />
<com.google.android.material.button.MaterialButton
style="#style/ToggleButtonGroupStyle"
android:layout_width="#dimen/priority_btn_width"
android:layout_height="wrap_content"
android:text="!!" />
<com.google.android.material.button.MaterialButton
style="#style/ToggleButtonGroupStyle"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="!!!" />
</com.google.android.material.button.MaterialButtonToggleGroup>
Could anybody give me a hint what the problem here is?
Thanks :)

The background color of the checked buttons is based on the colorPrimary attribute.
You can use:
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_one"
style="?attr/materialButtonOutlinedStyle"
android:theme="#style/ThemeOverlay.Custom.Button"
with:
<style name="ThemeOverlay.Custom.Button" parent="">
<item name="colorPrimary">#color/....</item>
</style>
or you can use a custom style with:
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_one"
style="#style/ToggleButtonGroupStyle"
with:
<style name="ToggleButtonGroupStyle" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="backgroundTint">#color/custom_selector</item>
</style>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/..." android:state_checked="true"/> <!-- selected color -->
<item android:color="#android:color/transparent" android:state_checked="false"/>
</selector>

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"

selected color of MaterialToggleButton to a solid color

Not able to make the selected color of MaterialToggleButton to a solid color, only a transparent shade of color primary is shown.
I tried the below set of code and the out image is shown below.
Button theme in styles
<style name="ThemeButtonColorToggle" parent="AppTheme">
<item name="colorPrimary">#color/colorOrange</item>
<item name="colorButtonNormal">#color/colorOrange</item>
<item name="android:backgroundTint">#color/black</item>
<item name="strokeColor">#color/colorOrange</item>
<item name="strokeWidth">#dimen/mtrl_btn_stroke_size</item>
<item name="colorOnPrimary">#color/colorOrange</item>
<item name="colorOnPrimarySurface">#color/colorOrange</item>
</style>
XML code
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/toggleGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:checkedButton="#id/btnAndroid"
app:layout_constraintTop_toBottomOf="#id/tvName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:selectionRequired="true"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="#+id/btnAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:theme="#style/ThemeButtonColorToggle"
android:textColor="#android:color/white"
android:textColorHighlight="#color/colorOrange"
android:text="Android" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btniOS"
android:layout_width="wrap_content"
android:textIsSelectable="true"
android:textColor="#android:color/white"
android:theme="#style/ThemeButtonColorToggle"
android:layout_height="wrap_content"
android:text="iOS" />
</com.google.android.material.button.MaterialButtonToggleGroup>
I require to get a solid color as shown below
can anyone please help me to sort out

The background color of the MaterialButton is defined by the backgroundTint attribute.
The default value is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>
You can change it in the xml layout or you can define a custom style:
<com.google.android.material.button.MaterialButton
style="#style/ButtonStyle"
.. />
with:
<style name="ButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#color/your_button_background_selector</item>
...
</style>

How to have Material design buttons with different colors in API 21?

Coming from this thread: Android Material Design Button Styles
I couldn't understand how to individually change the colors of the buttons, so that not all buttons are with the same color.
<item name="android:colorButtonNormal">#color/blue</item>
This solution works nice, but it changes the color of all buttons.
In API 22, we can change the color of the different buttons by using the backgroundTint, like so:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:backgroundTint="#color/orange"
android:text="#string/button1_text"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="18sp" />
How can we do it in API 21 ?
That's the styles.xml that I have:
<style name="AppTheme" parent="#android:style/Theme.Material.Light">
<item name="android:actionBarStyle">#style/actionBarCustomization</item>
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerDropDownItemStyle</item>
<item name="android:spinnerItemStyle">#style/mySpinnerItemStyle</item>
<item name="android:colorButtonNormal">#color/myDarkBlue</item>
</style>
<style name="actionBarCustomization" parent="#android:style/Widget.Material.Light.ActionBar">
<item name="android:background">#color/white</item>
<item name="android:titleTextStyle">#style/actionBarTextColor</item>
</style>
<style name="actionBarTextColor" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/black</item>
</style>

Okay, I figured it out. Here is the way I solved it, I hope it helps someone else too (I am not saying that it's perfect).
I created a drawable material_ripple_effect.xml that looks like that:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/black">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#color/myOrange" />
</shape>
</item>
</ripple>
And then in the layout, where I have the button, I just set the ripple drawable as a background. In activity_main.xml:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:backgroundTint="#color/orange"
android:background="#drawable/material_ripple_effect"
android:text="#string/button1_text"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="18sp" />