Barra de herramientas Android superpuesta TabLayout en CollapsingToolbarLayout

Estoy tratando de hacer CollapsingToolbarLayout con la Toolbar y TabLayout por debajo de ella, pero se superponen entre sí y me sale esto

Introduzca aquí la descripción de la imagen

He intentado muchas soluciones, pero todavía tienen este problema. Aquí está mi xml:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:fab="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:id="@+id/app_bar_layout" 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="wrap_content" android:fitsSystemWindows="true" app:contentScrim="@color/colorAppPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:id="@+id/image" android:layout_width="match_parent" android:layout_height="250dp" android:background="@drawable/material_plane" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/header_png" app:layout_collapseMode="parallax" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> <ImageView android:id="@+id/imageViewPhoto" android:layout_width="80dp" android:layout_height="80dp" android:layout_centerInParent="true" /> <TextView android:id="@+id/textViewName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="false" android:layout_below="@+id/imageViewPhoto" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:text="TEXT" android:textColor="@color/white" android:textSize="16dp" /> </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:fitsSystemWindows="true" android:gravity="top" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways"> <TextView android:id="@+id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textColor="@color/white" android:textSize="20dp" android:textStyle="bold" /> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" android:fitsSystemWindows="true" app:tabBackground="@android:color/transparent" app:tabMode="scrollable" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <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.CoordinatorLayout> 

3 Solutions collect form web for “Barra de herramientas Android superpuesta TabLayout en CollapsingToolbarLayout”

Intente eliminar esto de su RelativeLayout :

 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

O simplemente dejar que sean así:

 app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

Fue un error supongo.


ACTUALIZADO: marque este enlace: http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library/

Y la pregunta similar: ¿Cómo utilizar un TabLayout con barra de herramientas dentro de CollapsingToolbarLayout?

 <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:contentScrim="@color/colorPrimaryDark" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:id="@+id/image" android:layout_width="match_parent" android:layout_height="250dp" android:background="@drawable/header" android:fitsSystemWindows="true" android:scaleType="centerCrop"> <ImageView android:id="@+id/imageViewPhoto" android:layout_width="80dp" android:layout_height="80dp" android:layout_centerInParent="true" app:layout_collapseMode="parallax" /> <TextView android:id="@+id/textViewName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="false" android:layout_below="@+id/imageViewPhoto" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:text="TEXT" android:textSize="16dp" /> </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:fitsSystemWindows="true" android:gravity="top" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways"> <TextView android:id="@+id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textSize="20dp" android:textStyle="bold" /> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/htab_tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" app:tabIndicatorColor="@android:color/white" /> </android.support.design.widget.CollapsingToolbarLayout> 

También me metí en el mismo tipo de problema, android:fitsSystemWindows="true" intentado eliminar el android:fitsSystemWindows="true" de CoordinatorLayout. Y funcionó.

Edite su XML de esta manera:

  <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" android:fitsSystemWindows="true" android:marginTop="?attr/actionBarSize" app:tabBackground="@android:color/transparent" app:tabMode="scrollable"/> 

Comente si no funciona

  • Dibuja una ruta en los mapas siguiendo la ruta de movimiento de los dedos en la pantalla del dispositivo
  • Barra de navegación translúcida (Android 4.4) - Mostrar contenido debajo
  • Lista de clics dentro de OverlayItem (MapView para Android)
  • Widget flotante / superposición en el lanzador de Android
  • ¿Hay alguna forma de que los elementos de la interfaz de usuario se superpongan ligeramente (uno encima del otro) sin usar diseños absolutos?
  • Android cómo dibujar la pintura en mano libre en MapView con superposición?
  • Información sobre Android sobre superposiciones flotantes / elementos sobre otras aplicaciones
  • Alternativa de Android a MetroGridHelper
  • Dibujar superposición en Android (en todo el sistema)
  • Uso de ItemizedOverlay y OverlayItem en Android Beta 0.9
  • Dibujo es constantemente llamado en mi superposición de mapa de Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.