remove shadow below AppBarLayout widget android

Question

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

score 285 · Accepted Answer · edited Mar 22 '19 at 19:35

285

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

edited Mar 22 '19 at 19:35

kalandar

793
6
13

answered Sep 01 '15 at 07:00

danialzahid94

4,103
2
19
31

100

Don't use android:elevation. Use app:elevation. – radley Mar 22 '16 at 23:15
4

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
2

app:elevation="0dp", shade is removed, but now tabs are not clickable . – Sandeep P Jul 20 '16 at 17:41
10

Setting it to 0dp is hiding the Toolbar. – Shajeel Afzal Feb 07 '17 at 11:54
2

Unfortunately no longer a working answer. See Liu Teng answer below with `setOutlineProvider` – Matthew Feb 17 '17 at 17:15
use AppBarLayout.setTargetElevation() to set programatically. – chakrapani Mar 31 '17 at 18:38
This has a side-effect of making the buttons unclickable for me – Bitcoin Cash - ADA enthusiast Oct 31 '19 at 03:03

Liu Teng · Answer 2 · 2022-03-07T07:17:10.533

this problem only occurs when api version >= 21, try below codes:

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.

API is available only from version 21. – chakrapani Mar 31 '17 at 18:39 — chakrapani, Mar 31 '17 at 18:39
this problems only occurs when api >= 21 – Liu Teng Jul 09 '19 at 09:15 — Liu Teng, Jul 09 '19 at 09:15

score 13 · Answer 3 · answered Jun 09 '18 at 14:10

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>

score 8 · Answer 4 · answered Jun 12 '17 at 18:35

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.

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

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

score 8 · Answer 5 · answered Jan 22 '19 at 08:27

8

Use android:stateListAnimator="@null". No side effect.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:stateListAnimator="@null"
    >

answered Jan 22 '19 at 08:27

Softlion

12,281
11
58
88

1

Thanks! It works. Neither app:elevation="0dp", android:elevation="0dp" nor android:outlineProvider="none" worked for me. – blinker Jun 25 '21 at 10:21

score 2 · Answer 6 · answered Jul 07 '16 at 13:37

2

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

Hope this helps somebody else.

answered Jul 07 '16 at 13:37

Gueorgui Obregon

5,077
3
33
57

1

0.1dp is also not working, It is also hiding the Toolbar Menu. – Shajeel Afzal Feb 07 '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 07 '17 at 14:55
I am using `v25.0.0`. – Shajeel Afzal Feb 07 '17 at 14:57
2

It seems not working anymore with updated versions :(. – Gueorgui Obregon Feb 07 '17 at 15:01

score 2 · Answer 7 · answered Jul 14 '17 at 08:50

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>

score 1 · Answer 8 · answered Nov 24 '17 at 09:23

1

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

answered Nov 24 '17 at 09:23

Iam ByeBlogs

715
1
6
15

score 0 · Answer 9 · answered Jun 05 '17 at 09:29

0

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

answered Jun 05 '17 at 09:29

Shivaram Mahapatro

127
11

score 0 · Answer 10 · answered Feb 09 '21 at 17:44

I am doing this on Kotlin minSdkVersion 21 with AppBarLayout & TabLayout so: app:elevation="0dp" does indeed help me solve the shadow problem BUT using this solution make it so that I will not be able to press the button on the TabLayout.

so combine app:elevation="0.1dp" & app:elevation="0dp"i can fix the shadow and still be able to interact with my tab layout.

remove shadow below AppBarLayout widget android

10 Answers10

Linked