Develop Reference

How to tint the color of the shadow in Android Switch?

I'm using Material Switch, and I know how to change the colors of the track and the thumb, but how do you change the color of the radiant shadow?
I have changed the color to purple, but when I tap on it, there is still that green shadow. I've tried styles, appcompat switch, etc but nothing worked.
Here is my code:
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="#+id/switch_compat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:trackTint="#color/purple_500"
app:thumbTint="#color/purple_700"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Thanks!

You can change the color of the ripple using
<item name="colorControlHighlight">#color/purple_700</item>
But you will need to define two styles for this either in styles.xml or themes.xml:
<style name="SelectableItemBackgroundBorderless">
<item name="android:theme">#style/SelectableItemTheme</item>
<item name="android:background">?attr/selectableItemBackgroundBorderless</item>
</style>
<style name="SelectableItemTheme">
<item name="colorControlHighlight">#color/purple_700</item>
</style>
Then define style attribute for you switch:
style="#style/SelectableItemBackgroundBorderless"
So your Switch will be:
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="#+id/switch_compat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:trackTint="#color/purple_500"
app:thumbTint="#color/purple_700"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/SelectableItemBackgroundBorderless" />
EDIT:
You can change the color of ripple on OFF state and ON state. No need to use the first style. Just define theme, no need to define style:
android:theme="#style/SelectableItemTheme"
Define in styles:
<style name="SelectableItemTheme">
<item name="colorControlHighlight">#color/purple_500</item>
<item name="colorControlActivated">#color/purple_700</item>
</style>

How to change background color of MaterialButton through styles.xml

I am trying to change the background color and text color of a material button-through style.
However, I see no change in IDE and as well as on phone.
Here is a screenshot of the issue.
The button next to cancel misbehaves, after checking in tons of attributes I fail to change background color.
Here is my XML:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_login_skip"
style="#style/myMaterialButton.Unboxed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cancel"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#id/btn_login_login" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_login_login"
style="#style/myMaterialButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/pay_deail_submit_btn"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is some style info:
<style name="myMaterialButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="android:textColor">#color/colorPrimary</item>
<item name="strokeWidth">2dp</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
Here are colors:
<color name="colorPrimary">#color/silver</color>
<color name="colorPrimaryDark">#2A2E43</color>

By Material Official Source you should use app:backgroundTint in your style
meanwhile for checking "Widget.MaterialComponents.Button.OutlinedButton" styles you should check buttons on Device or Emulator, sometimes buttons with this style dosent show good in IDE

MaterialButton is visually different from Button and AppCompatButton. One of the main differences is that AppCompatButton has a 4dp inset on the left and right sides, whereas MaterialButton does not.
You can use app:backgroundTint to change the color
With this you need to use
android:insetTop="0dp"
android:insetBottom="0dp"

As described in the official doc, you can use the backgroundTint attribute:
<style name="myMaterialButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
<!-- Background color -->
<item name="backgroundTint">#color/...</item>
</style>
Don't use the android:background attribute to change the background color.

How to use default android themes?

Hy
I created an android project, and I saw thet, tehe are two themes.xml file. In emulator, when I switch day and night mode, my application color schema is changes too.
I thought it is greate, because with thease themes it will be easy to create a day/night app, but I don't know how it works.
How can I define a new color item inside themes, and use this schema for layout background?
For example: There is an item in both themes
<item name="colorPrimary">#303F9F</item>
And I would like to create a new item for both themes.xml, and use it to set up fragment background color, but the intellisense doesn't find this element directly.
<item name="backgroundColor">#303F9F</item>

You can change color easily from where you define your theme in 'styles.xml'.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorSecondary</item>
<item name="colorPrimaryDark">#color/colorSecondaryDark</item>
<item name="colorAccent">#color/colorSecondaryAccent</item>
</style>
I have two themes in my app so if i change the color or anything in my theme i will define that color in my selected theme for example:
i want to change the background color of 'AppThemeDark' i just define the color like this
<item name="background">#color/"#fff67"</item>

copy this line in your first screen
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

Ok In constraintlayout background tag is not worked so I will fix this problem with the use of View.
<android.support.constraint.ConstraintLayout
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:background="#AAA">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFF"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
tools:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
</android.support.constraint.ConstraintLayout>

Android FAB icon always black with MaterialComponents theme

I'm creating an Android app and I'm using the AndroidX libraries and Material design theme. My app theme on styles.xml is:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
I have the following FAB from a custom library:
<com.leinardi.android.speeddial.SpeedDialView
android:id="#+id/work_log_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:layout_behavior="#string/speeddial_scrolling_view_snackbar_behavior"
app:sdMainFabClosedSrc="#drawable/ic_add_white_24dp"
app:sdOverlayLayout="#id/overlay" />
And also tried the default FAB:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_add_white_24dp"
android:layout_margin="16dp" />
No mater the color of the icon (a vector drawable), the icon inside the FAB (from the library and from the default) is always black. I have narrowed down the problem to the material design theme, since using the old Theme.AppCompat.Light.DarkActionBar instead of the new Theme.MaterialComponents.Light.DarkActionBar the icon inside the FAB gets the color of the original vector drawable.
Does anyone know why this is happening and how to solve it?

I solved this by using:
app:tint="#color/COLOR_OF_ICON"
and NOT:
android:tint="#color/COLOR_OF_ICON"
Reference: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

For MaterialComponents Theme you can define the following colors.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorPrimaryVariant">#color/primaryVariant</item>
<item name="colorOnPrimary">#color/onPrimary</item>
<item name="colorSecondary">#color/secondary</item>
<item name="colorSecondaryVariant">#color/secondaryVariant</item>
<item name="colorOnSecondary">#color/onSecondary</item>
<item name="colorAccent">#color/accent</item>
<item name="colorSurface">#color/surface</item>
<item name="colorOnSurface">#color/onSurface</item>
<item name="colorError">#color/error</item>
<item name="colorOnError">#color/onError</item>
<item name="colorButtonNormal">#color/buttonNormal</item>
<item name="colorControlNormal">#color/controlNormal</item>
<item name="colorControlActivated">#color/controlActivated</item>
<item name="colorControlHighlight">#color/controlHighlight</item>
<item name="colorBackgroundFloating">#color/backgroundFloating</item>
</style>
colorSecondary is the responsible color for FloatingActionButton.
and
colorOnSecondary is the responsible color for icon color of FloatingActionButton.
In your AppTheme you have not defied the colorSecondary. So, it took the default black color from parent Theme.MaterialComponents.Light.DarkActionBar.
Reference : Android dev summit, 2018 - The Components of Material Design

As said in this answer, if your icon has multiple colors or if you want to keep your icon original color(s), then assign #null as the tint:
app:tint="#null"

According to the GitHub documentation page for the Material Components library's FloatingActionButton, the only attributes that affect the icon are
app:srcCompat
app:tint
app:maxImageSize
In this case, since your color is defined as a constant (#FFF), the only one that seems to make sense is app:tint. Perhaps something in your theme has set this to black?
You ought to be able to override it by setting app:tint="#FFF" on your FAB.

Is Your Icon is multicolor
Add Only
app:tint="#null"
but if you only want to change color
#dimen/fab_margin -> 16dp
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
style="#style/Widget.MaterialComponents.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/colorAccent"
app:srcCompat="#drawable/ic_add"
app:tint="#color/colorWhite" />
Style :
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Programmatically in kotlin :
fab.setImageDrawable(ContextCompat.getDrawable(context!!, R.drawable.your_drawable))

In my case, I just follow this
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/bottom_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_home"
android:scaleType="centerCrop"
android:src="#drawable/ic_add_sign"
app:backgroundTint="#color/app_dark_green"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:layout_anchor="#id/nav_view"
app:tint="#FFF" />
And my result is

use app:tint="#color/white"
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
app:tint="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="#drawable/ic_done"/>

I was looking for it and the following code worked.
android:backgroundTint="#color/primarycolor"
android:textColor="#color/white"
app:iconTint="#color/white"

Using vector asset as icon for FAB . Here is what worked for me .
app:tint is changing vector icon color and app:backgroundTint is changing background of FAB .
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/idFABAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:gravity="bottom"
android:layout_gravity="bottom|right"
android:layout_marginBottom="70dp"
android:layout_alignParentBottom="true"
android:layout_marginStart="18dp"
android:layout_marginTop="18dp"
android:layout_marginEnd="18dp"
app:srcCompat="#drawable/ic_baseline_home_24"
app:tint="#color/white"
app:backgroundTint="#color/purple_500"
android:contentDescription="TODO" />

I'm also using Heinardi speed dial library. According to the document about customizing items, you can define a theme for the component:
<style name="Theme.FAB">
<item name="colorPrimary">#color/Primary</item>
<item name="colorAccent">#color/Accent</item>
<item name="colorOnSecondary">#color/white</item>
</style>
Note that colorPrimary defines the color of extended buttons,
colorAccent the color of main button,
colorOnSecondary the color of icon.
Then you can add the theme to SpeedDialView:
<com.leinardi.android.speeddial.SpeedDialView
android:id="#+id/speedDial"
android:theme="#style/Theme.FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:sdMainFabClosedSrc="#drawable/ic_add_white"
app:sdOverlayLayout="#id/speedDialOverlay" />

app:backgroundTint="#color/white"
app:fabSize="mini"
app:srcCompat="#drawable/ic_"
app:tint="#null"

Color of icons are overrided by colorOnSecondary (see themes.xml).
To put the icon colour you want you must use:
app:tint="#colour/icon_colour"
And for the background:
app:backgroundTint="#colour/icon_colour"
You can change these colours automatically by the theme using https://stackoverflow.com/a/24043959/1200914

Just want to add my 2 cents. There are a few options how to fix your color issue for Material Components. The majority of them are already covered in the answers.
However, there's another and, probably, more general approach in this case. You can set a default "floatingActionButtonStyle" to your theme which will be used for all FloatingActionButtons.
<style name="Theme.Design" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="floatingActionButtonStyle">#style/Theme.Design.FloatingActionButton</item>
</style>
<style name="Theme.Design.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
<item name="tint">#null</item>
</style>
More details about styling of FloatingActionButtons is available there Theming Fabs

UPDATED
Shortly:
#gab-ledesma comment did the trick:
https://stackoverflow.com/a/53843325/5451349
implementation 'com.google.android.material:material:1.2.0-alpha05'
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
...
app:iconTint="#color/white"
app:icon="#drawable/ic_add_white"
...
Finnaly app:iconTint changed an icon color.
I've found it in the source code:
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/res/values/styles.xml#L81
Of cource, you need to check the instruction before:
https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

When using Theme.MaterialComponents.Light.NoActionBar style, setting Button Background has no effect

In order to use Chip and ChipGroup, I set Application style extends Theme.MaterialComponents.Light.NoActionBar int manifests.xml, then I set Button "android:background" attr, but it does not effect! why? and what can I do?
This is my style:
<style name="AppBaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/primary_material_light</item>
<item name="colorPrimaryDark">#color/header_color</item>
<item name="actionBarSize">48dp</item>
<item name="android:screenOrientation">portrait</item>
<!--<item name="buttonStyle">#style/AntButton</item>-->
<!--<item name="materialButtonStyle">#style/AntButton</item>-->
<!--<item name="android:button"></item>-->
<!--<item name="android:progressTint">#color/ffc000</item>-->
<item name="colorAccent">#color/ffc000</item>
</style>
<style name="AntButton" parent="android:Widget">
<item name="android:background">#drawable/abc_btn_default_mtrl_shape</item>
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">88dip</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
<!--<item name="android:colorButtonNormal">#color/white</item>-->
</style>
I have tried to change buttonStyle and materialButtonStyle, but not effect too!
this is my layout XML:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/ll_popup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
android:divider="#drawable/shape_divider_05dp"
android:orientation="vertical"
android:showDividers="beginning|middle">
<!--only can use backgroundTint to change background color-->
<Button
android:id="#+id/item_popupwindows_Photo"
android:layout_width="match_parent"
android:layout_height="55dp"
android:backgroundTint="#color/white"
android:text="Pictrue"
android:textColor="#color/c_666666"
android:textSize="16sp" />
<!--background not effect !!-->
<Button
android:id="#+id/item_popupwindows_cancel"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#color/white"
android:text="cancel"
android:textColor="#color/c_666666"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
this is result :
Because I have used Chip and ChipGroup in APP, I have to user theme extends MaterialComponents! do you know how to resolve it ？please tell me, thanks!
in this page Can't use android:background with button from the new material components, the author wants to change the default padding, but I want to change the backgroundDrawable, so, it does not work for me.

If you want a true Button, but one that you can modify like the framework Button (instead of the MaterialButton), then you can explicitly specify the framework version in your layout file. Replace this:
<Button
android:id="#+id/item_popupwindows_cancel"
... />
with this:
<android.widget.Button
android:id="#+id/item_popupwindows_cancel"
... />
This will give you what it says on the tin: an android.widget.Button, which should respond to styling the way you expect.
Similarly, you could use a <androidx.appcompat.widget.AppCompatButton> if you want support library features but not material components features.

In this particular case, the LinearLayout holding your second Button seems to have a white background color. That means you don't need to explicitly specify a white background for your Button; you can just let the LinearLayout's background show through.
This can be accomplished by using the "Text Button" style of MaterialButton:
style="#style/Widget.MaterialComponents.Button.TextButton"

Use this code for change the color
app:backgroundTint="#color/primaryColor"

You can also use ImageButton instead of Button from material components. android:background is working on ImageButton.
<ImageButton
android:id="#+id/item_popupwindows_cancel"
... />