Background Drawable is not getting applied to the Button

Question

This is the background for a login button (login_button_bk):

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">
    <corners android:radius="27dp" />
    <gradient
        android:angle="45"
        android:centerX="35%"
        android:endColor="#79EBFD"
        android:startColor="#408bff"
        android:type="linear" />
    <size
        android:width="182dp"
        android:height="54dp" />
</shape>

This is the button Im applying the background to :

 <Button
        android:id="@+id/btn_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="@dimen/loginViewsMargin"
        android:background="@drawable/login_button_bk"
        android:text="Login" />

This is the styles.xml :

 <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Still, the button is just Black without the drawable applied. How to fix it ?

You are using a `MaterialComponents` based theme, so the `android:background` attribute won't work and gradients are not supported by default. Check this answer for more info https://stackoverflow.com/a/53271081/13211263 — lpizzinidev, Jan 27 '21 at 17:38
Write the `app:backgroundTint="@null"`. And it works. Nothing to change at all. — Simran Sharma, Jan 27 '21 at 19:30

score 0 · Answer 1 · answered Jan 27 '21 at 17:28

To get the drawable gradient in your button you must change the attribute from Buton to androidx.appcompat.widget.AppCompatButton

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/btn_login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="@dimen/loginViewsMargin"
    android:background="@drawable/login_button_bk"
    android:text="Login" />

Also using the above method for creating a drawable won't have ripple effect in your button to add that use this code

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/white">

<item>

    <shape
        android:shape="rectangle">
        <corners android:radius="27dp" />
        <gradient
            android:angle="45"
            android:centerX="35%"
            android:endColor="#79EBFD"
            android:startColor="#408bff"
            android:type="linear" />
        <size
            android:width="182dp"
            android:height="54dp" />
    </shape>

</item>

</ripple>

score 0 · Answer 2 · answered Jan 27 '21 at 17:55

0

Just Change your theme as below

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

answered Jan 27 '21 at 17:55

Androider

3,833
2
14
24

What if someone wants to use the Material Theme and yet wants to have a background drawable with a gradient? – rahat Jan 27 '21 at 18:11
Make the `app:backgroundTint="@null"`. And it works. – Simran Sharma Jan 27 '21 at 19:31

Background Drawable is not getting applied to the Button

2 Answers2