Android: I cannot remove elevation / shadow on my toolbar

Question

Hi i would like to remove the elevation and shadow effect from my toolbar for API 21 and greater. Below is what i have tried

setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        getSupportActionBar().setElevation(0);

My Toolbar in XML. I have tried to set elevation to 0dp

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:elevation="0dp"
    android:theme="@style/ToolbarStyle"
    app:theme="@style/ToolbarStyle"
    >

And this is ToolbarStyle if it helps

<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.Dark">
    <item name="colorControlNormal">@android:color/white</item>
</style>

Edit 1: Tried the following in styles v21. Still same result

<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.Dark">
    <item name="colorControlNormal">@android:color/white</item>
    <item name="android:elevation">0dp</item>
</style>

Edit 2: Where the toolbar is in my layout

android.support.v4.widget.DrawerLayout 

    xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <include layout="@layout/toolbar" />

score 124 · Accepted Answer · answered Dec 18 '15 at 03:32

124

You can do that with an easy step. Don't remove the android.support.design.widget.AppBarLayout from your layout, instead add the attribute app:elevation="0dp" to it. Your final layout will be:

<android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp">
            ...
</android.support.design.widget.AppBarLayout>

answered Dec 18 '15 at 03:32

Filipe Bezerra de Sousa

2,874
1
17
17

9

When I do this the toolbar disappears completely. – Binoy Babu Aug 16 '16 at 07:39
Please, let me know your layout hierarchy. This way I can assist you. – Filipe Bezerra de Sousa Aug 27 '16 at 01:26
Fixed it. Thanks. – Binoy Babu Aug 27 '16 at 04:52
17

Don't know how you fixed it, but one way to fix it is with `findViewById(R.id.appBarLayout).bringToFront();`. – Bjørn Stenfeldt Dec 21 '16 at 21:13
11

interestingly `android:elevation="0dp"` did not do the trick (on SDK 21+ Device) – Patrick Jan 06 '17 at 19:51
14

android:elevation doesn't work. For a best result use android:stateListAnimator="@null" – chry Sep 01 '17 at 00:09
dont forget to add also findViewById(R.id.appBar).bringToFront(); https://stackoverflow.com/a/41931318/2736039 – Ultimo_m Oct 01 '17 at 19:59
just leave it, this is hacky, a change to the implementation of `bringToFront()` could easily undo this – hmac Jun 11 '20 at 09:43
For MaterialToolBar ```android:elevation="0dp"``` works instead of ```app:elevation``` – devanshu_kaushik Apr 29 '21 at 08:52
app:elevation="0dp" instead of android:elevation="0dp" worked for me. – ikmazameti Feb 21 '23 at 17:23

chry · Answer 2 · 2017-08-26T16:20:19.047

This remove elevation on toolbar (android:stateListAnimator="@null"), stateListAnimator is for API level 21 or higher, so insert a tools prop (before namespace declaration) like this:

//xmlns:tools="http://schemas.android.com/tools" in parent or start element

     <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stateListAnimator="@null" 
        android:theme="@style/AppTheme.AppBarOverlay"
        tools:targetApi="21">

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

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

//your content goes here like RecyclerView, Card or other layout

Here is my sample result:

I liked this layout. – Henrique César Madeira Jan 04 '18 at 15:01 — Henrique César Madeira, Jan 04 '18 at 15:01

score 9 · Answer 3 · answered Mar 14 '17 at 04:21

9

Use setOutlineProvider(null); on your appBar. Just be sure to check the SDK version. :)

answered Mar 14 '17 at 04:21

ReGaSLZR

383
4
17

Utkarsh Tiwari · Answer 4 · 2017-11-11T19:43:24.620

Use app:elevation="0dp" in your AppBarLayout. Make sure you put Toolbar inside your AppBarLayout like this -

    <android.support.design.widget.AppBarLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:fitsSystemWindows="true"
        app:elevation="0dp"> 

        <android.support.v7.widget.Toolbar
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/firstOption"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

and add this line to your activity - findViewById(R.id.appBarLayout).bringToFront();
This will bring the AppBar to front.

score 5 · Answer 5 · answered Sep 28 '15 at 08:05

5

Just remove this part of you layout hierarchy:

<android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

It's responsible for creating shadow. Toolbar itself doesn't cast any shadow.

answered Sep 28 '15 at 08:05

Michal

6,453
2
24
23

3

If you add elevation=0dp to AppBarLayout, it goes away. – Peterdk Mar 09 '16 at 22:03

score 5 · Answer 6 · answered Oct 31 '16 at 20:22

Go to the activity you want to remove the ActionBar's Elevation. Before setContent(....), request the ActionBar feature(That is if you have not declared it directly)

    getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
    getSupportActionBar().setElevation(0);

or else just call the declared Toolbar variable e.g toolbar.setElevation(0);

score 4 · Answer 7 · edited Jun 21 '17 at 15:21

4

Get the appbarlayout in code:

var appbarLayout = findviewbyid<AppBarLayout>(resource.id.  );

set the property

appbarLayout.StateListAnimator=null;

edited Jun 21 '17 at 15:21

Martin Evans

45,791
17
81
97

answered Jun 21 '17 at 14:57

kalyan

91
3

Welcome to Stack Overflow. Please see 'Help' at the top right of the answer window to see how to format code. – Gary99 Jun 21 '17 at 15:02
Thank you Martin Evans.I will follow the same as you specified – kalyan Jun 22 '17 at 14:49

score 2 · Answer 8 · answered Jul 06 '15 at 13:43

2

Create another style for v21 and add

<item name="android:elevation">@dimen/toolbar_elevation</item> to that style. On normal style don't use elevation and don't use it in xml, just use style="@style/yourCustomToolbarStyle"

answered Jul 06 '15 at 13:43

slorangex

1,334
2
12
25

1

Hi, thanks for the reply. I made the change but the problem still occurs. Please see my edit for the code – Ersen Osman Jul 06 '15 at 13:55
This is my xml for custom Toolbar: `` where is style-v21 I have elevation for 4dp and no elevation for normal style – slorangex Jul 06 '15 at 14:00
So i should set 4dp elevation on the v21 style version of ToolbarStyle? – Ersen Osman Jul 06 '15 at 14:02
Maybe the problem is in your toolbar parent. I have ` – slorangex Jul 06 '15 at 14:06
Yeah it could be, i set the elevation to 1000dp :P and removing the getSupportActionBar().setElevation(o) line. The elevation stayed the same. I will post the parent where the toolbar is the child – Ersen Osman Jul 06 '15 at 14:15
oops you meant style parent. I will try that now, i posted more code in case in the problem is there. – Ersen Osman Jul 06 '15 at 14:21

score 1 · Answer 9 · answered Aug 30 '20 at 15:29

1

Solution is simple. Just add following line into your AppBar layout. No need to add elevation for the Toolbar or AppBar layout after this.

android:stateListAnimator="@null"

answered Aug 30 '20 at 15:29

score 1 · Answer 10 · answered Feb 01 '21 at 17:01

1

use android:outlineSpotShadowColor=" assign transparent colour" your shadow will disappear its work for my as below

enter image description here

answered Feb 01 '21 at 17:01

M Hamza Tahir

11
2

score 0 · Answer 11 · edited Aug 21 '19 at 20:54

0

To remove elevation by using java code use the line below...

getSupportActionBar().setElevation(0);

edited Aug 21 '19 at 20:54

OhhhThatVarun

3,981
2
26
49

answered Nov 25 '17 at 09:49

Ankesh Roy

278
2
8
33

Where does this line have to be implemented? Please further explain. – Al0x Nov 25 '17 at 10:13
just below setContentView(R.layout.activity_main); on onCreate() method. – Ankesh Roy Nov 25 '17 at 12:38

Android: I cannot remove elevation / shadow on my toolbar

11 Answers11

Linked

Related