How to make AppCompat toolbar transparent & with zero elevation

Question

I've noticed a lot of material design apps with transparent toolbars with no elevation.

I've managed to make my own toolbar transparent by adding a background attribute to the AppBarLayout, but I can't remove the shadow by changing the elevation attribute.

Any idea how to remove elevation, or a better way to make the AppCompat toolbar transparent in general? Thanks.

Here is my AppBar

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

    android:background="@android:color/transparent"
    android:elevation="0dp"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        />

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

edit

Changing android:elevation to app:elevation just makes the toolbar disappear entirely

KeLiuyue · Answer 1 · 2017-10-23T03:25:34.143

4

Change

android:elevation="0dp"

to

app:elevation="0dp"

And

set app:navigationIcon="@mipmap/ic_launcher_round" as Toolbar icon

edited Oct 23 '17 at 03:25

answered Oct 23 '17 at 03:05

KeLiuyue

8,149
4
25
42

Great it worked, but why does the back button disappear? How can I keep it? – the_prole Oct 23 '17 at 03:08
Change your `android:background="@android:color/transparent"` – KeLiuyue Oct 23 '17 at 03:10
I don't think this is the right answer. Adding the `android:elevation` attribute just seems to make the toolbar "disappear" in that I observe no up-button, title, or background color. – the_prole Oct 23 '17 at 03:35
android: elevation is used for the stock toolbar, if you are using the toolbar from support library you should use the app prefix. A simple [google search](https://www.google.co.in/search?q=difference+between+android:+and+app:&spell=1&sa=X&ved=0ahUKEwjouMOK7oXXAhVFqo8KHSWaBNMQvwUIJCgA&biw=1920&bih=974) gives you this and [this SO answer](https://stackoverflow.com/questions/29732512/difference-between-android-and-app-prefix-in-android-xml) can be useful – Sony Oct 23 '17 at 04:02

score 0 · Answer 2 · answered Oct 23 '17 at 04:05

First set app:elevation="0dp" in AppBarLayout
Second change AppBarLayout's theme to AppTheme.AppBarOverlay
Third chane the Toolbar's theme to AppTheme.PopupOverlay

Here is the example xml

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

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

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

Hope it'll solve your problem.

How to make AppCompat toolbar transparent & with zero elevation

2 Answers2