Comment utiliser un TabLayout avec Toolbar dans CollapsingToolbarLayout?

Question

Je regarde le chrisbanes/cheesesquare et j'essaie de mettre TabLayout avec une barre d'outils dans un CollapsingToolbarLayout, et voici mon code

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/primary_dark"
            Android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="110dip"
                Android:layout_gravity="top"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"/>

        </Android.support.design.widget.CollapsingToolbarLayout>

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

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

Cela met quelque chose comme ceci lorsque la barre CollapsingTool est ouverte, c'est exactement ce que je recherche:

Mais quand je l'effondre (en tirant l'image vers le haut), je reçois quelque chose comme ça 

Et cela est dû à la raison pour laquelle j'ai défini la barre d'outils sur une hauteur de 110dip si je laisse les paramètres par défaut les onglets et le titre de la barre d'outils se chevauchant. Je cherche donc la bonne façon de le faire pour que le titre de la barre d’outils soit placé à la bonne place dans la barre de menu et que le tablayout se trouve en dessous. Y a-t-il un moyen d'y parvenir?

Answer 1

Voici comment j'ai réussi à faire cela. Je ne pense pas que ce soit la meilleure solution. Si quelqu'un trouve un meilleur moyen, n'hésitez pas à poster la réponse.

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="206dip"
            Android:background="@color/primary_dark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="20dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            Android:gravity="bottom"/>
    </Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>

Answer 2

Après deux jours entiers de recherche d’une solution purement Android, voici ma solution. 

Cible: onglets sous la barre d'outils avec un arrière-plan d'image derrière les deux vues

(TL; DR: voir XML ci-joint)

Le comportement que je veux obtenir consiste à avoir CollapsingToolbarLayout et TabLayout au-dessus d'une image et lorsque "l'en-tête" défile (en dehors de l'écran), puis à afficher le ActionBar (barre d'outils) avec le TabLayout en dessous. 

Le problème:  

Étant donné que CollapsingToolbarLayout masquera toutes les vues enfants une fois réduit sauf la vue Toolbar, le TabLayout doit être placé en dehors de CollapsingToolbarLayout, mais à l'intérieur de AppBarLayout, de sorte il est "ancré" en haut de l'écran et sous la barre d'outils . Le problème est maintenant que le ImageView placé à l'intérieur du CollapsingToolbarLayout ne sera pas sous le TabLayout mais au-dessus de celui-ci verticalement. 

La solution:  

Pour résoudre ce problème, nous devons augmenter la taille de ImageView afin que, si nous plaçons le TabLayout dans le CollapsingToolbarLayout, il le recouvre. Mais comme nous avons placé le TabLayout en dehors du CollapsingToolbarLayout, nous devons nous assurer que le ImageView est dessiné même si sa vue parent (CollapsingToolbarLayout) est plus courte. clipChildren = "false" AU SAUVETAGE! clipChildren demande à ViewGroup de NE PAS découper la vue de ses enfants si sa taille est supérieure à sa taille. Nous pouvons donc maintenant rendre ImageView plus grand et il sera toujours dessiné sous le TabLayout. De cette façon, nous pouvons avoir à la fois le CollapsingToolbarLayout et le TabLayout au-dessus d'une belle image!

Ma mise en page xml:

<?xml version="1.0" encoding="utf-8"?>

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:clipChildren="false" /////IMPORTANT!!!!!!
    Android:theme="@style/AppTheme.AppBarOverlay">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/toolbar_layout"
        Android:layout_width="match_parent"
        Android:layout_height="200dp"
        Android:clipChildren="false"  /////IMPORTANT!!!!!!
        Android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

        <ImageView
            Android:layout_width="match_parent"
            Android:layout_height="200dp"
            Android:scaleType="centerCrop"
            Android:src="@drawable/poster"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </Android.support.design.widget.CollapsingToolbarLayout>

    <Android.support.design.widget.TabLayout
        Android:id="@+id/main_tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabMode="scrollable" />
</Android.support.design.widget.AppBarLayout>


<include layout="@layout/content_main" />

Answer 3

Il s'avère que puisque AppBarLayout étend LinearLayout, vous pouvez y avoir deux CollapsingToolBarLayouts (étend FrameLayout). Ce que j'ai fait, c'est que le premier que CollapsingToolBarLayout héberge le contenu que je voulais supprimer et lui ai attribué le drapeau AppBarLayout:

app: layout_scrollFlags = "scroll | exitUntilCollapsed"

Pour le deuxième CollapsingToolbarLayout contenant les onglets, j'ai défini les indicateurs de défilement sur:

app: layout_scrollFlags = "scroll | enterAlways"

Le XML final ressemble à ceci et il me donne ce que je veux.

    <?xml version="1.0" encoding="utf-8"?>
<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"
    Android:orientation="vertical">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/pager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="@dimen/quadruple_margin"
            app:layout_collapseParallaxMultiplier="0.7"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                Android:id="@+id/header_view"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:animateLayoutChanges="true"
                Android:background="@color/black_40">

                <!-- YOUR CONTENT HERE -->

            </RelativeLayout>

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/action_bar"
                Android:layout_width="match_parent"
                Android:layout_height="@dimen/abc_action_bar_default_height_material"
                app:contentInsetLeft="@dimen/triple_margin"
                app:contentInsetStart="@dimen/triple_margin"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.AppCompat.NoActionBar"
                app:theme="@style/Theme.AppCompat.NoActionBar" />
        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="48dp"
                Android:layout_gravity="bottom"
                Android:layout_marginTop="@dimen/half_margin"
                app:layout_scrollFlags="enterAlways"
                app:tabBackground="@color/transparent"
                app:tabGravity="center"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/white"
                app:tabTextColor="@color/grey_400" />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>

Answer 4

J'ai créé ce sample projet dans lequel j'utilise TabLayout dans CollapsingToolbarLayout

Testé sur l'API 14-23. Fonctionne sans aucun problème.

Answer 5

J'ai trouvé une solution simple pour que cela fonctionne avec un arrière-plan TabLayout transparent:

• utilisez expandedTitleMarginBottom dans CollapsingToolbarLayout pour éviter le chevauchement du titre développé TabLayout
• définir layout_height à TabLayout comme valeur constante
• ajoutez layout_marginBottom à Toolbar avec la même valeur que TabLayoutlayout_height

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:expandedTitleMarginBottom="70dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <YourMagicViewWithBackgroundImageTextAndOtherStuff
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginBottom="50dp"
            app:layout_collapseMode="pin" />

        <Android.support.design.widget.TabLayout
            Android:layout_width="match_parent"
            Android:layout_height="50dp"
            Android:layout_gravity="bottom" />

    </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>

Answer 6

Utilisez ce code XML

<?xml version="1.0" encoding="utf-8"?>
<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">

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapse_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="250dp"
        Android:fitsSystemWindows="true"
        app:contentScrim="@color/PrimaryColor"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            Android:id="@+id/img"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/background_material"
            Android:fitsSystemWindows="true"
            Android:scaleType="fitXY"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:gravity="top"
            Android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleMarginTop="15dp"/>



        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabsInLogin"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_gravity="bottom"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="@Android:color/white" />

    </Android.support.design.widget.CollapsingToolbarLayout>

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

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpagerDetail"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Code Java

  collapsingToolbarLayout =    (CollapsingToolbarLayout)findViewById(R.id.collapse_toolbar);
    collapsingToolbarLayout.setTitleEnabled(false);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(cheeseName);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Answer 7

réduction de la barre d’outils avec des onglets utilisant un nouvel exemple de bibliothèque de support de conception de matériaux avec code source

J'ai utilisé la fonctionnalité de barre d'outils de réduction officielle de la nouvelle bibliothèque de support de conception de matériel.

la hauteur de vue réduite ici est de 256dp et la hauteur des onglets est de 56dp

j'ai tracé le chemin suivant, j’ai coupé l’image en deux parties, l’une pour la vue réduite et l’autre pour les onglets.

j'ai coupé les images en fonction de dp en pixel tailles avec xxxhdpi dessiné haute résolution et placé dans un dossier pouvant être dessiné afin qu'il soit ajustable à toutes les tailles

j'ai l'image 2000x1246

image du haut 256dp = 2000x1024 pixel

image de l'onglet inférieur 56dp = 2000x224 pixels

Voici l'exemple complet avec code source

 

Answer 8

Voici mon idée de faire cela.

Je place la disposition des onglets en dehors de la barre d’application et l’enveloppe avec une disposition linéaire verticale et la positionne comme ceci

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    Android:orientation="vertical">

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabDetail"
    Android:layout_width="match_parent"
    Android:layout_height="40dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

Si vous n'enroulez pas TabLayout avec un autre Layout de hauteur double. Lorsque vous définissez layout_anchor sur AppBar, seule la moitié de TabLayout sera dans AppBar.

Voici tout mon fichier XML.

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpagerDetail"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/detail_backdrop_height"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginBottom="54dp">

        <ImageView
            Android:id="@+id/backdrop"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

    </Android.support.design.widget.CollapsingToolbarLayout>

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

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    Android:orientation="vertical">

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabDetail"
    Android:layout_width="match_parent"
    Android:layout_height="40dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

Je ne sais pas si cet ensemble de valeurs dp conviendra à la taille de votre écran, mais cela convient à la mienne. Si quelqu'un a une meilleure réponse s'il vous plaît partager.

Désolé si je fais une erreur sur mon code ou mon anglais. Merci !!

Answer 9

J'ai eu un problème similaire et ma solution était ridiculement simple. Tout ce que j'avais à faire était de définir la barre d'outils en tant que barre d'action de support (j'utilise une base de style Theme.NoActionBar)

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Answer 10

Barre d'outils> définir le bas de la marge sur 48dp et layout_height sur? Attr/actionBarSize

<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/detail_backdrop_height"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@color/primary_dark"
        Android:minHeight="150dip"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginBottom="60dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            Android:id="@+id/backdrop"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_gravity="top"
            Android:layout_marginBottom="38dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom"/>

    </Android.support.design.widget.CollapsingToolbarLayout>

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

Answer 11

<?xml version="1.0" encoding="utf-8"?>
<ui.screen.ProfileView
    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.support.design.widget.CoordinatorLayout
        Android:id="@+id/content"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <Android.support.v4.view.ViewPager
            Android:id="@+id/profile_viewpager"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <Android.support.design.widget.AppBarLayout
            Android:id="@+id/profile_appbar_layout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@Android:color/transparent"
            app:elevation="2dp">

            <Android.support.design.widget.CollapsingToolbarLayout
                Android:id="@+id/collapsing_toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:expandedTitleTextAppearance="@Android:color/transparent"
                app:elevation="2dp">

                <LinearLayout
                    Android:id="@+id/profile_user_layout"
                    Android:layout_width="match_parent"
                    Android:layout_height="192dp"
                    Android:background="?attr/colorPrimary"
                    Android:clipChildren="false"
                    Android:clipToPadding="false"
                    Android:orientation="vertical"
                    Android:paddingBottom="24dp"
                    Android:paddingLeft="24dp"
                    Android:paddingRight="24dp"
                    Android:paddingTop="64dp"
                    app:layout_collapseMode="parallax">

                    <LinearLayout
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:clipChildren="false"
                        Android:orientation="horizontal">

                        <FrameLayout
                            Android:layout_width="96dp"
                            Android:layout_height="96dp"
                            Android:clipChildren="false">

                            <de.hdodenhof.circleimageview.CircleImageView
                                Android:id="@+id/profile_user_photo"
                                Android:layout_width="86dp"
                                Android:layout_height="86dp"
                                Android:src="@mipmap/ic_launcher"
                                app:border_width="1dp"
                                app:border_color="@color/white" />

                            <View
                                Android:id="@+id/profile_user_medal"
                                Android:layout_width="24dp"
                                Android:layout_height="24dp"
                                Android:background="@drawable/medal"
                                Android:layout_marginRight="6dp"
                                Android:layout_marginTop="2dp"
                                Android:layout_gravity="top|right" />

                        </FrameLayout>

                        <LinearLayout
                            Android:id="@+id/profile_user_details"
                            Android:layout_width="wrap_content"
                            Android:layout_height="wrap_content"
                            Android:layout_weight="1"
                            Android:orientation="vertical"
                            Android:layout_marginLeft="16dp">

                            <TextView
                                Android:id="@+id/profile_user_name"
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:text="Kateřina Bíla"
                                Android:textColor="@color/white"
                                Android:textSize="24sp" />

                            <TextView
                                Android:id="@+id/profile_user_completed_activities"
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:text="Dokoncene 4 z 5"
                                Android:textColor="@color/white"
                                Android:textSize="16sp" />

                            <LinearLayout
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:orientation="horizontal">

                                <TextView
                                    Android:id="@+id/profile_user_progress_text"
                                    Android:layout_width="wrap_content"
                                    Android:layout_height="wrap_content"
                                    Android:textSize="20sp"
                                    Android:textColor="@color/white"
                                    Android:text="50%" />

                                <com.rey.material.widget.ProgressView
                                    Android:id="@+id/profile_user_progress_bar"
                                    Android:layout_width="match_parent"
                                    Android:layout_height="6dp"
                                    Android:visibility="visible"
                                    Android:layout_gravity="center_vertical"
                                    Android:layout_marginLeft="8dp"
                                    Android:paddingRight="16dp"
                                    app:pv_progressMode="determinate"
                                    app:pv_circular="false"
                                    app:pv_autostart="true"
                                    app:lpd_strokeSize="3dp"
                                    app:lpd_strokeColor="@color/red"
                                    app:lpd_strokeSecondaryColor="@color/white"
                                    app:lpd_maxLineWidth="62dp"
                                    app:lpd_minLineWidth="31dp"
                                    app:pv_progressStyle="@style/ProfileTotalProgressBar"
                                    app:pv_progress="0.5" />


                            </LinearLayout>


                        </LinearLayout>
                    </LinearLayout>


                </LinearLayout>

                <include layout="@layout/toolbar" />

            </Android.support.design.widget.CollapsingToolbarLayout>

            <FrameLayout
                Android:layout_width="match_parent"
                Android:layout_height="48dp"
                app:elevation="2dp">

                <Android.support.design.widget.TabLayout
                    Android:id="@+id/profile_tab_layout"
                    Android:layout_width="match_parent"
                    Android:layout_height="48dp"
                    Android:layout_gravity="top"
                    Android:background="?attr/colorPrimary"
                    app:tabTextColor="@color/white_87"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="@color/white"
                    app:tabIndicatorHeight="4dp"
                    app:tabMode="fixed"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextAppearance="@style/TabTextAppearance"
                    app:elevation="2dp" />

            </FrameLayout>

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

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

</ui.screen.ProfileView>

Cela fonctionne pour moi, mais uniquement sur les appareils avec api 19+ 

Answer 12

Tous les codes ci-dessus ne font que réduire les composants "CollapsingtoolbarLayout". Cela signifie que si nous faisons défiler la page du contenu "ViewPager", cela ne fonctionne pas.

Je remplace le "ViewPager" par "FrameLayout" maintenant, il fonctionne, ce que nous attendons.

Je m'attends à ce que, si défiler la page de Viewpager alors "CollapsingToolbarLayout" devrait être écouter. Pour cela, j'ai utilisé le "NestedScrollView". Mais le problème est "ViewPager" ne fonctionne pas dans "NestedScrollView".

Alors finalement, j'ai réalisé avec FrameLayout. 

Mais le problème est "tabLayout.setOnTabSelectedListener (new TabLayout.OnTabSelectedListener () {" est privé

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

    <!--<Android.support.v4.view.ViewPager
        Android:id="@+id/viewPager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="250dp"
        Android:fitsSystemWindows="true"
        >

        <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/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                Android:visibility="gone"
                Android:src="@drawable/srl_mallikaarjuna_lrg"
                app:layout_collapseMode="parallax"

                />


            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                >
                <RelativeLayout
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent">
                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:gravity="center_horizontal|center_vertical"
                        Android:text="Calendar"/>
                </RelativeLayout>

            </Android.support.v7.widget.Toolbar>

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tab_layout"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"
              >

            </Android.support.design.widget.TabLayout>

        </Android.support.design.widget.CollapsingToolbarLayout>

    </Android.support.design.widget.AppBarLayout>
    <Android.support.v4.widget.NestedScrollView

    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="#fefefe"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

  <FrameLayout
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      Android:id="@+id/frame_container">

  </FrameLayout>

</Android.support.v4.widget.NestedScrollView>


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

Créer le Tablayout avec ViewPager: http://www.theappguruz.com/blog/easy-way-tcreate-tab-layout-in-Android-without-viewpager

Answer 13

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        Android:minHeight="?attr/actionBarSize" >

        <include layout="@layout/YOUR-CONTENT-LAYOUT" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            Android:fitsSystemWindows="false"
            app:contentScrim="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>

<LinearLayout
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    Android:orientation="vertical" >

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="48dp"
        app:layout_scrollFlags="scroll"
        Android:background="@color/primary_color" />

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent" />
</LinearLayout>

Answer 14

Le code ci-dessous implémente la barre d'outils Action Développer/Réduire.

Fondamentalement, nous aurons un
CoordinatorLayout (FrameLayout)
AppBarLayout (LinearLayout vertical qui implémente de nombreuses fonctionnalités des conceptions de matériau),
CollapsingToolbarLayout (est un wrapper pour Toolbar)
ImageView et barre d'outils

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    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/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            Android:id="@+id/header"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/logo"
            Android:minHeight="300dp"
            Android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin" />


    </Android.support.design.widget.CollapsingToolbarLayout>


<Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            Android:gravity="bottom"/>

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


    <FrameLayout
        Android:id="@+id/fr_container_home"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

Observation
- FrameLayout is necessary app: layout_behavior = "@string/appbar_scrolling_view_behavior"
-TOOLBAR Not need backgroud, insert the color in the attribute app:contentScrim = "?Attr/ColorPrimary" from our CollapsingToolbarLayout

Dans votre classe 

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);

Answer 15

Comme quelqu'un l'a déjà souligné, il semble que ceci soit dû au fait que (d'après la documentation):

Le bouton de navigation est aligné verticalement dans la barre d'outils hauteur minimale, si définie.

Par conséquent, en fonction de la disposition initiale, vous pouvez faire quelque chose comme ceci:

<Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/primary_dark"
            Android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

             <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_height="?actionBarSize"
                Android:layout_gravity="bottom"/>

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="110dip"
                Android:layout_gravity="top"
                app:titleMarginTop="13dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </Android.support.design.widget.CollapsingToolbarLayout>

Où app: titleMarginTop est l'espacement nécessaire pour obtenir la taille de la barre d'outils moins la taille de TabLayout moins la taille du texte; l'alignement doit être parfait.

Answer 16

J'ai placé le TabLayout en dehors de AppBarLayout et enveloppé ensemble ViewPager et TabLayout dans un LinearLayout.

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="210dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:background="@color/profile_header_bg_color"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        Android:background="@color/profile_header_bg_color">

        <ImageView
            Android:layout_width="match_parent"
            Android:paddingTop="60dp"
            Android:layout_height="210dp"
            Android:background="@color/profile_header_bg_color"
            Android:id="@+id/user_details"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.Light"
            Android:background="@color/profile_header_bg_color"
            app:layout_collapseMode="pin"/>

    </Android.support.design.widget.CollapsingToolbarLayout>

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

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="fill_parent" />
</LinearLayout>