Elevation on AppBarLayout doesn't work

Question

When I try to set a specific value to elevation for AppBarLayout, the shadow disappears completely.

 <android.support.design.widget.AppBarLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:elevation="4dp">

     <!-- Toolbar -->
     <android.support.v7.widget.Toolbar...

     <!-- Other Layouts -->

</android.support.design.widget.AppBarLayout>

Is this a bug or the expected behaviour?

I'm using the version 26.0.0 of the design library.

Dedradedric

Answer 1

Setting Property Animation

Creating an animation with 1ms of execution time：/animator/appbar_elevation.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <objectAnimator
        android:duration="1"
        android:propertyName="elevation"
        android:valueTo="2dp"
        android:valueType="floatType" />
</item>
</selector>

Setting it to AppBarLayout

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"    
    android:stateListAnimator="@animator/appbar_elevation">
</android.support.design.widget.AppBarLayout>

And it can use in java code.

appBarLayout.setStateListAnimator(AnimatorInflater.loadStateListAnimator(getContext(), R.animator.appbar_elevation));

Severe

This works, thanks! But it seems to me a hacky way to solve it. Why Is need to add an animator? – Dedradedric

Because some way didn't work.I also used other ways. – Severe

@Dedradedric Could you tell me the hacky way to solve it? – Severe

I just feel like developing android apps becomes harder and harder each day because of these stupid bugs. – Concurrence

@mk_ ye. Demand more and more .And we must learn more and more . – Severe

@Severe thanks for your answer, I have referenced this to SO in Spanish: es.#329639 – Merilyn

It's better to use android:duration="0" to make the change occur instantly – Memorial

Answer 2

Work for me:

    ViewCompat.setElevation(appBarLayout, getResources().getDimension(R.dimen.toolbar_elevation));

Demicanton

Answer 3

The accepted answer gives me cancer, why should one solve a missing elevation by adding an animation? Maybe this is bringing the desired result and some will say "if it works it works", but even a semi professional developer can spot the lack of code quality.

For anyone stumbling about this issue please use a more professional solution!

Usually you have a wrapper layout for your AppBarLayout, there you need to add android:clipChildren="false". This will permit the shadow to be drawn outside the bounds of the AppBarLayout. In your included Toolbar you then simply set the desired elevation.

Minimal example:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:clipChildren="false">

    <com.google.android.material.appbar.AppBarLayout>

        <androidx.appcompat.widget.Toolbar
            android:elevation="8dp" />

    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Koval

Answer 4

In my case, adding a translationZ helped:

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:background="@color/yellow_note"
    android:translationZ="4dp"
    android:elevation="4dp">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        ...>

        <androidx.appcompat.widget.Toolbar
            .../>
    </com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

Broaden