Android default button color

Question

When I open a new android studio project, the default color for button is purple. I want the default color to be the gray default button color(I assume you know what I mean). I tried to change the color via xml and java and nothing worked. I want that the default button color will be gray without I'd have to change it every time.

themse.xml:

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.HangmanGame" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorPrimaryVariant">@color/purple_700</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

themes.xml(night)

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.HangmanGame" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/purple_200</item>
    <item name="colorPrimaryVariant">@color/purple_700</item>
    <item name="colorOnPrimary">@color/black</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_200</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

Solution 1

Since you are using a Theme.MaterialComponents.* theme the default background color of the Button (which is replaced by a MaterialButton) is the colorPrimary defined in your app theme.
In your case:

<item name="colorPrimary">@color/purple_500</item>

You can change this value (but this will affect all widgets).

If you want to change globally the button style in your app you can also add the materialButtonStyle attribute in your app theme:

<style name="Theme.HangmanGame" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
   <item name="materialButtonStyle">@style/Widget.App.Button</item>
</style>

with:

<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/...</item>
</style>

If you want to change this color only in the button you can use also the app:backgroundTint attribute removing the android:background attribute:

<Button
    app:backgroundTint="@color/..."/>

If you want to use a custom background using the android:background attribute you have to add app:backgroundTint="@null" to avoid that the button is tinted.

Solution 2

I think the easiest way is to go into three xml files: src\main\res\values\colors.xml, src\main\res\values\themes.xml, and src\main\res\values-night\themes.xml

In the colors.xml, add a color and call it "button", then set the color to what you want. For a simple list of color codes, see this answer: https://stackoverflow.com/a/7323234/5374362

The line would look something like this:

<color name="button">#808080</color>  //That code is the gray you want.

In the two themes files, change colorPrimary to "@color/button"

This will affect every button in the app.

Comments

[Gabriele Mariotti]

Are you using the material components library?

[Tomer]

No, The button color is purple by default

[Gabriele Mariotti]

Post your app theme

[Md. Tahmid Mozaffar]

your colorPrimary and colorPrimaryVariant is set to purple. changing these to a grey color is not working?

[Tomer]

What is the hex value of default button color?

[Gabriele Mariotti]

@Tomer You are using a MaterialComponents theme. Check the answer below. The background color of the button is based on <item name="colorPrimary">@color/purple_500</item>.