CollapsingToolbarLayout e TabLayout

Question

Sto provando a creare un'attività con CollapsingToolbarLayout con un'immagine e una barra degli strumenti (come in CheeseDetailActivity nell'esempio cheesesquare here), che presenta anche un layout di tabulazioni di seguito.

Qualche idea su come implementarlo?

Quando si tenta di aggiungerlo alla CollapsingToolbarLayout o AppBarLayout, il risultato è che il layout scheda è nella parte superiore dello schermo

Answer 1

Prova questa struttura:

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

L'attributo importante è la layout_gravity di TabLayout deve essere inferiore.

Per API 21 e versioni precedenti ho riscontrato il problema del tabLayout che scompare. Se dovete affrontare lo stesso problema, per il TabLayout (per le API inferiore a 21) utilizzare questo:

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

Bisogna sperimentare con l'attributo translationY a seconda della dimensione avete dato la vostra barra di app. Inserirai un valore in dps e in pochi minuti lo inchioderai.

Spero che funzioni per te come ha funzionato per me!

Answer 2

Vedere anche questo sample che risolve lo stesso problema.

Testato su API 14-23. Funziona senza problemi.

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

Try This ...