在工具栏和工厂顶部叠加

时间:2017-04-29 14:01:29

标签: android xml android-layout layout toolbar

我想实现以下目标:
使用当前不可见且使用CircularReveal动画显示的LinearLayout覆盖整个活动。它应该是这样的。 (此外,Fab应隐藏在叠加层的半透明背景下。)
截图来自Android Studio的预览 How it should look like

但是在我的手机上进行测试时它看起来像这样 How it actually looks like
工具栏和工厂位于叠加层之上。我在下面附上了我的布局。 我知道,我也可以使用透明主题绘制的上一个活动来解决这个问题,但我更喜欢这种方法,因为它将来更容易使用。

<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>

1 个答案:

答案 0 :(得分:0)

我使用PopupWindowreference here

解决了这个问题