Cómo utilizar TabLayout con la barra de herramientas dentro de CollapsingToolbarLayout?

Estoy buscando en el chrisbanes / cheesesquare y estoy tratando de poner TabLayout con una barra de herramientas dentro de un CollapsingToolbarLayout, y aquí está mi código

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

Esto se pone en algo como esto cuando se abre el CollapsingToolbar que es exactamente lo que estoy buscando:

Introduzca aquí la descripción de la imagen

Pero cuando lo colapso (tirando de la imagen), tengo algo como esto

Introduzca aquí la descripción de la imagen

Y esto se debe a la razón por la que he establecido la barra de herramientas para tener una altura de 110dip si dejo la configuración predeterminada de las pestañas y el título de la barra de herramientas se superponen. Así que estoy buscando la manera correcta de hacer eso para que el título de la barra de herramientas que es el lugar correcto en la appbar y el tablayout está debajo de él. ¿Hay alguna manera de lograr esto?

He aquí la forma en que logré hacer esto, no creo que sea la mejor solución, aunque si alguien encuentra una mejor manera por favor no dude en publicar la respuesta.

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

Después de 2 días enteros de intentar encontrar una solución pura de Android aquí es mi solución.

Objetivo: pestañas debajo de la barra de herramientas con el fondo de la imagen detrás de ambas vistas

(TL, DR: Véase XML adjunto)

El comportamiento que quiero lograr es tener el CollapsingToolbarLayout y el TabLayout en la parte superior de una imagen y cuando el "encabezado" se desplaza hacia arriba (fuera de la pantalla), a continuación, mostrar la barra de herramientas con la TabLayout debajo de ella.

El problema:

Puesto que el CollapsingToolbarLayout ocultará todas las vistas de los niños cuando se colapsa excepto la vista de la barra de herramientas , entonces TabLayout tiene que colocarse fuera del CollapsingToolbarLayout, pero dentro de AppBarLayout para que esté "acoplado" en la parte superior de la pantalla y debajo de la barra de herramientas . El problema ahora es que el ImageView colocado dentro del CollapsingToolbarLayout no estará debajo del TabLayout pero encima de él verticalmente.

La solución:

Para resolver este problema necesitamos hacer que el ImageView sea más alto de modo que si colocáramos el TabLayout dentro del CollapsingToolbarLayout lo cubrirá. Pero como colocamos el TabLayout fuera de CollapsingToolbarLayout debemos asegurarnos de que el ImageView se dibuja aunque su vista principal ( CollapsingToolbarLayout ) sea más corta. ClipChildren = "false" AL RESCATE! ClipChildren le dice a un ViewGroup que NO corte la vista de sus hijos si son más grandes que su tamaño, por lo que esencialmente ahora podemos hacer que el ImageView sea más alto y todavía se dibujará bajo TabLayout . De esta manera podemos tener tanto el CollapsingToolbarLayout y el TabLayout por encima de una bonita imagen!

Mi diseño 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" />

Resulta que, como AppBarLayout extiende LinearLayout, puede tener dos CollapsingToolBarLayouts (extends FrameLayout) en él. Lo que hice fue tener la primera casa de CollapsingToolBarLayout el contenido que quería desaparecer, y le di el indicador AppBarLayout:

App: layout_scrollFlags = "desplazamiento | exitUntilCollapsed"

Para el segundo CollapsingToolbarLayout que realmente tenía las pestañas, establezco sus banderas de desplazamiento para:

App: layout_scrollFlags = "scroll | enterAlways"

El XML final se parece a esto y me da lo que quiero.

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

He creado este proyecto de ejemplo donde utilizo TabLayout dentro de CollapsingToolbarLayout

Probado en API 14-23. Funciona sin problemas.

Encontré una solución sencilla para que funcione con un fondo TabLayout transparente:

TabLayout expandedTitleMarginBottom en CollapsingToolbarLayout para evitar la superposición de título expandido TabLayout
Establece layout_height como TabLayout como valor constante
Agregue layout_marginBottom a la Toolbar de Toolbar con el mismo valor que TabLayout layout_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>

Colapso de la barra de herramientas con pestañas utilizando nuevo material de diseño apoyo biblioteca ejemplo con código fuente

Utilicé la característica oficial de la barra de herramientas de colapso de la nueva biblioteca de soporte de diseño de materiales.

Aquí colapsó la altura de la vista es 256dp y la altura de las pestañas es 56dp

Hice la trayectoria que sigue, corté la imagen en dos porciones una para la vista derrumbada y una para las lengüetas.

I Cutted imágenes de acuerdo a dp a los tamaños de píxeles con alta resolución xxxhdpi dibujable y poner en la carpeta de dibujar por lo que se ajusta a todos los tamaños de pantalla

Tengo imagen 2000×1246

Imagen superior 256dp = 2000×1024 píxeles

Imagen inferior de la pestaña 56dp = 2000×224 píxeles

Aquí está el ejemplo completo con código fuente

Introduzca aquí la descripción de la imagen

Utilice este código 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>

Código 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);

Aquí está mi idea de hacer esto.

Coloco la disposición de la lengüeta fuera de AppBar y la envuelvo con la disposición lineal vertical y fijo la posición como esto

 <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 no se ajusta TabLayout con otro Layout de altura doble. Cuando establece layout_anchor en AppBar, sólo la mitad de TabLayout estará en AppBar.

Aquí está mi archivo XML completo.

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

No estoy seguro de si este conjunto de valores de dp se ajustará a su tamaño de pantalla, pero lo hace con la mía. Si alguien tiene mejor respuesta por favor comparta.

Lo siento si cometo un error en mi código o mi inglés. ¡Gracias !!

Tuve un problema similar, y mi solución era ridículamente simple. Todo lo que tenía que hacer era establecer la barra de herramientas como la barra de acción de soporte (estoy usando una base de estilo Theme.NoActionBar )

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

El código siguiente implementa la barra de herramientas Expandir / Contraer.

Básicamente tendremos un
CoordinatorLayout (FrameLayout)
AppBarLayout ( AppBarLayout vertical que implementa muchas de las características de diseños de cosas),
CollapsingToolbarLayout (es un contenedor para la barra de herramientas)
ImageView y barra de herramientas

 <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

En tu clase

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

Puse el TabLayout fuera de AppBarLayout y envolvió el ViewPager y TabLayout juntos dentro de 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>

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

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

Esto funciona para mí, pero sólo en dispositivos con api 19+

Como alguien señaló antes, parece que esto es porque (de los documentos):

El botón de navegación está alineado verticalmente dentro de la altura mínima de la barra de herramientas, si se establece.

Por lo tanto, basándose en el diseño inicial puede hacer algo como esto:

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

Donde app: titleMarginTop es el espacio necesario para obtener el tamaño de la barra de herramientas menos TabLayout tamaño menos el tamaño del texto y debe alinearse muy bien.

Todos los códigos anteriores están colapsando sólo los componentes "CollapsingtoolbarLayout". Eso significa que si desplazamos la página del contenido de "ViewPager", no está funcionando.

Reemplazo el "ViewPager" por "FrameLayout" ahora está funcionando, lo que esperamos.

Estoy esperando como, si se desplaza la página de Viewpager entonces "CollapsingToolbarLayout" debe ser escuchar. Para esto utilicé el "NestedScrollView". Pero el problema es "ViewPager" no funciona en "NestedScrollView".

Así que finalmente logré con FrameLayout.

Pero el problema es "tabLayout.setOnTabSelectedListener (nuevo TabLayout.OnTabSelectedListener () {" es depricated

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

Creando el Tablayout sin ViewPager: http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager

Pude conseguir esto trabajando colocando el TabLayout dentro de un segundo CollapsingToolbarLayout con la bandera de desplazamiento fijada para entrar siempre contraído.

 <android.support.design.widget.AppBarLayout android:id="@+id/event_guide_appbar" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/event_guide_collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginBottom="80dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/event_guide_banner_image" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/darkened_placeholder" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/event_guide_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.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> <android.support.design.widget.TabLayout android:id="@+id/event_guide_tabbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:theme="@style/BaseTheme" app:layout_scrollFlags="scroll|exitUntilCollapsed" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/event_guide_swipe_refresh" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/light_gray" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.meetball.activity.EventGuideActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/event_guide_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.v4.widget.SwipeRefreshLayout>

Trate de poner la Toolbar dentro de la Toolbar CollapsingToolbar con la app:layout_collapseMode="pin" y TabLayout fuera con la app:layout_scrollFlags="enterAlways"