Material Design Button without Shadow

Question

I recently started android development and I am struggling a bit. I read different articles and tutorials on creating drawables etc.

---

Current Situation

I have created the following buttons:

Using the following code:

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/login_btn_facebook"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:drawableStart="@drawable/ic_btn_login_facebook"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="Continue with Facebook"
        android:textColor="#fff"
        app:backgroundTint="#3b5998"/>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/login_btn_google"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:drawableStart="@drawable/ic_btn_login_google"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="Continue with Google"
        app:backgroundTint="#ffffff" />

---

Now I actually just need a minor change:
I do not want to have the elevation. I want the buttons to be "flat", and only show the shadow effect when clicked.

Is there a simple way to do this?

Thank you already!

---

UPDATE:
I need to target API Level 19 as a minimum SDK version.

Cockleshell

this seems to achieve what you want – Arlinda

Is your query resolved? – Harlow

Answer 1

You have two alternatives to do that:

1. By adding an XML attribute to your XML Button:

Try this: android:stateListAnimator="@null"

2. By adding another XML attribute, if the previous alternative has not worked:

Add this style="?android:attr/borderlessButtonStyle" to your XML Button according this.

Let me know if it doesn't work!

Torus

Thank you for the quick response. I forgot to mention that I need to target SDK Level 19 as a minimum SDK version. I updated my question accordingly. Unfortunately the "stateListAnimator" attribute is not available there. If I use the borderless style, the background disappears completely. – Cockleshell

@Cockleshell I have edited my post with an image I took after I set minSdkversion to 19, it still works. – Fossette

Thank you for your help. I used the stateListAnimator attribute. This works. – Cockleshell

anyone experiencing a weird bug with this? Setting stateListAnimator to null makes the button invisible – Southeastwardly

Answer 2

Add the following attributes in your layout XML to remove shadows:

android:elevation="0dp"
android:translationZ="0dp"

This will make your layout look like:

<android.support.v7.widget.AppCompatButton
    android:id="@+id/login_btn_facebook"
    android:layout_width="fill_parent"
    android:layout_height="60dp"
    android:drawableStart="@drawable/ic_btn_login_facebook"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:elevation="0dp"
    android:translationZ="0dp"
    android:text="Continue with Facebook"
    android:textColor="#fff"
    app:backgroundTint="#3b5998"/>

<android.support.v7.widget.AppCompatButton
    android:id="@+id/login_btn_google"
    android:layout_width="fill_parent"
    android:layout_height="60dp"
    android:drawableStart="@drawable/ic_btn_login_google"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:elevation="0dp"
    android:translationZ="0dp"
    android:text="Continue with Google"
    app:backgroundTint="#ffffff" />

Read here for more information.

Harlow

Thank you for the quick response. I forgot to mention that I need to target SDK Level 19 as a minimum SDK version. I updated my question accordingly. Unfortunately the attributes to write about are not available there.. – Cockleshell

It will work if you keep your targetSdkVersion 21 or above. – Harlow

You are getting the shadow on a KitKat phone? – Harlow

Hello again, unfortunately your suggestion does not work, the shadows are still there. Tested on API Level 23. as far as I have seen the AppCompatButton does not propagate the elevation & translationZ attribute. – Cockleshell