style layout_collapsemode example coordinatorlayout below appbarlayout appbar_scrolling_view_behavior android android-layout android-toolbar android-coordinatorlayout android-appbarlayout

android - example - layout_collapsemode



Ocultar barra de herramientas en scroll con recyclerview dentro de fragmento (11)

Estoy tratando de colapsar la barra de herramientas cuando se desplaza una vista de reciclaje dentro de un fragmento. Para empezar, aquí está mi diseño principal:

<DrawerLayout> <RelativeLayout android:id="@+id/mainRelativeLayout" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" > <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:elevation="5dp" app:layout_scrollFlags="scroll|enterAlways" > </Toolbar> </android.support.design.widget.AppBarLayout> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.design.widget.CoordinatorLayout> </RelativeLayout> <!-- ignore --> <drawercontents> </DrawerLayout>

Entonces, como probablemente pueda adivinar, mis fragmentos se están cargando en @id/container . Mi primer fragmento contiene el recyclerview, y configuro app:layout_behavior="@string/appbar_scrolling_view_behavior" en ese recyclerview. Esto funciona, y la barra de herramientas se colapsa en el desplazamiento. El problema es que la barra de herramientas cubre los contenidos superiores del fragmento cuando no está contraído. Al agregar un margen superior al contenedor de fragmentos igual al tamaño de la barra de herramientas solo se deja un espacio en blanco cuando la barra de herramientas se colapsa (obviamente).

¿Qué falta aquí? ¿Algunas ideas?

EDITAR: según se solicitó, aquí está el diseño del fragmento que contiene el recyclerview:

<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.RecyclerView android:id="@+id/feed" 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:background="#00000000" app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


Aún no he probado esto, pero esto es lo que debes hacer:

  • Mueva la app:layout_behavior="@string/appbar_scrolling_view_behavior" al FrameLayout con el container id.
  • Agregue android:fitsSystemWindows = "true" a su AppBarLayout .

Esto es exactamente lo que estoy haciendo en mi aplicación, y funciona. Si esto no funciona para usted, intente limpiar (en Android Studio, Build -> Clean Project ) su proyecto y vuelva a ejecutar la aplicación.


Cree un nombre de diseño como toolbar.xml e inclúyalo en su código donde desee usarlo, pero recuerde una cosa, no use ningún otro diseño como Relativelayout, Linearlayout y otros en la parte superior de


Mi amigo, hice esto hoy y trabajando perfectamente, tengo 2 fragmentos, ambos tienen RecyclerView y pueden desplazar la Toolbar . Miré chrisbanes''s CheeseSquare : CheeseSquare

Si MainActivity un vistazo a MainActivity , hay 3 fragmentos en TabLayout y todos ellos pueden desplazar la Toolbar . Así que preparé este diseño, tal vez eche un vistazo a:

mi activity_home.xml :

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <include layout="@layout/content_home"/> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:fitsSystemWindows="true" android:layout_gravity="start" app:menu="@menu/homepage_leftdrawer"> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>

Y content_home.xml :

<?xml version="1.0" encoding="utf-8"?> <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/root" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme3.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways|snap" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabTextColor="@color/Transparent_few_white" app:tabIndicatorColor="@color/White" app:tabTextAppearance="@style/TabLayoutTextStyle" app:tabIndicatorHeight="3dp" app:tabSelectedTextColor="@color/White" android:background="@color/ColorPrimary" app:tabPaddingStart="0dp" app:tabPaddingEnd="0dp"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/pager2" android:layout_height="match_parent" android:layout_width="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>

¿Dónde está la clave aquí?

Si le ViewPager un vistazo a mi ViewPager , tiene el app:layout_behavior="@string/appbar_scrolling_view_behavior" es todo. No agregue ningún otro comportamiento en el fragmento. ¡Solo inténtalo así y ven con el resultado por favor!


Necesitas algo similar a la aplicación Play Store. Pegando los diseños aquí. El código para esto es fácil y puedes codificarlo por ti mismo.

  1. FrameLayout
    • ImageView
    • ScrollView
      1. LinearLayout
      2. HorizontalScrollView
        • LinearLayout
    • Barra de herramientas

Con la jerarquía de diseño anterior puede lograr algo como esto:


Puede arreglar esto agregando una tercera layout_scrollFlags - snap , a la propiedad layout_scrollFlags .

<Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:elevation="5dp" app:layout_scrollFlags="scroll|enterAlways|snap" />

El uso de esta opción determinará qué hacer cuando una vista solo se ha reducido parcialmente. Si el desplazamiento finaliza y el tamaño de la vista se ha reducido a menos del 50% de su original, entonces esta vista volverá a su tamaño original. Si el tamaño es superior al 50% de su tamaño, desaparecerá por completo.

Revisa este link .


Puede utilizar el diseño Colapsar como

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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.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/collapse_toolbar" android:layout_width="match_parent" android:layout_height="200dp" android:fitsSystemWindows="true" app:contentScrim="@color/zxing_transparent" android:paddingBottom="2dip" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:expandedTitleGravity="bottom|center_horizontal" app:expandedTitleMarginBottom="50dip" app:collapsedTitleGravity="top|center_vertical" app:collapsedTitleTextAppearance="@style/collapseTitle"> <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:elevation="5dp" app:layout_scrollFlags="scroll|enterAlways" > </Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.design.widget.CoordinatorLayout>


También se topó con este problema. Pero se encontró una solución. La solución con retrabajo XML no puede ser, por lo que debe hacerlo mediante programación. Todo lo que necesitamos es Inflater . Sí, sí, eso es tan simple. Sobre la marcha cambiar xml para trabajar todo el desplazamiento.


Utilicé un SwipeRefreshLayout o solo un LinearLayout o RelativeLayout como la raíz del diseño del Fragment y está funcionando.

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/swipe_refresh_layout_main" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/mycustomcolor" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.v4.widget.SwipeRefreshLayout>

Con RelativeLayout :

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/fragment2" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view_android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </RelativeLayout>

Entonces debería ser bueno para ir.


en su conjunto framelayout

android:layout_below="@+id/appBarLayout"

Si eso no funciona, intente esto:

android:layout_below="@+id/toolbar"


<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:contentScrim="?attr/colorPrimary" > <android.support.v7.widget.Toolbar android:id="@+id/appBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_below="@+id/app_bar_layout" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:weightSum="1"> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Your recycler view should go here"/> </FrameLayout> </LinearLayout>


<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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.design.widget.AppBarLayout android:id="@+id/tabanim_appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/tabanim_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways|snap" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.AppBarLayout> <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.CoordinatorLayout>