2

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>
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841

2 Answers2

2

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?

Mariusz Brona
  • 1,549
  • 10
  • 12
  • Thank you for the help! – Prowtons McBishop Sep 29 '20 at 16:53
  • It is not totally correct. Now MaterialButton supports the android:background attribute. – Gabriele Mariotti Sep 30 '20 at 08:46
  • So either the documentation is not up to date or I missed something :/ I know there is public method `setBackgroundDrawable`, but I thought if background drawable doesn't work from attribute then it's still not supported – Mariusz Brona Sep 30 '20 at 08:58
  • @GabrieleMariotti I added the link to your answer – Mariusz Brona Sep 30 '20 at 09:08
  • @MariuszBrona The official doc wasn't changed after the commit to support the `android:background` attribute for `MaterialButton`. Now you can use it but the drawable removes the default `MaterialShapeDrawable` background and the `shapeAppearance` is not applied and it means that the `MaterialButton` cannot guarantee well-defined behavior as described in the doc. – Gabriele Mariotti Sep 30 '20 at 09:23
  • 1
    Thank you for your the detailed answer, I wasn't aware of those changes, hard to keep up with the latest changes these days ;) – Mariusz Brona Sep 30 '20 at 09:51
2

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"
   ....
                 />
Eren Tüfekçi
  • 2,463
  • 3
  • 16
  • 35