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.

score 14 · Accepted Answer · answered Aug 16 '17 at 01:15

14

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));

answered Aug 16 '17 at 01:15

KeLiuyue

8,149
4
25
42

1

This works, thanks! But it seems to me a hacky way to solve it. Why Is need to add an animator? – marc97 Aug 16 '17 at 11:36
Because some way didn't work.I also used other ways. – KeLiuyue Aug 16 '17 at 12:00
@marc97 Could you tell me the hacky way to solve it? – KeLiuyue Aug 16 '17 at 12:03
4

I just feel like developing android apps becomes harder and harder each day because of these stupid bugs. – b4da Jun 15 '18 at 21:06
@mk_ ye. Demand more and more .And we must learn more and more . – KeLiuyue Aug 07 '18 at 14:31
@KeLiuyue thanks for your answer, I have referenced this to SO in Spanish: https://es.stackoverflow.com/questions/329139/android-studio-por-qu%c3%a9-la-propiedad-elevation-no-funciona/329163#329163 – Jorgesys Feb 13 '20 at 15:55
It's better to use ```android:duration="0"``` to make the change occur instantly – flamyoad Sep 24 '20 at 14:45

score 3 · Answer 2 · answered Aug 08 '18 at 09:40

3

Work for me:

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

answered Aug 08 '18 at 09:40

UgAr0FF

805
8
18

score 2 · Answer 3 · answered Dec 08 '21 at 16:55

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>

score 0 · Answer 4 · answered Nov 23 '21 at 09:39

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>

Elevation on AppBarLayout doesn't work

4 Answers4

Linked