Develop Reference

gradient color is not applying on button in android studio

I am trying to set gradient color in Button (in android studio whose version is Arctic Fox).
gradientbuttonmainactivity.xml
I made this file in Drawable.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#93501C"
android:endColor="#A67E7E"
android:type="linear"
android:angle="360"/>
<corners
android:radius="25dp"/>
</shape>
activity_main.xml
<Button
android:id="#+id/btnR"
android:layout_width="275dp"
android:layout_height="55dp"
android:layout_marginStart="55dp"
android:layout_marginTop="25dp"
android:background="#drawable/gradientbuttonmainactivity"
android:text="#string/register" />
but Button color is as it was, corners values applied but gradient values did'nt.
I searched it on google but didn't found any working solution.
In one stackoverflow answer, a writer said to change the colorPrimary (in theme.xml) with #null. I done this , and gradient color applied, but on Run, the app failed to open in the smartphone, however, it launched successfully.
So, the question is clear, How do I make the button with gradient color ? Thank You.

As an alternative, try using
androidx.appcompat.widget.AppCompatButton
instead of
Button
it might be a recent change with Button and Android's material design, I've noticed on older projects what you have implemented works with Button but on a more recent project, that background is not working

Android Background Drawable Not Working in Button Since Android Studio 4.1

I find out that since Android Studio 4.1 I cannot change the background color of a Button by setting color on its android:background, just no effect. And custom Drawable is not working as well.
My background Drawable:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1.5dp"
android:color="#android:color/black" />
<solid
android:color="#android:color/white" />
<corners
android:radius="8dp" />
</shape>
My Button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add To Cart"
android:background="#drawable/background3"/>
Result:

The Android Studio 4.1 new-project wizard, for many of its templates, has the project use the Material Components for Android library. And, it sets up the default theme to be based on Theme.MaterialComponents.DayNight.DarkActionBar.
A side effect of this is that any <Button> elements in a layout get turned into MaterialButton widgets, not regular Button widgets. MaterialButton ignores android:background.
If all you want to do is to change the color, use android:backgroundTint or change the colorPrimary attribute in the theme.
If you want a button that has a custom background, and your theme is set up to use Theme.MaterialComponents, you could switch the XML element in the layout to be <android.widget.Button> instead of <Button>. This should cause the Material Components for Android to ignore that element, and you can manipulate this button normally with respect to XML attributes.

UPDATE 03/2021
app:backgroundTint="#null" //just need this
android:background="#drawable/background_button"
Ok, since MaterialButton is the default Button starting from Android Studio 4.1, we can modify the shape by using app:shapeAppearanceOverlay attribute.
1. Create a Custom Style in themes.xml:
<style name="leaf">
<item name="cornerSizeTopLeft">70%</item> //can specify corner position
<!--<item name="cornerFamilyTopLeft">cut</item>-->
<item name="cornerSizeBottomRight">70%</item>
<!--<item name="cornerFamilyBottomRight">cut</item>-->
</style>
2. Apply Style in Material Button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Show"
app:shapeAppearanceOverlay="#style/leaf" /> //here
Result:
Helpful video:
https://www.youtube.com/watch?v=jihLJ0oVmGo

Add only this:
app:backgroundTint="#null"

I found easiest solution in this video.
https://www.youtube.com/watch?v=E_1H52FEqII
Just go to themes.xml under values folder in project window and change the MaterialComponents to AppCompact in both themes and button start working as normal as it was in past.
Existing: Theme.MaterialComponents.DayNight.DarkActionBar
After Modification: Theme.AppCompat.DayNight.DarkActionBar

It worked for me, hope it works for others as weell.
Just set null to backgroundTint.
android:backgroundTint="#null".

What is alternative of android:background in MaterialComponents?

Question: android:background is not giving effect in MaterialComponents.
In my project, I was using AppCompat
( <style name="DayTheme" parent="Theme.AppCompat.Light.NoActionBar">)
and everything was working fine.
but, because of some requirement in my project, now, I've to use MaterialComponents
( <style name="DayTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> )
And because of that some UI looks bad.
Problem: In AppComapt, I was using android:background="#drawable/bg_circle_btn" which was working fine, but in MaterialComponents, this background is not giving effect.
I tried to change color, shape n all but it's not giving effect.
<Button
android:id="#+id/custom_category_image"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/bg_circle_btn"
android:text="A"
android:textColor="#color/colorWhite"
android:textSize="12dp"
android:visibility="gone"
app:srcCompat="#drawable/ic_navigate_next_black_24dp" />
(I'm using button, because, instead of any fixed image, I'm setting the first letter of title in this button and this button is actually inside carview, so it'll be cirlce also.)
bg_circle_btn:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="?attr/toolbarcolor" />
<size
android:width="120dp"
android:height="120dp" />
</shape>
Please note that, in whole project, I need to use this background, so please do not give any other alternative ways.

You could use androidx.appcompat.widget.AppCompatButton instead of Button. This will solve your problem.
Besides this you can use android:backgroundTint to change the color only.
To change both (Shape&Color) for com.google.android.material.button.MaterialButton, you have to do this from you code:
setBackgroundResource(R.drawable.bg_circle_btn) setBackgroundTintList(ColorStateList.valueOf(Color.RED))

Since you are using the Material Components theme, <Button> is replaced by the <com.google.android.material.button.MaterialButton> at runtime. There is an auto-inflation (check this post).
To change the background color just use the app:backgroundTint attribute.
It works with a color, not a drawable.
Something like:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/...."
../>
If you want to apply a custom background to the MaterialButton:
you can use
android:background in MaterialButton but it requires at least the version 1.2.0-alpha06 (check this answer)
use an AppCompatButton as suggested by #Md. Asaduzzaman

You cannot use background attribute, when using MaterialComponents theme.
You can only change its color using backgroundTint attribute.
Possible way of achieving your task is to use View/Layout, then providing a shape background on it.
For example using CardView, you can do this as follow.
You cannot use background on CardView, but using some of the CardView useful attributes you can achieve your task:
<androidx.cardview.widget.CardView
android:layout_width="120dp"
android:layout_height="120dp"
app:cardBackgroundColor="#color/colorPrimary"
app:cardCornerRadius="65dp">
<Widget_You_Want />
</androidx.cardview.widget.CardView>

For a round circle you could use shape theming with Material Components. You would probably want to define a ShapeAppearance like
<style name="ShapeAppearance.Round" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
Then apply that to your button (or button style) with app:shapeAppearance="#style/ShapeAppearance.Round"

Can I use one Button and Multiple Styles Throughout my App?

I am relatively new to android styling techniques and I am trying to wrap my head around reusable components. My app has many buttons scattered throughout its' view hierarchy and they are all almost exactly the same (variable font color and button color). Is it possible to define one button drawable that can then have different styles applied to it such that, a button has one drawable definition that is applied as a background to a Button xml attribute like so <Button> android:background="#drawable/basic_btn"</Button> and then customize lets say the button color through styling, something like
<Button
style="#style/Button.Green"
android:background="#drawable/basic_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
then if I want a blue button using the same drawable I can set something like:
<Button
style="#style/Button.Blue"
android:background="#drawable/basic_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
is this possible? I currently do not get the result I want when trying this.
Edit with answer:
Looking back on my post, I don't believe I described my initial issue well enough and I appreciate everyone who has responded in between. My initial problem was attempting to apply different <styles> to a drawable to achieve different background colors, was not in fact changing the background color. My solution that I went with goes like this.
Define the drawable shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff"/>
<corners android:radius="3dp" />
Next, assign the drawable as a background
<Button style="#style/Button.basic
android:background="#drawable/btn_basic"
/>
Now for the heart of the trick:
<Button style="#style/Button.basic
android:background="#drawable/btn_basic"
android:backgroundTint="#color/seafoam"
/>
backgroundTint by default seems to add the color tint on top of the drawable. This allowed me to define one shape but apply any color to it when used in an xml file. backgroundTint

Use TextView Like This:-
<TextView
android:id="#+id/reviewsTitleTxt"
style="#style/txt_style_16sp_white_color_ffffff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:gravity="center"
android:text="#string/reviews_txt"
android:layout_gravity="center_vertical"/>
Where Style file is:-
Define style in style file
<style name="txt_style_16sp_white_color_ffffff">
<item name="android:textSize">#dimen/txt_size_16sp</item>
<item name="android:textColor">#color/white_color_ffffff</item>
</style>

Since we were commenting and you weren't able to solve this via the posted answer I'm going to try to help you out.
First, you should define all the common attributes on a #style/ .xml
Secondly, define a #drawable/ as your background for each button:
Background drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/button_round_radius"/>
<solid android:color="#color/background_color"/>
</shape>
The bad thing about this is you'll have to create a new drawable with somewhat the same properties just to change the color.
Also look into the already created themes/style that might help you on the reference of this answer.
Now on your button's XML declaration:
<Button
style="#style/YourCommonAttributesStyling"
android:background="#drawable/a_drawable_shape_like_the_above"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Reference: Android Material Design Button Styles

Styling a AppCompatButton in v21 to have no shadow and corner radius of zero

I have a AppCompatButton defined in a XML layout, and I have set a theme for it like this:
android:theme="#style/CustomAccentOverlay"
And I have set:
android:stateListAnimator="#null"
to remove the shadow. I have two problems with this.
The height of the button is deducted the height of the shadow, even though the shadow is not shown. Should I remove the shadow in some other way, or how do I fix this?
The button has rounded corners, and I want the corners to be sharp. I can not set a background on the button, because I want to keep the standard ripple effect and that goes away if I set a background (at least I don't know how to keep it if I set a background). I have tried setting
<item name="android:bottomLeftRadius">0dp</item>
and all the other corners to the CustomAccentOverlay theme and also its corresponding style, but it does not work. How can I set the corner radius to zero on my button?
Thank you
Søren

Use the following code for the Button.
<android.support.v7.widget.AppCompatButton
android:layout_width="200dp"
android:layout_height="200dp"
android:text="Button"
android:stateListAnimator="#null"
android:elevation="0dp"
android:background="#android:color/darker_gray"
android:foreground="?attr/selectableItemBackground"
/>
I will explain the attributes.
android:elevation="0dp" and android:stateListAnimator="#null". No shadow for the button.
android:background . Set the desired color as background. It removes the rounded corners.
android:foreground="?attr/selectableItemBackground" . It gives the ripple effect when the button is pressed.
Update 1:
It seems like android:foreground attribute for View works from API 23. For below APIs, create a drawable with ripple in drawable-v21 folder and set it as background to the button,
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="NewApi"
android:color="#color/ripple_color">
<item android:drawable="#color/normal_state_button_background_color"/>
</ripple>
For pre Lollipop versions, create a drawable with selector in drawable folder with the same name.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_color"
android:state_pressed="true" />
<item android:drawable="#drawable/focused_color"
android:state_focused="true" />
<item android:drawable="#drawable/normal_color" />
</selector>

First question:How to remove shadow of a button?
Here is the answer:
Just add this attribute to your button
android:stateListAnimator="#null"
Second question: How to make the corner of button sharp without losing the standard ripple effect.
Here is the answer: But first you have to make two drawble file with same name but one for below api 21 and one for api > 21 because the ripple is only available only api > 21.So now I am showing how to create that.Read the following text carefully
Right click on the drawble folder and choose new and "Drawble resource file" and hit next then name the drawble whatever you like and press ok.Then again right click on the drawble folder and choose new and "Drawble resource file" and hit next and name the drawble exactly what you named the previous drawble folder but this time at the bottom you can see a section called "available qualifiers".Go to this section and at the very bottom you can see "Version",click it and then you can see a arrow icon at the right,click it then in the "Platform api level" add 21 and then press ok.And now if you expand drawble folder you can see two file of your created drawble file.Once for api that is below 21 and once for upper 21.Open drawble file that you have created and make sure you open that have "(v21)" at the last.Now delete everything from there and add the following code
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="?attr/colorControlHighlight" xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="0dp"/>
<solid android:color="#D6D7D7"/>
</shape>
</item>
</ripple>
And add this attribute to your button
android:background="#drawable/youdrawblefilethatyouhavecreated"
And now if you run your application you can see that there is no shadow and your button has sharp corner and if you click the ripple shows up.
Lastly,your button look something like this
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button 1"
android:background="#drawable/yourcreatddrawblefile"
android:stateListAnimator="#null"/>
Hope this help!

It really sounds like you want to use a clickable TextView rather than a Button. TextView by default will not have shadow and has sharp corners and you can attach a click listener to it. Remember, Button is just a fancy TextView with a lot of visual add-ons to it, and it sounds like you want to remove a lot of it.
If you want to keep the ripple on the TextView and define your own background, set android:foreground="?attr/selectableItemBackground"
EDIT: Even though the other answer was marked accepted, I would still argue that the OP should use a TextView with a click listener and applying the ripple effects to that than using a Button. Clickable TextViews in this manner are exactly how the Google I/O app implements all of their flat buttons that meet Material Design spec.

Use this code
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorAccent"
android:text="#string/button" />