CollapsingToolbarLayout और TabLayout

Question

मैं एक ऐसी गतिविधि बनाने की कोशिश कर रहा हूं जिसमें एक छवि और टूलबार के साथ एक CollapsingToolbarLayout है (जैसे चीजसेक्चर उदाहरण में चीज डिस्प्ले एक्टिविटी here), जिसमें नीचे एक टैब लेआउट भी है।

कोई विचार इसे कैसे कार्यान्वित किया जाए?

जब CollapsingToolbarLayout या AppBarLayout में जोड़ने के लिए कोशिश कर रहा है, नतीजा यह है कि टैब लेआउट स्क्रीन

Answer 1

इस संरचना का प्रयास के शीर्ष में है:

<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="SPECIFIC HEIGHT HERE!" 
     android:fitsSystemWindows="true" 
     android:theme="ADD A STYLE HERE IF YOU WANT"> 

     <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:src="YOUR SOURCE" 
       app:layout_collapseMode="parallax" 
       app:layout_collapseParallaxMultiplier="YOUR MULTIPLIER" 
       /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:popupTheme="YOUR POPUP THEME"> 

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

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       app:tabGravity="YOUR TAB GRAVITY" 
       app:tabIndicatorColor="YOUR TAB INDICATOR COLOR" 
       app:tabMode="YOUR TAB MODE"> 

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

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

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

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

महत्वपूर्ण विशेषता है टैबलाउट के नीचे होने के लिए।

एपीआई 21 और निचले स्तर के लिए मुझे टैबलाउट गायब होने का मुद्दा सामने आया। आप एक ही समस्या का सामना करते हैं, तो TabLayout के लिए (21 से कम एपीआई के लिए) इस का उपयोग करें:

<android.support.design.widget.TabLayout 
    android:id="@+id/tabs" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true" 
    android:translationY="YOU HAVE TO EXPERIMENT WITH THIS ATTRIBUTE - (in dps)" 
    app:tabGravity="YOUR TAB GRAVITY" 
    app:tabIndicatorColor="YOUR TAB INDICATOR COLOR" 
    app:tabMode="YOUR TAB MODE" 
    > 

आप translationY विशेषता आकार आप अपने अनुप्रयोग बार दिया पर निर्भर करता है के साथ प्रयोग करने की है। आप डीपीएस में एक मूल्य दर्ज करेंगे और कुछ ही मिनटों में आप इसे नाखुश करेंगे।

आशा है कि यह आपके लिए काम करे क्योंकि यह मेरे लिए काम करता है!

Answer 2

यह भी देखें sample जो एक ही मुद्दे को संबोधित करता है।

एपीआई 14-23 पर परीक्षण किया गया। बिना किसी समस्या के काम करता है।

Answer 3

<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/drawer" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:context=".MainActivity"> 

<android.support.design.widget.CoordinatorLayout 
    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/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="230dp" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <ImageView 
       android:id="@+id/header" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@drawable/header" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/anim_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="100dp" 
       android:gravity="top" 
       android:minHeight="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:titleMarginTop="15dp" /> 

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

     </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_view" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:fitsSystemWindows="true" 
    app:headerLayout="@layout/header" /> 

इस प्रयास करें ...