Search code examples
androidmaterial-designandroid-toolbarandroid-theme

Elevation on Material Toolbar doesn't produce a shadow


Just as the title says, i've tried multiple combinations of android:elevation and app:elevation, i have no idea what is it, probably i missed something obvious.

xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.jabotmobile.MainActivity"
    android:background="@color/white">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/dark"
        app:elevation="8dp">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="?attr/colorPrimary"/>

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

    <FrameLayout
        android:id="@+id/fragmentContainer1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/red_light"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:elevation="0dp"/>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Solution

  • You have to add android:clipChildren="false" to the parent view.

    <androidx.coordinatorlayout.widget.CoordinatorLayout 
        android:clipChildren="false">
    
        <com.google.android.material.appbar.AppBarLayout>
    
            <androidx.appcompat.widget.Toolbar
               app:elevation="8dp"
            />
    
        </com.google.android.material.appbar.AppBarLayout>
    

    Also by default an alpha channel is applied to the shadow for api28+. You can change this value adding in your app theme the android:spotShadowAlpha attribute (only for api28+):

    <!--Alpha value of the spot shadow projected by elevated views, between 0 and 1.-->
    <item name="android:spotShadowAlpha">0.x</item>
    

    enter image description here