覆盖在工具栏和 fab 之上

Question

我想实现以下目标：
用当前不可见的 LinearLayout 覆盖整个 activity，并用 CircularReveal 动画显示。它应该看起来像这样。（此外，Fab 应隐藏在覆盖层的半透明背景之下。）
屏幕截图来自 Android Studio 的预览。

但是在我的 phone 上测试时它看起来像这样。

工具栏和 fab 位于叠加层之上。我在下面附上了我的布局。我知道，我也可以用一个新的 activity 来解决这个问题，这个新的 activity 是在前一个透明主题的基础上绘制的，但我更喜欢这种方法，因为它在未来更容易使用。

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jonas.gimmefood.MapsActivity">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.gimmefood.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/Theme.gimmefood.PopupOverlay" />

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:fabSize="normal"
        android:elevation="2dp"
        app:srcCompat="@drawable/ic_my_location_24dp" />

    <!-- This is the overlay -->
    <LinearLayout
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="visible">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:background="@color/primary_dark"
            android:orientation="vertical"
            android:elevation="2dp">
            <!-- elevation for the drop shadow -->

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="1">

                <android.support.v7.widget.AppCompatEditText
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="start"
                    android:layout_marginEnd="52dp"
                    android:layout_marginStart="4dp"
                    android:hint="@android:string/search_go" />

                <android.support.v7.widget.AppCompatImageButton
                    android:id="@+id/toolbar_close_icon"
                    style="@style/Widget.AppCompat.Button.Borderless"
                    android:layout_width="42dp"
                    android:layout_height="42dp"
                    android:layout_gravity="end"
                    android:layout_marginEnd="4dp"
                    android:background="?selectableItemBackgroundBorderless"
                    android:src="@drawable/ic_close_24dp" />
            </FrameLayout>

            horizontal list view with all the circular buttons
            ...

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/background_transparent"/>

    </LinearLayout>

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

Answer 1

我用 PopupWindow (reference here)

解决了

覆盖在工具栏和 fab 之上

Overlay on top of toolbar and fab

xml

layout

android

toolbar

android-layout