Warum wird die Toolbar mit TabLayout überlagert?

Question

Ich weiß nicht, warum Toolbar mit Tablayout überlagert wird, wenn die Kopfzeile nach oben scrollen.

Aber ich möchte, dass sie einfach nicht einander wie dieses Bild

Wenn der Header nach oben gescrollt zu überlagern und brach zusammen, ich möchte wie im letzten Bild suchen. Wie kann ich es lösen? Bitte, hilf mir. Vielen Dank im Voraus.

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawerLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:openDrawer="start"> 

    <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/coordinatorLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.AppBarLayout 
      android:id="@+id/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/collapsingToolbarLayout" 
       android:layout_width="match_parent" 
       android:layout_height="@dimen/app_bar_height" 
       android:fitsSystemWindows="true" 
       app:contentScrim="?attr/colorPrimary" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

       <ImageView 
        android:id="@+id/headerBg" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:fitsSystemWindows="true" 
        android:scaleType="centerCrop" 
        android:contentDescription="@string/app_name" 
        app:layout_collapseMode="parallax" 
        app:layout_collapseParallaxMultiplier="0.7" /> 

       <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"> 

        <Space 
         android:layout_width="40dp" 
         android:layout_height="40dp" /> 

        <ImageView 
         android:id="@+id/profilePicture" 
         android:layout_width="@dimen/profile_pic_width" 
         android:layout_height="@dimen/profile_pic_height" 
         android:scaleType="centerCrop" 
         android:layout_gravity="center_horizontal"/> 
        <TextView 
         android:id="@+id/userName" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:textStyle="bold" 
         android:textSize="14dp" /> 
       </LinearLayout> 

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

       <android.support.design.widget.TabLayout 
        android:id="@+id/tabLayout" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        android:layout_gravity="bottom" 
        app:layout_collapseMode="pin" 
        app:tabIndicatorColor="?attr/colorAccent" 
        app:tabIndicatorHeight="3dp"/> 

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

    <android.support.design.widget.NavigationView 
     android:id="@+id/navigation" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" 
     android:background="#fff" 
     android:fitsSystemWindows="true" 
     app:headerLayout="@layout/nav_header" 
     app:menu="@menu/navigation_drawer_items" 
     app:itemIconTint="?attr/colorPrimary" 
     app:itemTextColor="@color/black"> 

    </android.support.design.widget.NavigationView> 

</android.support.v4.widget.DrawerLayout> 

Answer 1

Versuchen fitsSystemWindows=true in Tab Layout wie folgt setzen:

<android.support.design.widget.TabLayout 
         android:id="@+id/tabLayout" 
         android:layout_width="match_parent" 
         android:layout_height="?attr/actionBarSize" 
         android:layout_gravity="bottom" 
         app:layout_collapseMode="pin" 
         android:fitsSystemWindows="true" 
         app:tabIndicatorColor="?attr/colorAccent" 
         app:tabIndicatorHeight="3dp"/> 

Answer 2

Ich bin überhaupt nicht sicher, aber wahrscheinlich ist es, weil Sie die Rolle in der gesamten Layout verwenden. Fügen Sie einfach einige Android: layout_marginTop, wie 60 dp zum Beispiel.

Answer 3

Verschieben Sie Ihre TabLayout außerhalb CollapsingToolbarLayout, aber immer noch innerhalb AppBarLayout. Gefällt Ihnen dieses

<android.support.design.widget.AppBarLayout> 
     <android.support.design.widget.CollapsingToolbarLayout> 

      ... 

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

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

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