Coordinatore AndroidLayout - Incoerenze tra le versioni Android

Question

Ho utilizzato la libreria di progettazione del supporto Android per creare una vista profilo per un'app su cui sto lavorando.

Il profilo è composto da un'intestazione con un'immagine di intestazione come sfondo e un'immagine di profilo arrotondata al centro. Inoltre, c'è una piccola vista nell'angolo in basso dell'intestazione.

Sotto l'intestazione c'è un viewpager con tablayout.

Il problema che sto affrontando è che ci sono incongruenze tra Android 5.1.1 e 5.0.2 e seguenti.

Ecco come il profilo viene mostrato su un Nexus 5 con Android 5.1.1:

Ed ecco come il profilo viene mostrato su un Xperia Z2 con 5.0.2 Android:

Ecco il codice:

<FrameLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
android:background="@color/white"> 

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_height="250dp" 
     android:layout_width="match_parent" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/profile_collapsingtoolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <ImageView 
       android:id="@+id/profile_header" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" 
       app:layout_scrollFlags="scroll|enterAlways"/> 

      <com.makeramen.roundedimageview.RoundedImageView 
       android:id="@+id/profile_image" 
       android:layout_width="90dp" 
       android:layout_height="90dp" 
       app:riv_corner_radius="45dp" 
       app:riv_border_color="@color/red" 
       app:riv_border_width="1dp" 
       android:layout_gravity="center" 
       app:layout_collapseMode="none" 
       app:layout_scrollFlags="scroll|enterAlways" /> 

      <FrameLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:padding="10dp" 
       android:layout_margin="5dp" 
       android:layout_gravity="bottom|right" 
       android:background="@drawable/shape_usertype_background"> 
       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textSize="12sp" 
        android:textColor="@color/white" 
        android:text="Professional"/> 
      </FrameLayout> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/profile_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:layout_scrollFlags="scroll|enterAlways" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

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

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/profile_pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     android:paddingTop="45dp"/> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/profile_tablayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     app:tabGravity="center" 
     app:tabMode="scrollable" 
     app:tabIndicatorColor="@color/red" 
     app:tabTextColor="@color/main_dark" 
     app:tabSelectedTextColor="@color/red" 
     android:fitsSystemWindows="true" 
     app:layout_anchor="@id/appbar" 
     app:layout_anchorGravity="bottom" 
     android:background="@color/white" 
     /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/profile_floatingbutton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:clickable="true" 
     android:src="@android:drawable/ic_menu_share" 
     app:backgroundTint="@color/red" 
     app:layout_anchor="@id/profile_pager" 
     app:layout_anchorGravity="bottom|right|end" 
     app:rippleColor="@android:color/darker_gray" 
     app:borderWidth="0dp"/> 


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

Quindi, qualcuno ha un'idea su come risolvere questo problema?

Grazie!

Answer 1

Design Library è sfortunatamente piuttosto bacato e dovrebbe essere considerato "beta" piuttosto che pronto per la produzione. Sembra e si comporta in modo diverso a seconda della versione di Android in cui la tua app è in esecuzione e i problemi che ho individuato non sono solo relativi a CoordinatorLayout, ma anche widget relativamente semplici come TextInputLayout non funzionano nello stesso modo ovunque. Conoscere la libreria di progettazione è un prodotto abbastanza fresco, non sono sicuro che valga la pena spendere il proprio tempo lavorando intorno a (non risolvendo) i bug di Google. Aspetterei solo la successiva iterazione della libreria, aspettandomi miglioramenti e correzioni di bug.