When using AppBarLayout widget in design support library, a shadow appears on the bottom of the toolbar. How can I remove that shadow?

up vote 153 down vote accepted

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

  • 4
    thanks :) workded for me.. – Abdul Rehman Sep 1 '15 at 7:05
  • 2
    i used android:elevation <-- this not working. – Ninja Coding Feb 16 '16 at 16:02
  • 23
    Don't use android:elevation. Use app:elevation. – radley Mar 22 '16 at 23:15
  • 3
    Is there a way to do it programmatically without getting the warning that setting elevation is only available after L? – davidcv5 Mar 29 '16 at 16:24
  • 4
    Setting it to 0dp is hiding the Toolbar. – Shajeel Afzal Feb 7 '17 at 11:54

this problem 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 :

Blow 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.

  • Thanks for this. – tim Feb 9 '17 at 13:58
  • API is available only from version 21. – chakrapani Mar 31 '17 at 18:39
  • this one worked for me. Thanks! – Hilfritz Apr 5 '17 at 3:40
  • It did the trick, thanks. – Alex Berdnikov Jun 14 '17 at 12:05

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

  • Second solutions works for me and seems easy – Md Shihab Uddin Nov 25 '17 at 10:50

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>

I tried app:elevation="0dp" but the toolbar desappear, but using app:elevation="0.1dp" made the trick.

Hope this helps somebody else.

  • 0.1dp is also not working, It is also hiding the Toolbar Menu. – Shajeel Afzal Feb 7 '17 at 11:55
  • I've a working app with appcompat v23.0.1 using this tips, what version do you have? – Gueorgui Obregon Feb 7 '17 at 14:55
  • I am using v25.0.0. – Shajeel Afzal Feb 7 '17 at 14:57
  • 2
    It seems not working anymore with updated versions :(. – Gueorgui Obregon Feb 7 '17 at 15:01

Add app:elevation="0dp" on your AppBarLayout. like this example

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

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

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

This is the way that I came up with app:elevation="0dp" to remove the shadow.Perfectly works.

Programmatically you can use this : getSupportActionBar().setElevation(0.0f);

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.