Прозрачный AppBarLayout и CollapsingToolbarLayout

Я хотел бы получить следующий макет:

  1. Карта в качестве базовой компоновки
  2. Прозрачное окно сверху внутри CollapsingToolbarLayout
  3. RecyclerView для контента

Я включил пример того, как это должно выглядеть.

Введите описание изображения здесь

Я следовал этому замечательному примеру из Cheesesquare для реализации CollapsingToolbarLayout и AppBarLayout. Мне удалось получить содержимое, работающее с картой внутри CollapsingToolbarLayout (закомментировано в макете xml), но это не желаемый результат.

Однако я не нашел никакого решения / документации, чтобы сделать серое окно (см. Внутреннее изображение посередине) прозрачным в исходном положении. Я бы хотел, чтобы он был прозрачным, чтобы увидеть карту. Когда пользователь будет прокручивать вверх, CollapsingToolbarLaoyut должен выполнить эту работу и свернуть прозрачное окно и показать панель инструментов. Пока изображение выглядит просто белым или каким-либо цветом, который я ему даю. Я уже пытался установить прозрачный цвет, но он не имел желаемого эффекта.

Итак, мой вопрос : как я мог установить прозрачность «CollapsingToolbarLayout» на начальном этапе (см. Изображение в сером окне слоя 1)?

Вот мой код для макета. CollapsingToolbarLayout отлично работает, но я не вижу карту ниже. Было бы здорово, если бы можно было реализовать.

<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" android:fitsSystemWindows="true"> <!-- Layer 0 --> <FrameLayout android:id="@+id/overlayFragmentMap" android:layout_width="match_parent" android:layout_height="match_parent" android:elevation="0dip" /> <!-- Layer 1 --> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="192dp" android:fitsSystemWindows="true" android:theme="@style/CustomActionBar"> <!--android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar--> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorAccent" app:expandedTitleMarginBottom="32dp" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:expandedTitleTextAppearance="@color/black" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <!-- Map view inside here works perfectly but is not the deisired result --> <!-- <FrameLayout android:id="@+id/overlayFragmentMap" android:layout_width="match_parent" android:layout_height="match_parent" android:elevation="0dip" app:layout_collapseMode="parallax" /> --> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@drawable/transparent" android:elevation="4dip" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- Fragment with recyclerview inside --> <FrameLayout android:id="@+id/overlayFragmentContent" android:layout_width="match_parent" android:layout_height="match_parent" android:elevation="3dip" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dip" android:clickable="true" app:layout_anchor="@+id/appbar" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout> 

Solutions Collecting From Web of "Прозрачный AppBarLayout и CollapsingToolbarLayout"

Как я мог установить прозрачность « CollapsingToolbarLayout » на начальном этапе (см. Серое окно «Слой 1»)?

Попробуйте использовать это в своем AppBarLayout : android:background="@android:color/transparent"

 <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="192dp" android:background="@android:color/transparent" android:fitsSystemWindows="true"> 

Вот результат:

Введите описание изображения здесь

Надеюсь, это поможет.