Elevation Button is not showing Shadow

Question

Hello, I’m trying to use Elevation on the buttons of the following screen:

But it’s not working, Elevation’s not casting a shadow.

Follows the XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="kiraitami.krtbeta03.MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toobar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="23dp"
    android:background="#13000000"
    android:elevation="3dp"
    android:minHeight="?attr/actionBarSize"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/bg_mountain"
    android:layout_width="462dp"
    android:layout_height="777dp"
    android:scaleType="centerCrop"
    android:src="@drawable/mountain"
    app:layout_constraintBottom_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/bg_diagonal"
    android:layout_width="match_parent"
    android:layout_height="485dp"
    android:scaleType="centerCrop"
    android:src="@drawable/diagonal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="parent"
    app:layout_constraintHorizontal_bias="0.231"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/bg_mountain"
    app:layout_constraintVertical_bias="0.818" />

<Button
    android:id="@+id/btn_damage"
    android:layout_width="311dp"
    android:layout_height="38dp"
    android:elevation="20dp"
    android:clipToPadding="false"
    android:layout_marginBottom="212dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:background="@drawable/damagebtn"
    android:onClick="startDamageActivity"
    android:text="BOTAO 1"
    android:textAppearance="@style/TextAppearance.AppCompat"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.14"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btn_audio"
    android:layout_width="311dp"
    android:layout_height="38dp"
    android:layout_marginBottom="80dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:background="@drawable/audiobtn"
    android:elevation="10dp"
    android:text="BOTAO 3"
    android:textAppearance="@style/TextAppearance.AppCompat"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.14"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/btn_notes2"
    android:layout_width="311dp"
    android:layout_height="38dp"
    android:layout_marginBottom="144dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:background="@drawable/notesbtn"
    android:elevation="8dp"
    android:text="BOTAO 2"
    android:textAppearance="@style/TextAppearance.AppCompat"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.14"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/button4"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:background="@android:drawable/ic_lock_power_off"
    android:elevation="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

PS.: The only place Elevation is working is in Toolbar

What should I do to fix it?

Answer 1

When assigning a background to the button this will lose some of its features.
Among them are elevation and animation when clicked.

On the other hand, even without assigning a background it is not possible to change the elevation just by assigning a value through android:elevation.

The elevation in the different states of a button(Enabled, Disabled, Focused, Pressed) is controlled by a Statelistanimator.

Thus, to change the elevation you will need to build your own Statelistanimator or assign null to android:stateListAnimator.

android:stateListAnimator="@null"
android:elevation="20dp"

In your case I suggest that instead of assigning the image to backgroud use android:drawableLeft.

Anything like that:

<Button
    android:id="@+id/btn_notes2"
    android:layout_width="311dp"
    android:layout_height="wrap_content"
    android:textAppearance="@style/TextAppearance.AppCompat"
    android:backgroundTint="#ffffff"
    android:drawableLeft="@drawable/notesbtn"
    android:text="BOTAO 2"/>

Note: The effect of Elevation is not visible on Android devices with API below 21.