Android Studio Question posted in
The official documentation can be found here.

Given button color not showing but showing a color in colors file in android studio

I am currently working on a project in android studio. In that app there are buttons in all activities. In the MainActivity (It is main menu of app) there are 3 buttons. I created a drawable file named rounded. It is used for the background of buttons. The following codes are in the rounded file. This will turn the buttons to round buttons.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#9AFD36"
        android:centerColor="#8CE63E"
        android:endColor="@color/teal_700"
        android:angle="180"
        android:type="linear"/>
    <corners android:radius="10000dp"/>
</shape>

I added this background to buttons like this,

<Button
    android:id="@+id/areabtn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Surface Area"
    android:layout_centerInParent="true"
    android:background="@drawable/rounded"
    android:textColor="@color/black"/>

In the 7th line I set background to that file and the buttons will show up that gradient there but when I run it, It turns to the Primary Color in the colors file. The following colors are in the colors file,(The primary color is purple_500)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#11CC6B</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

This is in the code in themes file in the values folder.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MathematiciansCalculator" 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>
</resources>

Also I have another gradient set to the back button in other activities but also they don’t show the background given.
Android Studio Version :- Android Studio Bumblebee | 2021.1.1 Canary 11

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer for my question with the help of @KGeeks. As she told it needs app:backgroundTint="@null" line.


  2. 0

    Use MaterialButton for round corners

     <com.google.android.material.button.MaterialButton
        android:id="@+id/button_share"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:backgroundTint="@color/colorCard"
        android:fontFamily="@font/medium"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:text="Share"
        android:textAllCaps="true"
        android:textColor="@color/colorText"
        android:textSize="18sp"
        app:cornerRadius="28dp" />
    Login or Signup to reply.
  3. 0

    As you shared your app theme parent is Theme.MaterialComponents.DayNight.DarkActionBar

    so Your button behave like, MaterialButton so please set backgroundTint as "null"

    Login or Signup to reply.
  4. 0

    Hello @RedDragon the point of the existing answers are good but not complete or solving your question properly in my opinion:

    app:backgroundTint="@null" will disable the existing background color of the MaterialButton or change it if you put a value instead of null.

    Hint: you can also use app:background="@empty"

    But the important point to mention is that MaterialButton doesn’t support gradients, only single colors.
    A short field trip to why Tint instead of android:background from the documentation:

    Do not use the android:background attribute. MaterialButton
    manages its own background drawable, and setting a new background
    means MaterialButton can no longer guarantee that the new attributes
    it introduces will function properly. If the default background is
    changed, MaterialButton cannot guarantee well-defined behavior.

    As you can see that is very different from the standard widgets in Android, MaterialDesign is a library.

    Now to the solutions of using gradients with a Button is following:

    Make use of androidx.appcompat.widget.AppCompatButton if you are using Material Theme to be able to apply background gradients, because MaterialButton doesn’t offer support to it yet as said before. There you can set your drawable as android:background attribute or with @style.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search