remove shadow below AppBarLayout widget android

Solution 1:

Simply use app:elevation="0dp" inside "AppBarLayout" to remove the shadow. It has always worked for me. Hope it works for you.

Solution 2:

this problem only occurs when api version >= 21, if you do not want to change the elevation, you can use:

appBar.setOutlineProvider(null);

remember to check api version

EDIT :

Below is the source code of setOutlineProvider.

   /**
     * Sets the {@link ViewOutlineProvider} of the view, which generates the Outline that defines
     * the shape of the shadow it casts, and enables outline clipping.
     * <p>
     * The default ViewOutlineProvider, {@link ViewOutlineProvider#BACKGROUND}, queries the Outline
     * from the View's background drawable, via {@link Drawable#getOutline(Outline)}. Changing the
     * outline provider with this method allows this behavior to be overridden.
     * <p>
     * If the ViewOutlineProvider is null, if querying it for an outline returns false,
     * or if the produced Outline is {@link Outline#isEmpty()}, shadows will not be cast.
     * <p>
     * Only outlines that return true from {@link Outline#canClip()} may be used for clipping.
     *
     * @see #setClipToOutline(boolean)
     * @see #getClipToOutline()
     * @see #getOutlineProvider()
     */
    public void setOutlineProvider(ViewOutlineProvider provider) {
        mOutlineProvider = provider;
        invalidateOutline();
    }

It is said that If the ViewOutlineProvider is null, if querying it for an outline returns false, or if the produced Outline is {@link Outline#isEmpty()}, shadows will not be cast.

So, if you want to remove shadow, you'd better use this method instead of setting app:elevation. It seems like that changing the elevation to remove shadow is a kind of side effect. And changing the elevation may cause some other problems in some cases.

Solution 3:

For all those who do not want to use bringToFront() and elevation="0dp" makes the toolbar disappear:

app:elevation="0dp" combinded with android:translationZ="0.1dp" worked for me.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="0dp"
    android:translationZ="0.1dp"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@null"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

Solution 4:

With latest appcompat versions, the trick setting app:elevation="0.1dp" in xml doesn't work any more.

So far I have found two solutions.

1. Instead of setting app:elevation, try to use a stateListAnimator. For example, in code:

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
       StateListAnimator stateListAnimator = new StateListAnimator();
       stateListAnimator.addState(new int[0], ObjectAnimator.ofFloat(appBarLayout, "elevation", 0.1f));
       appBarLayout.setStateListAnimator(stateListAnimator);
   }
   

2. An easier way is you still set app:elevation="0dp" in xml as normal, but in code:

   appBarLayout.bringToFront();
   

Credit goes to these two discussions:

ToolBar disappears when setting elevation for AppBarLayout

when set app:elevation="0dp" then hamburgermenu not showing to toolbar