AppBarLayout transparent et CollapsingToolbarLayout

Question

Je voudrais réaliser la disposition suivante:

1. Carte comme disposition de base
2. Fenêtre transparente au-dessus à l'intérieur d'un CollapsingToolbarLayout
3. RecyclerView pour le contenu

J'ai inclus un exemple de la façon dont cela devrait ressembler.

Je suivais ce grand exemple de Cheesesquare pour l'implémentation CollapsingToolbarLayout et AppBarLayout. J'ai réussi à faire fonctionner le contenu avec la carte à l'intérieur de CollapsingToolbarLayout (commenté dans le format xml), mais ce n'est pas le résultat souhaité.

Cependant, je n'ai trouvé aucune solution/documentation pour rendre la boîte grise (voir l'image intérieure au milieu) transparente dans la position initiale. Je voudrais qu'il soit transparent afin de voir à travers la carte. Lorsque l'utilisateur ferait défiler vers le haut, CollapsingToolbarLaoyut devrait faire son travail et réduire la fenêtre transparente et afficher la barre d'outils. Pour l'instant, l'image semble juste blanche ou quelle que soit la couleur que je lui donne. J'ai déjà essayé de définir la couleur sur transparent, mais cela n'a pas eu l'effet souhaité.

Donc ma question : Comment pourrais-je définir le "CollapsingToolbarLayout" transparent dans la phase initiale (voir l'image Layer 1 boîte grise)?

Voici mon code pour la mise en page. Le CollapsingToolbarLayout fonctionne très bien, mais je ne vois pas la carte ci-dessous. Ce serait formidable s'il était possible de mettre en œuvre.

 <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

Comment pourrais-je définir le " CollapsingToolbarLayout" transparent dans la phase initiale (voir la zone grise de la couche 1 de l'image)?

Essayez d'utiliser ceci dans votre 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">

Voici le résultat:

J'espère que cela pourra aider.