Why is my android button not showing the correct background?

966 views Asked by At

I am trying to style a fragment for my android app and when I apply the android:background xml attribute, it is ignored. Here is what I get as opposed to my correctly styled edit texts.

Button with incorrect background:

enter image description here

EditText with correct background:

enter image description here

Here is the XML for my button:

<com.google.android.material.button.MaterialButton
            android:id="@+id/register_fragment_submit_button"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:text="@string/register_register_button"
            android:layout_marginTop="@dimen/register_fragment_submit_button_margin_top"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:background="@drawable/register_button_bg"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/register_email_edittext" />

And here is the code for my correctly styled EditText:

<EditText
            android:id="@+id/register_email_edittext"
            style="@style/register_fragment_edittext"
            android:layout_marginTop="@dimen/register_fragment_email_edittext_margin_top"
            android:autofillHints="@string/register_screen_email_autofill"
            android:hint="@string/register_email_edittext_hint"
            android:inputType="textEmailAddress"
            android:text="@={viewmodel.newUserEmail$app_debug}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/register_password_edittext" />

Here is the style for it:

<style name="register_fragment_edittext">
        <item name="android:paddingLeft">@dimen/register_fragment_edittext_padding_left</item>
        <item name="android:background">@drawable/edittext_background</item>
        <item name="android:layout_width">@dimen/register_fragment_edittext_width</item>
        <item name="android:layout_height">@dimen/edit_text_height</item>
        <item name="android:textColorHint">@color/colorAccent</item>
</style>

I will leave the drawable XML code at the bottom if anyone is curious. If it matters, I put this into my app level build.gradle file for material design: implementation 'com.google.android.material:material:1.2.0' Does anyone have any suggestions? Thank you.

EditText drawable:

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="@dimen/custom_edittext_bg_drawable_corners"/>
    <solid android:color="@color/colorPrimary"/>
    <stroke android:color="@color/colorSecondary" android:width="@dimen/custom_edittext_bg_border_width"/>

</shape>

Button drawable:

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="@dimen/custom_edittext_bg_drawable_corners"/>
    <solid android:color="@color/colorSecondary"/>
    <stroke android:color="@color/colorAccent" android:width="@dimen/custom_edittext_bg_border_width"/>

</shape>
2

There are 2 answers

1
Eren Tüfekçi On BEST ANSWER

As it is stated in the @Mariusz answer all attributes from Material Button is not supported.

On the other hand, with recent versions of material design you can set a custom background for your Material Button

Material Library :

implementation 'com.google.android.material:material:1.2.1'

You must set background tint attribute "null", put this in your style folder

<style name="my_button" parent="Widget.MaterialComponents.Button">
    <item name="android:background">@drawable/register_button_bg</item>
    <item name="textAllCaps">false</item>
    <item name="backgroundTint">@null</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
</style>

Set your button style to "my_button"

    <com.google.android.material.button.MaterialButton
                android:id="@+id/register_fragment_submit_button"
                style="@style/my_button"
   ....
                 />
6
Mariusz Brona On

As it's stated in Material Button Documentation

All attributes from MaterialButton are supported. 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.

So what I would do, is I would just change the MaterialButton to Button or AppCompatButton

EDIT

It seems if you have proper version of the metarial components (1.2.0-alpha06 or up), you can use the android:background attribute as it's written here:

How to set a gradient background in a Material Button from Material Components?