CODEWITHSUNDEEP
androidxmlbuttonandroid-buttonmaterial-components-android
Fath.Saif
Fath.Saif

Reputation: 241

Android button background is taking the primary color

I've this issue, I don't know where it come from, I've created this buttons with custom background, but the background color talking the primary color and cannot change it unless change the primary color.

<Button
    android:id="@+id/btn_teacher"
    style="@style/normalText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/_16sdp"
    android:background="@drawable/btn_rounded_stroke"
    android:text="@string/txt_teacher" />

    <resources>
        <color name="colorPrimary">#008577</color>
        <color name="colorPrimaryDark">#00574B</color>
        <color name="colorAccent">#D81B60</color>
        <color name="bg_color">#FFD7A4</color>        
    </resources>

I have many buttons with different colors, so i can't change the primary color

here is my drawable background

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item >
        <shape android:shape="rectangle"  >
            <size android:height="@dimen/_48sdp" />
            <corners android:radius="@dimen/_24sdp" />
            <stroke android:width="@dimen/_1sdp" android:color="#59CECE" />
            <solid android:color="@android:color/white"/>
        </shape>
    </item>

</layer-list>

I'm using new material design by google

implementation "com.google.android.material:material:1.3.0-alpha02"

How can i override this color? this the image for buttons

Upvotes: 24

Views: 9244

Answers (6)

Wowo Ot
Wowo Ot

Reputation: 1529

What worked for me

First create btn_style in your styles.xml or themes.xml

<style name="btn_style" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@null</item>
</style>

then in you layout apply the style and use the color or drawable that you want

        <Button
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:background="@color/Red"
            style="@style/btn_style"
            android:text="Button"/>

Upvotes: 2

Ansh Jaiswal
Ansh Jaiswal

Reputation: 1

All you need to do is simply go to your themes.xml file and change the style name to:

style name="Theme.AnimatedLogin" 
parent="Theme.AppCompat.Light.NoActionBar"

in Light theme mode and to:

style name="Theme.AnimatedLogin"
parent="Theme.AppCompat.DayNight.NoActionBar"

in Dark theme mode in your theme.xml(night) file and then you can customize your button and change its colour.

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365028

Since you are using a Theme.MaterialComponents.* your Button is replaced at runtime by a MaterialButton.

Currently the backgroundTint is still the default MaterialButton style. It means that if you are using a custom android:background, you have to make sure to null out backgroundTint to avoid that the custom background doesn't get tinted with the attr/colorPrimary defined in your theme.

You have to add app:backgroundTint="@null":

  <Button
    app:backgroundTint="@null"
    android:background="@drawable/.."

In any case you don't need a custom background (btn_rounded_stroke) in your case. You are just using a custom background only to define rounded corners. This feature is provided by default by the MaterialButton, then just use the cornerRadius attribute.

Use the standard MaterialButton:

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:strokeColor="#59CECE"
        app:cornerRadius="24dp"

enter image description here

Upvotes: 44

guest
guest

Reputation: 462

When Material theme is used then Button view is mapped to MaterialButtton. There is one more way to setup the button background in this case.

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"
...
        <item name="materialButtonStyle">@style/ColoredButton</item>
    </style>

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

Upvotes: 5

Mahmoud Zaher
Mahmoud Zaher

Reputation: 741

In your Gradle just replace this line

implementation "com.google.android.material:material:1.3.0-alpha02"

with this

 implementation 'com.google.android.material:material:1.2.1'

Upvotes: 0

Pratik Fagadiya
Pratik Fagadiya

Reputation: 1472

Try this .

Your Button:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#FFFFFF"
    android:layout_margin="5dp"
    android:background="@drawable/round_btn"
    android:padding="20dp"
    android:text="My Text" />

Here is your round_btn drawable:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#008577" />
    <corners android:radius="20dp" />
</shape>

Upvotes: -1

Related Questions