एंड्रॉयड टूलबार CollapsingToolbarLayout

Question

में TabLayout ओवरलैपिंग

मैं Toolbar और TabLayout इसके नीचे के साथ CollapsingToolbarLayout बनाने की कोशिश कर रही है, लेकिन वे एक दूसरे अतिव्यापी और मैं this

मैं कई समाधान की कोशिश की है मिलता है, लेकिन अभी भी यह समस्या है

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

Answer 1

कोशिश अपने RelativeLayout से दूर करने के लिए:

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

या बस उन्हें इस तरह रहने दें:

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

यह एक बग था जो मुझे लगता है।

---

UPDATED: इस लिंक जांच: http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library/

और समान प्रश्न: How to use a TabLayout with Toolbar inside 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> 

Answer 2

संपादित इस तरह अपने XML: यहाँ मेरी एक्सएमएल है

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

टिप्पणी यह ​​काम नहीं करता है, तो

Answer 3

मैं भी समस्या के समान तरह चढ़ गया, मैं CoordinatorLayout. से android:fitsSystemWindows="true" को दूर करने की कोशिश की और यह काम किया ।

Answer 4

आप CollapsingToolbarLayout नीचे अपना TabLayout रखने के लिए, और यह काम हो जाएगा यकीन है, तो आप नीचे से मेरी कोड देख सकते हैं:

<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:expandedTitleMarginBottom="@dimen/_32sdp" 
     app:expandedTitleMarginEnd="@dimen/_64sdp" 
     app:expandedTitleMarginStart="@dimen/_48sdp" 
     app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Large" 
     app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

     <!-- Your View that you want to hide on animation --> 
     <android.support.v4.view.ViewPager 
      android:id="@+id/pager" 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/_250sdp" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" /> 

     <!-- Your toolbar should always below your View otherwise it won't be visible --> 
     <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/ThemeOverlay.AppCompat.Dark" 
      app:title="title text" 
      app:titleTextColor="@color/white" /> 

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

    <!--your tablayout should be here which will come below the toolbar--> 
    <android.support.design.widget.TabLayout 
     android:id="@+id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/_50sdp" 
     android:layout_below="@+id/toolbar" 
     android:layout_gravity="bottom" 
     android:background="@color/theme_color" 
     android:overScrollMode="never" 
     android:scrollbars="horizontal" 
     android:visibility="visible" 
     app:layout_anchor="@id/appbar" 
     app:layout_anchorGravity="bottom" 
     app:tabIndicatorColor="@color/orrange" 
     app:tabMode="scrollable" /> 

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


<android.support.v4.widget.NestedScrollView 
    android:id="@+id/scrollView" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

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

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

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

शुभकामनाएँ।