Android button elevation shadow not working

Question

I am trying to make a button that has a shadow using elevation with a background image being my sign in with gmail png. The button is contained within a relative layout. The elevation won't show no matter what I try to do. I tried solutions from other forum questions and none worked.

Here is my code for the button

<Button
    android:id="@+id/google"
    android:layout_width="270dp"
    android:layout_height="38dp"
    android:layout_marginTop="30dp"
    android:layout_centerHorizontal="true"
    android:background="@drawable/google"
    android:elevation="10dp"
    android:layout_below="@id/slogan"/>

The google drawable is a png image that I exported from Adobe XD. Could someone please give me a pointer on what I am doing wrong? Thanks.

Additionally, I realize that if I set the background of the button to android:color/white the shadow appears. So I think the issue is with the png drawable? Does elevation not work with png images? Is there a workaround?

Euhemerize

#27080838 – Knapsack

you can set android:stateListAnimator="@null" for button – Links

elevation is only used in API level 21 and higher – Chekhov

@IntelliJAmiya As I said, I already looked through the forums. Setting stateListAnimator to null for the button and clipToPadding to false for the layout still doesn't make the shadow appear. Am I doing something wrong? – Euhemerize

I ran my emulator at API level 25. I also set the minimum API level in gradle to 21. – Euhemerize

add in cardview and give a elevation to cardview. – Reamy

@Jeffrey Chou Background covers elevation view as well. That's why. – Chapiter

@kevanaghera I tried your workaround and it works. Thanks. But, I am wondering if that is the only workaround or the easiest. It is a hassle to put each button in a card view. – Euhemerize

@NitinPatel So besides putting each button in a cardview, how would I work around that? – Euhemerize

Try this link if it works:- https://mcmap.net/q/1770349/-imagebutton-elevation-issue – Chapiter

use android:outlineProvider="bounds" – Wallaby

Damn it, I assumed in Android Studio in 2021 I won't have such issues :(( – Salts

Answer 1

Use below the line of code to show an elevation in button

android:outlineProvider="bounds" – K. Sopheak

That works, thanks!

Euhemerize

For me this one resulted in strange background behaviour but android:outlineProvider="paddedBounds" was the key. – Ilbert

for me it works only with: elevation, translationZ, outlineProvider=bounds, stateListAnimator=@null – Kingdom

Answer 2

For Material Button, I tried the following and it worked

android:translationZ="5dp"

Polythene

Answer 3

try this I hope it helps, because another view or layout just after your button is hiding shadow

android:layout_marginBottom="16dp"

Regelate

When I set the background to android:color/white, the shadow appears, so I don't think it is because of another view hiding it – Euhemerize

Answer 4

Since you're using an image, replace the <Button> tag with that of an <ImageButton>. So, your workaround code would be:

<ImageButton
        android:id="@+id/google"
        android:layout_width="270dp"
        android:layout_height="38dp"
        android:layout_marginTop="30dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/google"
        android:elevation="10dp"
        android:layout_below="@id/slogan"/>

Take note that the android:src attribute is being used here rather than the android:background attribute.

This one worked for me!

Chitter

Answer 5

try this , I hope this help you ||

android:layout_margin="5dp"

Heterogamete