androidbuttonandroid-buttonmaterial-components-androidmaterialbutton

Button Doesn't Show Correct Color - Android Studio


In my Android Studio application, I have a button for which I set a drawable as the background. The drawable rounds the corners and changes the color of the button. However, when I look at the resulting design of the activity, the color I want doesn't show up. Instead, the button assumes colorPrimary (orange, #ED3616). The same occurs when I run the application. Note: the other attributes of the drawable file translate perfectly to the button (i.e. the rounded corners). The problem is only with the color.

I have tried using a MaterialButton, and setting the color with android:backgroundTint. Then, the color does show up as I want to, but the design looks odd (there is a different colored rectangle inside of the button(Picture of MaterialButton if you'd like to see it)

How can I make the regular button have the color I desire?

Button:

<Button
    android:background="@drawable/round2"
    android:id="@+id/signIn"
    android:layout_width="256dp"
    android:layout_height="66dp"
    android:text="@string/logIn"
    android:textColor="#FFFFFF"
    android:textSize="25sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.496"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.878" />

Drawable: round2.xml:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#B30C44"
        android:paddingLeft="6dp"
        android:paddingTop="6dp" />
    <corners
        android:bottomRightRadius="20dp"
        android:bottomLeftRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"/>
    <padding
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp" />
</shape>

What shows up: What the Button looks like


Solution

  • It happens because the default style of the MaterialButton (the Button is replaced with a MaterialButton automatically if your are using a MaterialComponents theme) tints the background with the colorPrimary.

    You have to use:

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