I'm currently using this code but the background is not changing.It is still showing accent-color as background.
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
app:cornerRadius="32dp"
android:background="@drawable/gradiant_blue"/>
gradiant_blue.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="-45"
android:startColor="#2979FF"
android:endColor="#7C4DFF"/>
</shape>
I'm currently using
Material Components version : 1.0.0-rc02
Gradients are useful for showing users which buttons are active and inactive. A button in its natural state will look convex, so that it indicates the button is inactive or hasn't been pushed. When the user clicks on a button, it should look concave, so that it indicates the button active or has been pushed.
int colorId = buttonColor. getColor();
To use a custom drawable background with the MaterialButton
you can use the android:background
attribute:
<MaterialButton
app:backgroundTint="@null"
android:background="@drawable/bkg_button_gradient"
... />
NOTE: It requires at least the version 1.2.0-alpha06
Currently it is very important to add app:backgroundTint="@null"
to avoid that the custom background doesn't get tinted by default with the backgroundTint
color.
With lower versions of the Material Components Library you have to use an AppCompatButton
.
LE: From my point of view I suggest you use Button
or AppCompatButton
.
Try this:
gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#027FEE"
android:startColor="#2CC6F2" />
</shape>
button.xml
<!-- replace MaterialButton with Button or AppCompatButton -->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/gradient"
android:text="Hello" />
Result:
With corner radius
change gradient.xml to:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#027FEE"
android:startColor="#2CC6F2" />
<corners android:radius="32dp"/>
</shape>
Result:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With