Utilizar windowTranslucentStatus con CollapsingToolbarLayout

Estoy tratando de obtener un efecto similar a lo que se ve en Google Play.

Tengo la siguiente presentación para mostrar una barra de herramientas transparente con una imagen detrás de ella. Cuando el usuario se desplaza hay un efecto de paralaje en la vista de la imagen, ya que se desplaza fuera de la pantalla. La barra de herramientas regresa cada vez que el usuario se desplaza hacia arriba, con la visualización de la imagen sólo regresa cuando el usuario llega al final de la lista.

Todo esto funciona muy bien.

<android.support.design.widget.CoordinatorLayout android:id="@+id/main" 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.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:background="@color/background_material_dark"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" app:statusBarScrim="#09b" app:contentScrim="#09f"> <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/location_banner" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" android:fitsSystemWindows="true" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

La cuestión

Cuando establezco windowTranslucentStatus a true. El contenido de la vista se desplaza hasta estar debajo de la barra de estado, pero el contenido de CollapsingToolbarLayout se mueve hasta el doble de la altura de la barra de estado (CollapsingToolbarLayout conserva la altura correcta).

Esto significa que parte de la parte superior de la imagen está cortada y la barra de acciones ahora aparece debajo de la barra de estado en lugar de debajo de ella. Como un efecto secundario de esto ahora hay relleno en la parte inferior de la CollapsingToolbarLayout la misma altura que la barra de estado

Esto es lo que parece sin windowTranslucentStatus. Todo aquí funciona bien Introduzca aquí la descripción de la imagen

WindowTranslucentStatus establecido en true Introduzca aquí la descripción de la imagen

El usuario se desplaza hacia arriba desde la lista inferior (no en la parte superior) Introduzca aquí la descripción de la imagen

Ha habido una actualización de la biblioteca de diseño. Supongo que el problema publicado anteriormente era un error.

Si actualiza la biblioteca de diseño a la versión más reciente este problema ya no se produce.

Ahora he eliminado todos los fitsSystemWindows = "true", excepto para el ImageView (como que necesita mostrar en la barra de estado).

También he eliminado el relleno menos de la barra de herramientas.

Este es mi tema para 21+

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowActionBarOverlay">true</item> <item name="android:windowContentOverlay">@null</item> <item name="android:textColorPrimary">@android:color/white</item> </style> 

Todo funciona como se espera ahora

Agregue fitsSystemWindows al diseño y establezca en true.

Actualizar

Perdón por mi respuesta incompleta. Debería agregar fitsSystemWindows = "true" a layout xml como los siguientes códigos.

 <android.support.design.widget.CoordinatorLayout android:id="@+id/main" 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.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:background="@color/background_material_dark" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" app:statusBarScrim="#09b" app:contentScrim="#09f" android:fitsSystemWindows="true"> <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/location_banner" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" android:fitsSystemWindows="true"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" android:fitsSystemWindows="true" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

Una vez que la barra de estado es transparente y la libre para usar por la actividad, la barra de herramientas se empuja hacia arriba para ocupar ese espacio. Para corregir esto, necesita mover manualmente la barra de herramientas al lugar original.

Agregue las etiquetas siguientes a la vista "android.support.v7.Widget.Toolbar":

 android:layout_height="48dp" // Whatever the height of the toolbar you want android:layout_marginTop="-48dp" // Negative of the height of the toolbar 

Extienda el CoordinatorLayout y llame a setOnApplyWindowInsetsListener en su constructor para restablecer los valores insertados. Aquí está el código:

 public class CustomCoordinatorLayout extends CoordinatorLayout { public CustomCoordinatorLayout(Context context) { super(context); init(); } public CustomCoordinatorLayout(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CustomCoordinatorLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT_WATCH) { setOnApplyWindowInsetsListener(new OnApplyWindowInsetsListener() { @Override public WindowInsets onApplyWindowInsets(View view, WindowInsets windowInsets) { WindowInsets replaced = windowInsets.replaceSystemWindowInsets(0, 0, 0, 0); return replaced; } }); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } } 

Tengo el mismo problema, pero hay una cosa que sé.

Si quieres tener una barra de estado transparente en una barra de herramientas normal, necesitas agregar una tapa de relleno de 16dp.

La mejor manera de lograr esto es como Stimsoni dijo

Añadir android: fitsSystemWindows = "true" para el CoordiatorLayout, AppBarLayout y ImageView

 <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/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBar" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="wrap_content" 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" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <ImageView android:id="@+id/background" android:layout_width="match_parent" android:layout_height="256dp" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" android:alpha="0.75" android:src="@drawable/foo"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>... 

Sólo cambia el color de la barra de estado en Styles.XML (v21)

 <item name="android:statusBarColor">@android:color/transparent</item> 

O eliminar la línea anterior en ese XML funciona perfecto.

  • Clickable CardView dentro de NestedScroll no activa el desplazamiento
  • Viewpager no se desplaza en el diseño del coordinador
  • CollapsingToolbarLayout | Problemas de desplazamiento y diseño 2
  • La expansión CollapsingToolbarLayout no funciona con RecyclerView
  • PreferenceFragment no scroll en CollapsingToolbarLayout
  • Barra de herramientas de colapso animado suave con Android Design Support Library
  • Colapsar el diseño de la barra de herramientas con pestañas, contraer la barra de herramientas sólo cuando las pestañas alcancen la barra de herramientas en android
  • Prevenir CollapsingToolbarLayout colapsar si no es necesario
  • Agregar FloatingActionButton en el diseño de barra de herramientas de contracción
  • ¿Cómo mostrar el logotipo de la barra de herramientas, icono, título, subtítulo cuando se envuelve en un CollapsingToolbarLayout?
  • La barra de herramientas no se muestra desde la barra de herramientas de contracción
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.