Transparent AppBarLayout und CollapsingToolbarLayout

Question

würde Ich mag das folgende Layout achive:

1. Karte als Basis-Layout
2. Transparente Fenster oben in einem CollapsingToolbarLayout
3. RecyclerView für Inhalt

I enthalten ein Beispiel dafür, wie das aussehen soll.

Ich wurde im Anschluss an dieses große Beispiel von Cheesesquare für die CollapsingToolbarLayout und AppBarLayout Umsetzung. Ich habe es geschafft, dass der Inhalt mit der Map innerhalb der CollapsingToolbarLayout funktionierte (auskommentiert im Layout-XML), aber das ist nicht das gewünschte Ergebnis.

Allerdings habe ich keine Lösung/Dokumentation gefunden, um die graue Box (siehe Bild in der Mitte) in der Ausgangsposition transparent zu machen. Ich möchte, dass es transparent ist, um durch die Karte zu sehen. Wenn der Benutzer nach oben scrollt, sollte CollapsingToolbarLaoyut seine Arbeit erledigen und das transparente Fenster ausblenden und die Toolbar anzeigen. Fürs Erste sieht das Bild nur weiß aus oder egal welche Farbe ich ihm gebe. Ich habe bereits versucht, die Farbe transparent zu machen, aber es hat nicht den gewünschten Effekt.

Also meine Frage: Wie konnte ich die "CollapsingToolbarLayout" transparent in der Anfangsphase (Bild Layer 1 grauer Kasten sehen)?

Hier ist mein Code für das Layout. Das CollapsingToolbarLayout funktioniert gut, aber ich kann die folgende Karte nicht sehen. Wäre toll, wenn es möglich wäre zu implementieren.

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

Answer 1

Wie könnte ich die "CollapsingToolbarLayout" transparent in der Anfangsphase gesetzt (Bild Layer 1 grauen Kasten sehen)?

versuchen, dies zu verwenden in Ihrem 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"> 

Hier ist das Ergebnis:

Hoffnung, das hilft.