AppBarLayout elevation hides toolbar

Question

I'm trying to disable the shadow below a transparent AppBarLayout/Toolbar. Here's the layout:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#000">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:background="@android:color/transparent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/imagePreviewToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

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

    <include layout="@layout/content_image_preview" />
</android.support.design.widget.CoordinatorLayout>

I already tried with

app:elevation="0dp"

and

getSupportActionBar().setElevation(0);

but that makes the UP arrow invisible. I also tried to remove the AppBarLayout and use only the Toolbar, but the problem persists.

Anyone has a solution?

---

EDIT:

Replacing the AppBarLayout + Toolbar combo with this code:

<android.support.v7.widget.Toolbar
    android:id="@+id/imagePreviewToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/transparent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:elevation="0dp"/>

partially fixed the problem. Now the Toolbar becomes invisible only when the device is in landscape mode! The Android Studio Layout Editor shows me the Toolbar in both orientations just fine, so I don't really know what the problem could be..

Kermes

hi there,did you try app:elevation="0dp" in toolbar.? try it with xml rather than programmatically. @xmattjus try this link https://mcmap.net/q/183678/-how-to-remove-shadow-below-actionbar-with-appcompat-light-noactionbar – Viscacha

@MFaisalHyder Thanks for the link, that partially fixed the problem.. Now the Toolbar becomes invisible only in landscape mode. And this happends with or without the elevation property set. – Kermes

don't replace the layout, use ToolBar inside AppBarLayout this time try app:ele... property to appbar Layout instead of Toolbar let me know. one more thing try on different devices/emulators – Viscacha

@MFaisalHyder Using app:elevation in the AppBarLayout makes everything invisible with both device orientations. This happens on the emulator and my tablet (5.1) as well.. Using only Toolbar with app:elevation disables the shadow correctly in portrait mode, but renders the Toolbar invisible in landscape.. – Kermes

give me your layout complete i will try then i will post answer. can you give me an app example like whom you want your app to look alike ? like google maps toolBar? or MX player, or completely invisible toolbar with just back button ? – Viscacha

@MFaisalHyder Here you go: link. I'm trying to achive something similiar to the Google Photos app image preview, with a transparent Toolbar showing only the UP back button. The layout has no top and bottom padding, I add those programmatically. Thanks again for the help! – Kermes

hi there :D it seems i found solution , it is like this na, confirm, you want a complete transparent toolbar with back button enabled and on toolBar and imageview taking whole screen space below Status bar(where you see you time, signal bars etc... ? ) – Viscacha

Exactly. And I already accomplished that, the only problem remaining is that the toolbar becomes invisible in landscape mode. – Kermes

Answer 1

after some tries i did find that ToolBar should be the last view in this case else if it will be first then the view coming after it will overlap it as it has height set to match_parent so try this way in layout.

Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout  
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/imagePreviewToolbar" >

    <ImageView
        android:id="@+id/image_preview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/galacticos"
        android:contentDescription="abc"
        android:scaleType="fitCenter" />

    <LinearLayout
        android:id="@+id/actionBtns"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:padding="16dp" >

        <ImageButton
            android:id="@+id/setBackgroundBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:contentDescription="abc"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:id="@+id/downloadBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?selectableItemBackgroundBorderless"
            android:clickable="true"
            android:contentDescription="abc"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
</RelativeLayout>

<android.support.v7.widget.Toolbar
    android:id="@+id/imagePreviewToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:fitsSystemWindows="true"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

And don't forget to initialize this all and set your title to false to only show the toolBar back button:

Activity Code

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);

    Toolbar mToolBar = (Toolbar) findViewById(R.id.imagePreviewToolbar);
    setSupportActionBar(mToolBar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setDisplayShowTitleEnabled(false);
    getSupportActionBar().setHomeButtonEnabled(true);

}

Pics

Hope i helped you.

Viscacha

Thanks again! Gonna check later the Toolbar behaviour in landscape mode. – Kermes

This is what did it for me too. I did not have to combine AppBarLayout + Toolbar however, I just moved them both to the last position in the CoordinatorLayout. Worked in landscape and portrait too. – Erde

How about in FrameLayout with dynamic Fragment, where i put my Toolbar ? – Mete

You can use ids of views in case of dynamic fragments to render view below toolbar – Viscacha

Answer 2

Make toolbar like this:

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

And after that in your Activity;

findViewById(R.id.myAppBar).bringToFront();

Amulet