Android Button background color not changing

Question

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?

are you sure the style name "buttonstyle123" and in your button "questbuttonstyle" shouldn't be the same? — alltooconfusingthereforesleep, Aug 06 '15 at 14:28
@alltooconfusingthereforesleep yes they should, typo when placing it here. they are the same in my app — Sven van den Boogaart, Aug 06 '15 at 14:28
TRY: android:style="@style/ButtonStlye123" (instead of "theme") — Booger, Aug 06 '15 at 14:30
Styles are for components, and Themes are for App (or global attributes). They are different in concept (not sure if they are different in execution) — Booger, Aug 06 '15 at 14:31
@Booger please check whether it is android:style attribute or simple 'style="@style/ButtonStlye123"' only. — Abhinav Saxena, Jul 23 '21 at 13:28
Material theme overrides your background tint, you can use `app:backgroundTint="@null"` or remove MaterialTheme — EpicPandaForce, Apr 07 '23 at 23:29

score 226 · Answer 1 · edited Mar 10 '23 at 06:28

226

Try using 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 material design Button use

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

edited Mar 10 '23 at 06:28

Om Mishra

52
9

answered Oct 28 '20 at 18:15

Hezy Ziv

3,652
2
14
8

3

Interestingly, for me even settings "android:background" directly on the Button did not work. But it works for AppCompatButton. So I guess, it has something to do with the way AppCompatActivity and simple Activity are styled... Anyway, this solution works for me (with AppCompatActivity). – Dmitrii Semikin Dec 02 '20 at 10:35
4

It worked. But I don't understand the reason behind this. – Aman Dec 23 '20 at 14:45
I see this issue is common now. Never knew that changing to `AppCompatButton` would fix it. While this isn't really an answer directed to the original question, it certainly helps us now. – MJV Jan 05 '21 at 01:25
3

Seems that for a Button, the primary color defined in the app theme takes precedence over any custom background you want to apply to a Button, but it is not the case for the AppCompatButton. Not sure if this is a bug or a feature of Android – ceyquem Jan 05 '21 at 03:06
Follow this link https://stackoverflow.com/questions/30556804/difference-between-an-appcompat-view-and-a-normal-android-view?answertab=active#tab-top, we know Button should be AppCompatButton automatically, but actually it's not. – BollMose Feb 04 '21 at 01:21
4

backdroundTint worked for me, thanks mate. – Mr. Disability May 02 '21 at 11:06
1

Worked fine, I guess we are moving from button to AppCompatButton gradually – vin shaba Aug 13 '21 at 13:27
Thanks a lot, that's the solution I was looking for. – Dinesh Falwadiya Nov 27 '21 at 06:20
Materiel design Button code works on material designs as expected. – vss Jun 27 '22 at 15:01
I could kiss you. This was an incredibly frustrating issue to try and google. This also fixes issue with Studio recommending "drawableStart" instead of "drawableLeft" or whatever as drawableStart doesn't work in a Button – bonjonbovi Feb 12 '23 at 23:40
Although this solves my problem, please look at Hor Chanpheng's answer. It also worked for me – Alex8752 Mar 05 '23 at 01:42

score 51 · Answer 2 · edited Jan 04 '23 at 22:54

51

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>

edited Jan 04 '23 at 22:54

Aakash

21,375
7
100
81

answered Apr 05 '21 at 08:37

vinay shetty

895
1
9
15

2

This one solved my problem...Don't use >Button – Maduro Aug 26 '21 at 16:29
2

@Maduro alternatively, either stop using material theme, or you can also set `app:backgroundTint="@null"` – EpicPandaForce Apr 07 '23 at 23:28

Hor Chanpheng · Answer 3 · 2021-12-28T03:24:42.310

48

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">

edited Dec 28 '21 at 03:24

answered Feb 19 '21 at 00:26

Hor Chanpheng

811
8
9

2

This has saved my life. Like 3 days trying to find the issue. Thank you. – hmartinezd Nov 12 '21 at 21:37
1

Thank you, but why this is happening ? – Web.11 Apr 25 '22 at 10:00
2

@Web.11 : because the latest version of android studio automatically uses Material theme , so button is applied with those theme components. Another way, you can use androidx.appcompat.widget.AppCompatButton instead or change parent theme to Theme.AppCompat.Light.NoActionBar. – Hor Chanpheng Apr 25 '22 at 10:17

score 28 · Answer 4 · answered Jan 18 '21 at 19:03

28

<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..

answered Jan 18 '21 at 19:03

sagar adhikari

281
3
3

score 16 · Accepted Answer · answered Aug 06 '15 at 14:35

16

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.

answered Aug 06 '15 at 14:35

Booger

18,579
7
55
72

Is it possible to apply to all buttons automaticly? – Sven van den Boogaart Aug 07 '15 at 10:46
If you want to apply a style universally, you would need to create a Java class (of your own custom making), that extends the Button class, and then assign the style in that Java class. Otherwise, there is no built-in way to make a certain style apply universally. You CAN put a lot of attributes in the style (including width, height, etc) so this IS way to centalize this stuff (again, you will need to put that _style_ attribute in XML manually (no way to do this automatically) – Booger Aug 07 '15 at 13:11
im trying this http://stackoverflow.com/questions/2410836/how-do-i-apply-a-style-to-all-buttons-of-an-android-application solution but i cant get it to work – Sven van den Boogaart Aug 07 '15 at 13:17
I have never used this. I think it is easy enough to just apply the style attribute to each view in XML (don't feel the need to apply that universally). – Booger Aug 07 '15 at 15:09

score 7 · Answer 6 · edited Nov 04 '21 at 11:28

7

Use this attribute backgroundTint it will help you. It work for me. Example :

android:backgroundTint="@color/md_orange_800"

edited Nov 04 '21 at 11:28

Aldan

674
9
23

answered Mar 03 '21 at 09:33

Muhammad Umair

274
3
13

This doesn't work well when using a drawable as background so changing to AppCompatButton is the better option so far as mentioned here https://stackoverflow.com/a/66950268/8015914 – Loveth Sep 28 '21 at 09:18

score 6 · Answer 7 · answered Dec 06 '20 at 11:33

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-->

Setting the primary color to null causes the app to crash on Android Studio 4.2. — Andrew S, Feb 08 '22 at 06:46
I think if you want to properly style your app and especially the buttons you need to stop using the MaterialComponents style as they replace the buttons with appCompat equivalents causing complexities. — Andrew S, Feb 08 '22 at 07:01

Deepanshu · Answer 8 · 2021-02-24T13:39:57.860

6

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"

edited Feb 24 '21 at 13:39

answered Feb 24 '21 at 07:06

Deepanshu

133
1
3

score 0 · Answer 9 · answered Aug 06 '15 at 14:33

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" />

score 0 · Answer 10 · answered Jan 31 '22 at 18:42

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.

score 0 · Answer 11 · answered Jun 03 '23 at 14:50

0

change background this:

<Button android:background="@color/black">

to this line >>>

<Button android:backgroundTint="@color/black">

answered Jun 03 '23 at 14:50

Ahmed Ramadan

181
1
4

Android Button background color not changing

11 Answers11

Linked

Related