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?

Lynxeyed

are you sure the style name "buttonstyle123" and in your button "questbuttonstyle" shouldn't be the same? – Archangel

@Archangel yes they should, typo when placing it here. they are the same in my app – Lynxeyed

TRY: android:style="@style/ButtonStlye123" (instead of "theme") – Jenaejenda

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) – Jenaejenda

change backgroundTint – Electricity

@Jenaejenda please check whether it is android:style attribute or simple 'style="@style/ButtonStlye123"' only. – Haynes

Material theme overrides your background tint, you can use app:backgroundTint="@null" or remove MaterialTheme – Koenig

Answer 1

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.

Jenaejenda

Is it possible to apply to all buttons automaticly? – Lynxeyed

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) – Jenaejenda

im trying this #2411336 solution but i cant get it to work – Lynxeyed

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). – Jenaejenda

Answer 2

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

Loom

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). – Gaynell

It worked. But I don't understand the reason behind this. – Hanaper

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

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

Follow this link #30557304, we know Button should be AppCompatButton automatically, but actually it's not. – Reeba

Worked fine, I guess we are moving from button to AppCompatButton gradually – Enthusiast

Materiel design Button code works on material designs as expected. – Someone

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

Although this solves my problem, please look at Hor Chanpheng's answer. It also worked for me – Demonism

Answer 3

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>

Oberg

This one solved my problem...Don't use >Button – Tappet

@Tappet alternatively, either stop using material theme, or you can also set app:backgroundTint="@null" – Koenig

Answer 4

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

Distinctive

This has saved my life. Like 3 days trying to find the issue. Thank you. – Pages

Thank you, but why this is happening ? – Homogenize

@Homogenize : 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. – Distinctive

Answer 5

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

Olympias

Answer 6

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

android:backgroundTint="@color/md_orange_800"

Adonai

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://mcmap.net/q/238134/-android-button-background-color-not-changing – Mediocrity

Answer 7

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"

Outworn

Answer 8

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

Cerelia

Setting the primary color to null causes the app to crash on Android Studio 4.2. – Seeress

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

Answer 9

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

Vitiate

Answer 10

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.

Inflatable

Answer 11

change background this:

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

to this line >>>

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

Orifice