Elevation on AppBarLayout doesn't work

user_1852520 0
Viewed 5670

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.

android-elevation android-design-library android-toolbar android
4 Answers

Work for me:

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

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>
user_124435200

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>
user_25511860
Related